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




用LINE傳送
對惹... 不好意思只有行動裝置可以用 LINE 分享喔.. ^^" (若是用桌機或筆電會被帶走.. ~"~) what the fxxk..

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

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

所以在這年後的第一個週一,為了今後可以讓我們更快速的掌握各項 GTM 分析、設定技術,同時也讓我們得以重新檢視自己對於 Google Tag Manager 技術的認知,就讓我們一起來看看啟用 Google Tag Manager 最重要的三大開關、 ”代碼 Tags“ 、 “觸發條件 Triggers“ 以及 “變數 Variables” !!

其實在 Google 代碼管理工具說明中心就有介紹到這三個名詞定義以及相互作用的關係如以下文章連結。但因為篇幅有點簡短且不是那麼鉅細靡遺..

tags-triggers-variables

當然,如果光看 Google 的影片、文章就能夠全盤掌握是最好,但若還是有點疑惑,不妨搭配這篇文章中的一點圖文說明,就希望能讓大家更清楚 Google Tag Manager 中的代碼、觸發條件、變數以及未來要如何使用她們了。

且需要再次補充的是,Google Tag Manager 不是一個只能設定、控制 Google Analytics 數據抓取的工具。且可以支援的 Google 服務、工具也相當全面。只是我們在此還是會盡可能僅介紹 Google Analytics 應用相關技術。

(為了避免瀏覽文章的心情與思緒被打斷,這篇文章中若如上方有出現超連結,或許也可以先按著 Ctrl(或 ⌘ Command) 鍵再點選該連結。如此就可以先默默另開視窗,等待會有空或真的有需要時再到另一個頁籤查看喔!!)



代碼 Tags

如同在 Google Tag Manager 說明中心所提倒的 “代碼是一段 JavaScript 程式碼,可將資訊傳給第三方..” 以及 “就不必再維護原始碼中的每一段 JavaScript 程式碼” 。

about Tags

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

new tag

不過就如我們不斷提醒的是,可以在 Google Tag Manager 新增的代碼並不局限於 Google Analytics, 但因為我們將先專注在 Google Analytics 的快速應用上,所以未來若要利用 GTM 來設定、追蹤 GA 相關數據,都需要先在後台管理介面選擇 新增代碼 > 代碼設定 > 通用 Analytics (分析)。

Choose tag type

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

Track type

但不論現在是要追蹤什麼樣的數據,因為 Google Tag Manager 還不是 AI, 無法憑空得知我們到底想要利用 GTM 分析什麼,所以就需要在設定代碼完成後進行下一步必備流程,也就是我們下一段談論重點、觸發條件!!
(如下圖紅框中也有提到,要觸發某個代碼就需要先選擇觸發條件..)

Triggering

應該會注意到上面第一張圖中是使用 “標記” 這名詞,但我們會使用 “代碼” 是因為現在新版 Google Tag Manager 已經全面改用 “代碼” 。就像是我們第三段介紹的變數在之前叫做 “巨集” 是一樣的狀況。
(不過在英文說明介面中都是使用 “Tags”)

再者是若對 “只需要在一開始將 GTM 追蹤碼置放於所有網頁中” 還不是那麼熟悉的朋友,可參考我們年前的 “年前轉換 Tag Manager, 如何快速分析應該比學不完的分析技術更重要” 相關介紹。

About_Tags_-_Tag_Manager_HelpAbout_Tags_-_Tag_Manager_Help

觸發條件 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 通用分析的代碼。

然後因為我們現在要讓 Google Tag Manager 知道什麼時候要啟用這代碼並協助我們收集網頁數據,加上 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

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

Variable Configuration

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

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

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

Built-In Variables

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

說到篩選器 + 規則運算式,為了讓大家想起這個網站原來其實還是有在介紹 Google Analytics.. 就可以回顧一下我們在 “驚爆焦點之用篩選器排除特定流量,讓數據更接近真相” 以及 “再談 “規則運算式”,這次用人類比較能夠理解的語言來說..” 所提過的介紹。

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

preview mode

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

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

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

ecommerce-data layer

這篇 Google Analytics 精選文章發表於2017 年 02 月 06 日 星期一

立即訂閱看見數據網電子報

數據變化萬千,跟著看見數據網從數據中洞察網站經營脈動、缺失與機會!!