預覽 x 內建變數 x GTM, 任意追蹤頁面事件前的必備前置作業




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

說到預覽 x 內建變數 x Google Tag Manager..

在 Google Tag Manager 裡面操作 Google Analytics 之所以會那麼強大、便利(或說好玩),一個很重要的關鍵就在於過去若想在 Google Analytics 進行一些進階分析如測試用戶是否會點擊頁面上的某一個連結或甚至是否在網站上消費、產生營收,都需要從某一連結原始碼中插入 “Google Analytics 事件追蹤碼” 如下圖,或是透過程式從頁面上抓取、傳送我們所需要指定知道的數據。

ga event tracking

但現在透過 Google Tag Manager, 這一切有點技術門檻的動作不再難以實現 (也不用含淚跪求工程師大大幫忙) ,只要參考我們前兩集的文章介紹、將 Google Tag Manager 追蹤碼安裝到網站的每一頁中後,就只要在 Google Tag Manager 後台介面如下圖、就可以隨心所欲進行設定與追蹤。

event track setting

而今天,要談的就是當我們已經安裝 Google Tag Manager 完成後,若想要利用 Google Tag Manager 設定與追蹤網頁上的某一個指定連結到底有沒有人點擊、點擊幾次與在哪一個頁面進行點擊前,所需要先進行的專屬變數與對應值的研究。

(口語一點的說法是、現在我們想要隨意用 GTM 指定我們想要分析的連結是沒問題,但今天需要先了解如何研究與確認指定分析目標的變數名稱與對應值。

就像是這篇文章的封面圖,只要能先確認某一連結的變數名稱後,未來就可以從 GTM 後台隨意指定。)

題外話:

當然,若還沒有收看過前兩集的朋友,可麻煩先參考 “新增 Google Analytics 追蹤編號為變數,編輯代碼零失誤” 、 “年前轉換 Tag Manager, 如何快速分析應該比學不完的分析技術更重要” 中所提到的相關動作與流程。

但若是想直接看到底怎麼在 Google Tag Manager 設定指定連結事件的朋友,我們會在下一篇文章中進行介紹。

至於這篇文章的封面圖其實就是這整篇文章最重要的動作,與未來想在 Google Tag Manager 追蹤指定連結事件所可以先進行的動作。

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


請先開啟 GTM “內建變數” 中的五個 Click 變數..

如同我們在上一集所介紹到的 “變數” 所說,這變數就是我們可以跟 Google Tag Manager 溝通的共同語言,未來若要輸入很長很長的文字就不用每次都要重新複製、貼上,未來就只要選擇我們自定義的變數名稱即可。
(如我們上一集就將不太容易背起來的 Google Analytics Tracking Code 編號設定為一個變數如下..)

Variables setting

又或者是現在想要指定網頁中某一相同屬性但不同值(自訂名稱)的元素時,就可以善加利用我們現在要請大家開啟的 Google Tag Manager 的 “內建變數”。

因為如此在未來就可以透過這 “內建變數” 跟 Google Tag Manager 指定,用戶觸發某一個指定屬性變數與對應值時就產生一個事件。

built-in variables

只是雖然說現在有相當多 “內建變數” 但都不是預設就開啟,還需要到 Google Tag Manager 後台介面中勾選才有辦法使用。

而裡面這麼多變數中有五個是與今天介紹文章主題有關的如下圖。待開啟後,未來就可以更快速、準確又彈性的請 Google Tag Manager 指定專屬目標了。

click-variables

題外話:

但為什麼是這五個呢。

先說明一下這五個變數(除了 Click Text 以外)所代表的都是 HTML 屬性,下圖為 W3C School 所提出來的介紹

W3C School introducing

(而以下為範例..)

Click Classes:<a href=”http://www.xxx.com/” class=”me“>請點我</a> 中的 me
Click ID:<h1 id=”myHeader“>Hello World!</h1> 中的 myHeader
Click Target: <base target=”_blank“> 中的 _blank
Click URL:<a href=”http://www.xxx.com/“>請點我</a> 中的 http://www.xxx.com/
Click Text:<a href=”http://www.xxx.com/”>請點我</a> 中的 請點我

