掌握代碼、觸發條件、變數,啟用 Google Tag Manager 就是現在



本篇文章重點關鍵字/標籤:

說到代碼、觸發條件、變數..

我們在年前開始試著介紹 Google Tag Manager 以及幾個可以進階設定 Google Analytics 的參考流程,但發現在溝通過程中,有一些基礎名詞還是需要先解釋與定義後,再好好一起探究會比較有效率。

所以為了今後我們能更快速的掌握各項 GTM 分析、設定技術,就讓我們一起來看看啟用 Google Tag Manager 最重要的三大開關:「代碼 Tags」、「觸發條件 Triggers」以及「變數 Variables」!

再次說明,Google Tag Manager (以下簡稱GTM)不是一個只能設定、控制 Google Analytics 數據抓取的工具,它還能支援其他的 Google 服務、工具,只是在此我們還是會以介紹 Google Analytics 應用相關技術為主。

代碼 Tags

如下圖, GTM說明中心所述:「代碼是一段 JavaScript 程式碼,可將資訊傳給第三方」以及只要使用GTM「就不必再維護原始碼中的每一段 JavaScript 程式碼」 。

about Tags

GTM最核心也最方便之處就是只需要在一開始將 GTM 追蹤碼置放於所有網頁中,未來若想在任何網頁上進行追蹤的數據,就只需要在GTM後台介面新增一個「代碼」即可。

new tag

若要利用 GTM 來設定、追蹤 GA 相關數據,需要先在後台管理介面選擇「新增代碼 > 代碼設定 > 通用 Analytics (分析)」。

Choose tag type

緊接著就可以開始透過下方的「追蹤類型」來選擇我們要進一步掌握的用戶行為相關網頁數據。

Track type

GTM無法憑空得知我們到底想要分析什麼,所以就需要在設定代碼完成後進行下一步,也就是我們下一段談論重點「觸發條件」
(如下圖,設定觸發條件是啟動代碼的必備動作)

Triggering

「標記」和「代碼」在英文介面中都是「Tags」,但是中文版介面有變更過,如有閱讀其他資料使用兩種名詞,請記得他們指的都是「Tags」。

觸發條件 Triggers

承上一段,若要讓某一個代碼開始作用就一定需要先設定 “觸發條件” 。而「觸發條件」有以下幾種類型:

  • 瀏覽量 (網頁)
  • 點擊 (網頁)
  • 提交表單 (網頁)
  • 紀錄變更 (網頁)
  • JavaScript 錯誤 (網頁)
  • 計時器 (網頁)
  • 自訂事件 (網頁與行動應用程式) (網頁)

不過目前(2017/2)實際在 Google Tag Manager 介面上顯示的用字與網頁介紹略有不同,但基本上含義都是一樣的。

Choose trigger type

而上述都是我們未來若想要新增「Google Analytics 追蹤分析數據」代碼時所可以選擇的觸發條件類型。也就是訪客出現上述條件動作時就傳送數據給 Google 並進一步在 Google Analytics 中產生數據。

就像是我們在年前開始介紹 Google Tag Manager 時也有提到,現在我們要利用 GTM 來管理、設定 Google Analytics, 除了先移除原本的 GA 追蹤碼、並於網站的每一個網頁中寫入 Google Tag Manager 追蹤碼這比較技術性的流程外,第一步就是新增一個 Google Analytics 通用分析的代碼。

然後因為我們現在要讓GTM知道什麼時候要啟用代碼並協助我們收集網頁數據,加上 Google Analytics 數據追蹤是需要追蹤所有網頁的,所以我們就可以在觸發條件的類型選擇「網頁瀏覽」。

page view

並在下方的「這項觸發條件的啟動時機」選擇「所有的網頁瀏覽」,就可以完全平行輸入 Google Analytics 過去安裝的技術流程了。

Trigger Configuration

不過,大家在操作 Google Tag Manager 時應該也會發現,其實並不用重新點擊、進行 網頁瀏覽 > 所有的網頁瀏覽 等流程,而是在初次點擊 「觸發條件」時就有一個「All pages」的預設觸發條件就可以直接選擇了。

至於有關上述眾多觸發條件類型的詳細使用時機與說明,也可以參考 Google 代碼管理工具說明與介紹

