現在的數位行銷愈來愈複雜,很多時我們會在網路行銷中心點—網站上收集數據,然後憑數據分析來制定行銷策略,很多時我們是依賴第三方的行銷工具來幫助收集數據,不過,各款行銷工具也有其針對性和特色,為了收集更可靠的數據,我們會在網站上安裝多款行銷工具,隨著工具日漸增加,不但愈來愈難管理,同時也影響著網站的載入速度。
什麼是 Google Tag Manager(GTM)?
Google 代碼管理工具 —— Google Tag Manager(GTM) 是一款幫助網站集中管理 JavaScript 的工具(JavaScript 是一款運行在瀏覽器上的程式語言),現在愈來愈多的行銷工具通過安裝 JavaScript 在網站上收集數據,幫助網主了解用戶在網站上的行為,例如這些常見行銷工具︰Google Analytics、Facebook Pixel、HotJar、Facebook Messenger 等等,如果每次也要手動安裝這些行銷程式,當程式愈來愈多時,也會愈來愈難管理。
除此之外,Google Tag Manager(GTM)也可以追蹤用戶在網站上的特定事件,然後將數據傳送給第三方法行銷工具,例如︰訂閱文章、將產品加到購物車、看完整篇文章等等,當要追蹤的事件愈來愈多時,不但愈來愈難管理,更嚴重的甚至拖慢整個網站的載入速度。
這些數據不但幫助品牌了解自己的顧客,在進行 A/B 測試時尤其重要,A/B 測試需要憑數據來決定採用那一個最佳的行銷方案。
傳統自行在網站上加入 JavaScript 不但容易出錯,很多時也因為沒有使用最佳化的機制來載入程式,令網站愈來愈慢,你知道嗎?Amazon 曾經說過,當網頁載入每慢 0.1 秒,就會損失 1% 的銷售,網站速度是影響用戶體驗的關鍵之一。
什麼是 Tag(代碼)?
Tag(代碼)的意思是指在 HTML 上插入的 JavaScript 程式,這些 JavaScript 大多是由第三方行銷工具產生的,你可以想像每一個 Tag 也是一個運行在網站上的小程式,有的是收集數據,有的是回傳數據回第三方行銷工具,有的是顯示一些元素在網站上(Facebook Messenger、文章訂閱表格等等)。
為什麼使用 Google Tag Manager(GTM)?
Google 代碼管理工具除了讓網主集中管理代碼外,也提供了測試功能,可以令代碼只運行在網主的瀏覽器,而不影響其他用戶,待測試完成確保沒有問題後,才將所有改動發佈到其他用戶的瀏覽器上,使用傳統的方法難以達成這種效果。
除此之外,Google 代碼管理工具也為網主儲存所有不同版本的改動,萬一新版本運行有錯誤,也可以快速切換為舊版本。
也因為 Google 本身是非常重視各個網頁的載入速度,所有在 Google 代碼管理工具加入的代碼也已經進行了最佳化處理,以確保有大量代碼時也不會影響網頁載入速度。
傳統手動加入 JavaScript 的方式,令一般用戶難以處理,大多數也要找工程師親自加入這些 Tag,也可能需要重新佈署整個網站,這種方法不但費時,也難以在真實環境下測試,當發生錯誤時,更會影響全部的網站用戶。如果你的網站是由其他人或其他公司製作,那更要安裝 Google Tag Manager(GTM),避免每一次也要別人幫你加入代碼。
如何安裝 Google Tag Manager 並整合 Google Analytics?
Google 代碼管理工具主頁︰https://tagmanager.google.com。
1. 到 Google 代碼管理工具主頁
2. 建立 Google 代碼管理工具帳戶
3. 同意條款
4. 將 Google Tag 加到網站上
如果你的網站是 WordPress,可考慮安裝 Google Tag Manager for WordPress 外掛,然後輸入圖中顯示的 GTM-XXXXXXX 即可(不要使用以上圖片的,要使用你自己建立的)。
如果你不懂得加入 Google Tag Manager 到網站上,請找相關人員協助或聯絡我也可以。
5. 新增代碼
6. 代碼設定
7. 選擇 Google Analytics 分析︰Analytics(通用)
8. Google Analytics (分析)設定
加入這個變數的目的是在以後需要為 Google Analytics 加入不同的事件時,不用每次都輸入相同的追蹤編號。
9. 加入 Google Analytics 追蹤編號
請回到 Google Analytics 上的帳戶資源上找出追蹤編號,請參考以下圖片︰
10. 完成 Google Analytics (分析)設定
11. 加入觸發條件
12. 選擇 All Pages
13. 完成加入觸發條件
14. 輸入 Tag 的名稱及儲存
15. 完成加入 Tag 的程序
16. 提交 Google Tag Manager 的變更
17. 輸入版本名稱、版本說明及發佈
這樣就完成了整合程序了,現在可以回到 Google Analytics 上看看有沒有正常收集數據,如果你是正在使用 Chrome 瀏覽器,可考慮安裝 Tag Assistant 來查看 Google Tag Manager 有沒有在網站上正常運作。
使用其他瀏覽器也可以考慮使用 GA Checker 的免費網上服務來測試 Google Tag Manager 和 Google Analytics 有沒有在網頁上正常運作。
Google 代碼管理工具的架構
以上已經示範了如何建立 Google Tag Manager 的容器,並整合 Google Analytics,不過有很多設定仍然很陌生,對嗎?
Google Tag Manager 有以下這些組件︰
- Account(帳戶)
- Container(容器)
- Tag(代碼)
- Trigger(觸發條件)
- Variable(變數)
- Data Layer(資料層)
以下是 Google 代碼管理工具的架構樣子︰
Account(帳戶)
Account(帳戶)的作用是用作管理 Container(容器),擁有者可以建立多個帳戶,例如帳戶名稱是 dvmsp.com,然後帳戶底下有 www.dvmsp.com、app.dvmap.com、blog.dvmsp.com 等等的容器,以一般公司只擁有一個網站,只需要一個帳戶即可。
Container(容器)
Container(容器)用作管理 Tag(代碼)、Trigger(觸發條件)、Variable(變數),一般來說,一個容器對應一個網域,例如︰www.dvmsp.com,也只有建立了容器,才可以安裝 GTM 到網站上,另外,每建立一個容器,GTM 會自動產生一個獨一無二的容器 ID,緊記在安裝 GTM 時,確保這個 ID 是正確無誤地對應容器。
Tag(代碼)
上面也說過 Tag(代碼)的意思指 JavaScript 代碼,用於執行某些目的,例如︰收集數據、傳送數據到第三方行銷工具、在網站上顯示可操作元件等等,而代碼是不會自動執行的,我們需要在 GTM 上設定 Trigger(觸發條件)令 GTM 知道應該何時少執行這些代碼,所以 Tag(代碼)至少會對應一個 Trigger(觸發條件)。
Trigger(觸發條件)
Trigger(觸發條件)的作用是告訴 GTM,在那一種事件下執行代碼,例如預設的 Page View 是讓 GTM 知道每次載入網頁時也需要執行代碼,除了 Page View 也有點擊(Click)的觸發條件,只要用戶點擊了某些按時或連結時,GTM 即會執行相對應的代碼。
而觸發條件底可則可以使用 Variable(變數)、運算式(Operator)或值(Value)來設定觸發條件,例如︰當網址(變數)包含 (Operator)thank-you.html(Value)時,執行 Tag(代碼)。
Variable(變數)
Variable(變數)是方便使用者重用的一個工具,就好像以上的 Google Analytics 變數,儲存了 Google Analytics 的追蹤編號,在建立更多 Tag(代碼)也是與這個追蹤編號相關時,便可以重用這些設定,只需設定一次即可。
除此之外,用戶也可以自訂 Variable(變數),利用自行插入的程式碼,通過 Data Layer(資料層)來傳遞資料給 GTM,用作觸發事件,從而執行 GTM 上的 Tag(代碼)。
Data Layer(資料層)
Data Layer(資料層)是 GTM 用作儲存現在的網頁用戶資料的地方,除了儲存資料外,也可用作觸發事件,例如將現在的用戶 ID 加到資料層,然後設定觸發條件為當資料層有用戶 ID時,即向 Google Analytics 傳送用戶的 ID 作記錄。資料層適合較進階的使用者使用。
結語
安裝 Google Tag Manager 一點也不困難,不過對於新手來說,最困難的部份應該是要理解 GTM 的概念,另外,手動安裝 GTM 到 HTML 頁面上也很容易出錯,如有任何問題,歡迎隨時聯絡我。
相關文章︰