關聯工具

Google Analytics (GA) – Universal Analytics ( analytics.js )

Google Tag Manager (GTM) v2

技術難度

中低

前置知識

何謂 GA, 何謂 GTM

最近更新日期

2016.06.13

代碼管理工具 Google Tag Manager ( GTM ) 是  Google 大神推出的管理各種網頁上追蹤標籤的工具。他是一個管理工具,而不是一個新的追蹤機制。這是一開始新手會搞不清楚的地方。由於是 Google 的產品,因此最初階使用,同時也是最完整的整合支援,就是自家的  Google Analytics ( GA ) 了。使用 GTM 來埋設 GA 總體來說並不會影響 GA 的追蹤 ( 但如果深究,是多少有些影響流量的,但這邊就先不提這一部份) 。

GTM 與 GA 的完美整合,是多數人使用 GTM 這個工具的第一步,可說是入門的起手式。然而,要完整地發揮他們兩兄弟整合的完整威力,還是需要蠻多相關知識的,除了熟悉 GA,也要熟悉 GTM。本篇文章將專注於介紹在以往埋設 GA 時我們發揮的很多進階功能,完整移植到 GTM 的界面上。在這中間會碰到很多相關於 Google Analytics 的進階功能,將不會深入探討。畢竟,這些功能各個都是可以獨立一篇做教學的東西。有其必要的話,以後有時間將會再為他們一一的另開教學討論文。這篇可以說是一個起頭與先將基本的輪廓勾勒出來。

 

GA 追蹤程式碼 ( Hard-coded tag )  

 

在早先,GA 追蹤碼的埋設方式是將 GA 所提供的追蹤程式碼加入到每一頁網頁中 ( c ) 如下所示

這只是最基本的 GA 追蹤碼,如果有一點撰寫程式的知識與仔細觀察,可以發現,只是送出了一個 pageview 的資料給 GA 而已。

而一個對於 GA 的各功能了然於胸,能夠充分利用 GA 所提供的各種追蹤功能的網站數據分析師,他所埋設的 GA 追蹤碼,應該是多多少少像下面這段 GA 追蹤碼一樣的完整。”{{ }}”為變數。

註1:
ga(‘require’, ‘ecommerce’);     // 電子商務追蹤 ( Ecommerce Tracking )
ga(‘require’, ‘ec’);                   // 加強型電子商務功能 ( Enhanced Ecommerce Tracking )

因為必須搭配其他電子商務追蹤的參數才完整,所以暫時不提,日後會有專文補充。

註2:
ga(‘require’, ‘autotrack’);       //納入 autotrack 整包 plugin
<script async src=’path/to/autotrack.js’></script>      //載入 autotrack.js 程式

或是單獨納入 autotrack 的單一功能的 plugin 等等
ex : ga(‘require’, ‘eventTracker’);                 //納入單一個 autotrack – eventTracker plugin
ga(‘require’, ‘outboundLinkTracker’);    //納入單一個 autotrack – outboundLinkTracker plugin

由於此新功能暫時是不建議用 GTM 來埋設,所以也暫且也略過不提。

利用 GTM 埋設 GA 追蹤碼

GTM 中,要貼上 GA 的 Tag,來協助埋設 GA code 到每一個有埋設 GA 的網頁上。

作法其實有兩種:

A. 使用 Custom HTML Tag

好處:

1. 直接將原本貼在網頁原始碼 (source code ) 的 GA 追蹤碼,原原本本的貼在編輯區域裡面。方         便,無腦,不會錯, GA 追蹤碼十秒鐘移植至 GTM。

2. 由於做法跟以往作法相差無幾,所以一些用於貼在追蹤程式碼或是修改追蹤碼的功能,可以持續       使用 ( ex: autotrack.js )     

壞處:這樣的做法很多 GTM 提供的管理優點特長無法發揮。換湯不換藥。

 

B. 使用 GTM 裡面提供的 Google Analytics Template

好處:可以充分利用 GTM 的 Template 來管理你的 GA Tag,充分發揮其管理的方便與組織概念。達到              少部分更動,卻能夠輕鬆佈碼到各個網頁的目的。

 

壞處: 1. 對於 GTM 要有較為深度的了解。

            2. 有一些工具與功能,礙於機制與較為新穎,尚未完全整合至 GA Template 中。

 