trigger all pages

all pages

變數 Variables

最後,我們在上一段中所提到,要新增 Google Analytics 代碼的觸發條件是 All pages, 所以可以直接用預設或簡單選擇就得以設定完成。

但若是我們現在需要指定追蹤特定或說經過篩選的目標,如網站產品頻道的所有頁面(例:example.com/products/ ) 又或者是更複雜、精確的位置時,我們就需要跟 Google Tag Manager 建立起一個人機默契。而這一個需要有點想像力的默契就是「變數」。

透過這個我們在 GTM 建立的專屬默契,就可以用我們在 Google Tag Manager 自訂的名稱,指定追蹤網站中的各項元素與數值。

Variables

Tips:為了省去每次新增 Google Analytics 代碼都需要輸入一次追蹤編號的小麻煩,我們就將該編號(UA-xxxxxxxx)設定為 「常值」這個變數並賦予一個在 Google Tag Manager 的專屬名稱,未來每次要新增代碼就只需要選擇該變數名稱而不用重新輸入一次編號。

Variable Configuration

當然,以上範例只是其中一種應用。變數類型非常多,透過不同變數的指定,搭配過去我們在 Google Analytics 所提過的 “篩選器” + “規則運算式” 來進一步分析、抓取我們想要了解的數據(值)就幾乎都不是問題。

而其中需要先強調的應該就是 “內建變數” 。所謂內建變數顧名思義是不用刻意設定,已經內建在 Google Tag Manager 中的變數,只需要開啟就能夠使用。

而開啟的方式如下圖,就真的非常簡單地只需要在內建變數名稱前的 Radio Button 上打勾即可(但這麼簡單為什麼預設是關閉的呢。唯一的可能是怕太過於眼花撩亂會降低學習意願.. orz)。

Built-In Variables

只要簡單勾選與開啟後,日後不但就能利用這些內建變數搭配篩選器讓 Google Tag Manager 更加彈性與強大,更重要的是我們在利用 “預覽及偵錯模式” 測試觸發條件+變數是否成功設定時,還可以一併測試網頁元素的變數名稱對硬值喔。

說到篩選器 + 規則運算式,可以參考我們在 “驚爆焦點之用篩選器排除特定流量,讓數據更接近真相” 以及 “再談 “規則運算式”,這次用人類比較能夠理解的語言來說..” 所提過的介紹。

上述提到的預覽及偵錯模式應用可以參考我們在 “預覽 x 內建變數 x GTM, 任意追蹤頁面事件前的必備前置作業” 中的介紹,可以讓我們輕易在 Google Tag Manager 成功抓取到特定的數據喔。

preview mode

在今天代碼、觸發條件、變數真的被打開之後…

大家應該有發現,除了代碼、觸發條件、變數以外,Google Tag Manager 其實還有更為強大、靈活且關鍵的應用與技術名詞為 「資料層 Data Layer」 ,且在使用 Google Tag Manager 時確實也是要搭配這資料層、才能協助我們在網頁中進行最大可能的分析與數據收集(如用戶在網頁上購買某商品的交易金額等電子商務網站數據)。

而這一切的一切就希望讓我們在今後彼此繼續教學香腸,在此也就先預祝我們今年都能順利為自己的公司、團隊創造更大的價值,或更直接大發利市且紅透半邊天吧!!!!

ecommerce-data layer



有關這位努力看見數據的人

蔡先生

共同創辦人/專案總監 業務接洽/聯絡方式..
Email Address: ada@awoo.ai / Line ID: 539406

目前主職 awoo MarTech 技術 nununi 推廣暨服務顧問,且深耕 SEO & Google Analytics 技術多年,曾有幸擔任國內各大知名企業、品牌與協會技術交流講師,且除了盡力看見數據外更盡可能抽空看見臺北各大特色咖啡館/優質廠商於 www.triplew.tw。

努力看見數據的人

蔡先生

共同創辦人/專案總監 業務接洽/聯絡方式.. Email Address: ada@awoo.ai / Line ID: 539406 目前主職 awoo MarTech 技術 nununi...

技術交流邀約(全國可談)

ada@awoo.com.tw
02-87121128#23

回頁面頂端