因為前四個變數都是跟 HTML 中的屬性有關,所以只要我們網頁中的連結語法有使用到上述其中任何一個屬性與自訂名稱就可以進行指定了,至於 Click Text 在以上範例中是超連結文字,所以也是一個相當彈性且容易設定的值如下圖。

不過題外話的題外話是應該大家都有發現還有一個變數為 Click Element, 但因為這個變數對應的值並不是我們可自訂,所以就先暫不使用,未來若有使用必要或機會時再說。

click text

善用預覽及偵錯來確認某一特定連結的變數名稱與對應值

緊接著再回到我們現在最終期待就是希望可以利用 Google Tag Manager 來指定某一頁面中某一個位置的連結被點擊時,就產生一個 Google Analytics 的事件。

所以我們為了要知道某一連結的變數名稱,以便我們在下一集中介紹如何利用這個技巧來追蹤指定連結觸發事件次數,就要先讓我們來看看 Google Tag Manager 中一個相當有趣的功能 “預覽及偵錯” 。

preview and debug button

像是現在我們已經開啟了上一段提到的內建變數後可以先不用趕著發佈,而是點擊上圖 “預覽及偵錯(主要用途是在發佈代碼前檢查是否有問題)” 按鈕並進入預覽模式。接著如 Google Tag Manager 後台介面所說的就可以先用瀏覽器開啟我們的網站。

now previewing

進站後過沒多久,就會發現網頁下方會跳出一個 Google Tag Manager 的視窗,而這個視窗本來是讓我們可以測試在 Google Tag Manager 設定的 Tag 有沒有成功安裝、啟動。

preview mode

但旁邊還有另外一個 Variables 頁籤則是當我們在頁面上真的點擊了某個點擊元素後,就會顯示我們在網頁上所點擊的元素中帶了哪一些變數以及對應的值。

Variables and value

而這時,因為我們在上一段中已經開啟了五個內建變數,所以只要網頁上的某一個特定連結語法中包含某一變數對應值(自訂名稱)時,就會在這測試視窗中顯示。

也就是說,若現在我們想追蹤網站中某一頁面的否一個連結是否被點擊、觸發,就可以先進入 “預覽及偵錯” 模式與實際點擊該連結,接著就可以去 Variables 頁籤看看有沒有屬於該連結的專屬變數。

像是假設現在要試著追蹤某一個網站中的 facebook 粉絲頁圖示連結有多少人點擊(或比較哪一個位置較容易被點擊..),就可以先進入 “預覽及偵錯” 模式,緊接著到網頁去點擊(建議用另開視窗的方式,也才有辦法停留在預覽模式頁面..)該連結後就可以到原頁面上的 Variables 頁籤查看,就會發現目前網站所有連結中,只有這個連結所使用的 class 為 logo, 那這麼一來未來就可以在 Google Tag Manager 指定追蹤這連結(click classes = logo)到底被點擊幾次了。

Click Classess and value

題外話:

但若某一個連結就真的沒有獨一無二的變數與對應值,那就真的束手無策了。所以在此也會未來建議在新增連結時,可以盡可能新增一些不同的屬性如 id 或是連結文字,未來我們也才有辦法真的隨心所欲的追蹤與分析喔。

id and css

在今天預覽 x 內建變數 x GTM 之後…

如一開始所提,今天主要是先讓我們研究與確認我們想要獨立分析的連結、是否有一些獨一無二的變數與值,這樣一來也才可以繼續我們在下一集會提到的,利用新增代碼創建一個新的事件追蹤機制,然後再於 Google Tag Manager 中輸入那個獨一無二的變數對應值,就可以在 Google Analytics 中回顧與比較這些事件點擊數據了。

Trigger Configuration

最後的最後是上週有朋友問到、故也在此補充一下的是若已經安裝 Google Tag Manager 的朋友就可以將原本的 Google Analytics 或是事件追蹤碼移除掉了。

且因為在 Google Tag Manager 輸入的就是原本的j追蹤編號,所以只要手腳夠快的話那幾乎對數據紀錄是不會有任何影響的喔~

event tracking code

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

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

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