完美移植 GA 追蹤碼至 GTM 內建的 GA Tag 範本

在這邊我們就來介紹剛剛上面的完整專家級 GA 追蹤碼,如何在 GTM 裡面利用內建的 Google Analytics Template 實作埋設 GA。

Step 1. 選擇 Google Analytics 這個產品。

Step 2. Tag 類型選擇 Universal Analytics 的 template ( analytics.js )

 

 

Step 3. 填入 GA 資源 (property) 的 UAID ( UA-xxxxxxxx-1)

Tips: 如果是單獨的一組,推薦使用常數變數 (Constant Variable)來記錄。
如果是有多組的 GA 帳號要管理,不同 UAID,推薦使用 Lookup 變數建立對照表來管理。

Step 4. 將 Enable Display Advertising Features 勾選起來,
將可開啟客層和興趣報表 (Display Features)功能。

            相對應到 Hard-coded 埋設法的 ga(‘require’, ‘displayfeatures’);         

 

Step 5. 因為是要送出基本的網頁追蹤資料,因此我們要選擇 pageview
相對應到 Hard-coded 埋設法的 ga(‘send’, ‘pageview’);

 

Step 6. Field to Set 設定 Field Name : cookieDomain, Value : auto
            將可以使 cookie,讓各個 subdomain 共同使用。

            Ex: www.analytics101.org 與 digital.analytics101.org 將可共用 cookie

 

Step 7. Field to Set 設定 Field Name : allowLinker, Value : true
            是設定跨網域追蹤功能。
相對應到 Hard-coded 埋設法的 ga(‘create’, ‘UA-12345678-1’, ‘auto’,{allowLinker: true});

Step 8. Field to Set 設定 Field Name :userid, Value : {{網站用以儲存userID的變數}}
           是開啟 User-ID 報表的功能。
           相對應到 Hard-coded 埋設法的 ga(‘set’, ‘&uid’, {{網站用以儲存userID的變數}});       

 

Step 9. 自訂維度 (Custom Dimension) 部分是設定傳入自訂維度至 GA。
相對應到 Hard-coded 埋設法的 ga(‘set’, ‘dimension1’, {{傳入GA的dimension變數}});

Index填入在 GA 內相同的設定值
Dimemsion Valre:填入 {{傳入GA的dimension變數}}

 

 

Step 10. 內容分組 (Content Group) 部分是設定建立內容分組。
相對應到 Hard-coded 埋設法的 ga(‘set’, ‘contentGroup1’, ‘同 GA內的內容分組的名稱’);

               Index 填入在 GA 內的設定值
Content Group:填入 {{要傳入GA作為內容分組的變數}}

 

Step 11. 要實作跨網域追蹤,除了上面提到的 Step 6. 還有一個地方要做設定。

             在 Auto Link Domains 填入要追蹤的網域列表,以逗號分隔。

 Tips: 建議使用常數變數來紀錄列表,方便日後維護。

 

Step 12. 展開進階設定部份,Enable Enhabced Link Attribution ,值改為 True.
將可開啟加強連結歸屬 ( Enhanced link attribution )。
相對應到 Hard-coded 埋設法的 ga(‘require’, ‘linkid’);       

 

    

Step 13. 最後設定這個 GA Tag 被觸發的條件 (Trigger)。沒有特別需求的話,一般來說是網站
的每一頁都要被納入,因此直接選擇 All Pages 即可。關於 Trigger 的深入用法,之後將
會另行撰文解說。

 

 

以上,希望能夠帶給大家清楚的結構與脈絡解說如何將 GA 由 Hard-coded 埋設法移轉至 GTM 所提供的整合範本來做埋設。
分析愉快 !!!

 

參考資料

Comments

Posted by James Wang

James Wang 從 web developer 到電商網站規劃經營,再到專注於網站數據分析。接觸的越多,挖得越深,越覺得自己很多地方不足。期許自己能夠一直不斷的進步學習,謙卑的累積經驗成為全方位的 Growth Hacker。夢想著未來能夠打造自己心目中的產品。取之於社群,用之於社群,致力於回饋於網路。期許自己能夠為社會為產業貢獻一小份力。