top of page

Google Tag Manager 教學


GTM ( Google Tag Manager )是 GA ( Google Analytics ) 及其他程式碼推動執行的輔助工具,可設定多種不同程式碼設定於其中,透過 GTM 標記管理工具,您可以統一用單獨界面來管理、發佈,且有效的管理需要安插在網頁上的各種程式代碼。


本文亮點

  1. 入門介紹

  2. 開始安裝 GTM

  3. 開啓預覽模式,檢查是否安裝成功

  4. GA4 事件代碼設定教學

-

一、入門介紹

GTM 是由帳戶、容器和代碼所組成,一個帳戶可以容納許多容器,每個容器都擁有自己的安裝編號,將容器安裝到網站上後即可將容器內的所有設定及代碼套用至網站上。

※ 切記,每個公司使用一個帳戶,每個網站使用一個容器。

二、開始安裝GTM


1. 建立 / 登入 Google 帳戶

在 GTM 帳戶架構中有提到 GTM 的安裝編號必須從容器當中取得,所以必需先登入 Google 帳戶,接下來才能前往 Google Tag Manager 建立新的 GTM 帳戶與容器並取得容器的安裝編號;GTM 帳戶與容器皆提供完整的使用者權限管理功能,因此在創建 GTM 帳戶和容器後只需將權限開給相關人員即可分享帳戶或容器的內容。


2. 建帳戶與容器

到達 GTM 後可以看到所有擁有權限的 GTM 帳戶 (預設為空白),點擊右上方「建立帳戶」即可創建新的 GTM 帳戶。

創建新帳戶的同時,必須建立一個新的容器 (之後可以單獨建立新的容器在同帳戶底下) 帳戶名稱與容器名稱並不會影響後續使用。


3. 建立 / 登入 Google 帳戶

如果你的GTM官網串接 網站是使用 Showmore 來架設,也可以使用 Showmore網站安裝GTM,下載啟用後只需將容器編號(GTM-xxxxxxx) 填入並儲存即可完成 GTM 的安裝。


4. 開啟預覽模式,檢查是否安裝成功


容器的右上方可以找到「預覽按鈕」

在正常情況下,通常會在代碼發布以前使用預覽功能檢查及測試代碼是否設置正確,使用預覽功能來檢查 GTM 是否成功的安裝在網站上,點擊右上方的預覽,開啟 GTM 預覽功能。

跳出Start Tag Assistant畫面,填入想要測試的網站,再檢查連接的網址是否正確,是否有勾選到 debug signal。


三、開啓預覽模式,檢查是否安裝成功


開啟預覽功能後,即可測試網站是否已經正確安裝 GTM 容器,如果容器可以和網站連結,表示 GTM 容器已成功安裝到網站。

進入預覽模式後,網站右下角顯示GTM已連接訊息。


GTM 預覽模式(debug mode)

  • 透過GTM預覽模式可以檢查tag和trigger是否有正確啓動

  • 正式發佈前可以在GTM預覽模式找到錯誤並修正

  • 有獨立頁面、跳轉頁面後的行為仍會被記錄


四、GA4 事件代碼設定教學


  • 設定點擊事件(Click Event)


Step 1、追蹤網站的所有點擊事件,這裡選擇【所有點擊】


Step 2、在GTM變數中找到【内建變數】,確認内建變數預設的點擊事件項目都有被勾選


Step 3、事件名稱【click buttuon】= 為GTM事件命名,{{ClickElement}} = 為GTM預設變數,代表點擊網站上任何元素

Step 4、這是設定完成的畫面,可以把剛剛設定好的觸發條件「test_click」選擇起來。


  • 追蹤 user 點擊特定按鈕事件

Step 1、設定 Trigger ,這裡選擇【部分點擊】。

接著,設定想要追蹤的特定點擊事件,在這裡以點擊特定文字「商品選單」為點擊事件。

Step 2、設定代碼,可命名為「click-按鈕」

事件名稱【click-menu】= 命名這個事件的名稱,事件參數,參數名稱:商品選單,值:{{ClickText}}

Step 3、到網站上點擊「商品選單」文字


Step 4、在預覽模式檢查 Tag 是否有成功被 Fired,代表著在設定 「click-按鈕」事件有設定成功了!


更詳細設定及安裝代碼管理工具可以參考:Google 代碼管理工具


** 貼心小提醒 **

每次設定新的代碼後,要記得按下右上角的「提交」,代碼才會生效喔!





※ 由於 GTM 代碼管理工具可埋設程式碼,為了資訊安全考量,請勿聽從陌生人指示操作 Google 代碼管理工具,並妥善保管您的帳號。





 

點擊下方【預約諮詢】,將有 Showmore 專人為您服務,協助您立刻開始電商之路!


bottom of page