前言
如果你想要幫公司的新網站串接Google Analytics來監測消費者在你網站上做了些什麼但又不想麻煩技術人員;又或者你像我一樣自己架了個網站,想透過GA來監測訪客的數據,以找出網站可優化的地方,那今天這篇教學,就是要與你分享該如何透過Google Tag Manager (GTM),簡單、且快速地完成網站與GA的串接,可能需要碰到一點程式碼,但相信我,一點都不困難!
一組Google帳號
首先,你必須註冊一組Google帳號,當你有了這組帳號之後,才能夠使用GA與GTM的功能,快去註冊吧!
建立GTM帳戶並埋放GTM追蹤碼
進入GTM的頁面後,就順著步驟來建立GTM帳戶,建立完成後,系統會跳出兩串程式碼(如下圖),接著,這時候我們需要複製下面的程式碼,埋放在網站前端的header與body標籤內。
既然這篇教大家是教怎麼快速串接,那程式碼怎麼背後怎麼運作我就不多做解釋了,你可以把「埋放GTM程式碼到網站」這件事情,視為「你同意把網站的數據傳送給GTM」。
我們該把這兩段程式碼放在哪呢?
- 如果使用Shopify電商平台,我們必須將程式碼分別埋放在theme.liquid的head與body標籤內:網路商店 ➭ 佈景主題 ➭ 編輯程式碼 ➭ theme.liquid
- 如果使用Wordpress,則必須將程式碼放在header.php的head與body標籤內:Wordpress後台 ➭ 外觀 ➭ 佈景主題編輯器 ➭ header.php
GTM串接GA
埋放好程式碼之後,也代表我們同意把網站數據傳至GTM,接著我們只需要設定好GTM與GA的串接,就能夠順利把網站數據傳送至GA。
步驟:GTM首頁 ➭ 代碼 ➭ 新增,並按照下圖設定好代碼設定與觸發條件。
*注意:Google Analytics (分析) 設定的值,必須是你所要傳入GA資源的追蹤ID。
如何驗證是否串接成功?
最後,我們該如何驗證串接是否成功呢?
我們可以先至Chrome應用程式商店安裝Tag Assistant Legacy。
打開Chrome擴充功能的Google Tag Assistant,在Results of Tag Analysis確認是否有列出GA與GTM的Tag,接著確認GA與GTM兩組追蹤代碼(下圖綠線)是否與系統所提供的代碼相同,如果一致,就代表你串接成功了!