許多網店店主對 Google Analytics 或 Google Ads 等平台可能相對熟悉,但 Google Tag Manager (簡稱 GTM)同樣是一個不可忽視的重要工具。SHOPLINE 電商教室 將介紹這個免費且非常實用的代碼管理工具,並手把手教你如何設置和使用 GTM,讓不懂編程的新手也能輕鬆上手管理各類行銷工具!
Google Tag Manager (GTM) 是什麼?
Google Tag Manager 中文是 Google 代碼管理工具。GTM 是一套免費的代碼管理系統,讓行銷人員可以在不用更改網站的程式碼的情況下,透過 GTM 整合各種追蹤碼以及第三方應用工具嵌入到網站中,並在同一個平台上作檢視。
Google Tag Manager 的重要性
數據追蹤和分析是經營網店的核心技能,因為數據可以幫助你客觀評估網店的表現,並制定最佳的行銷策略。SHOPLINE 支援多種行銷追蹤碼,只需將追蹤編號輸入到後台,即可輕鬆植入追蹤碼,而 Google Tag Manager 是實現這一功能的重要工具。
Google Tag Manager (GTM) 與 Google Analytics (GA) 有什麼分別?
GTM 並不是用於分析數據的工具,而是用於儲存和管理各種追蹤代碼的平台。它能協助你將 Google Analytics、Google Ads、Facebook Pixel 等代碼輕鬆嵌入網站,並可自訂代碼以獲取更多個性化的數據。簡單來說,GTM 是連接網站與各類行銷工具的橋樑,三者之間相輔相成,而非彼此排斥或依賴。
GTM 的主要用途
1. 網站事件追蹤
GTM 雖然不是分析工具,但它可以大幅簡化 Google Analytics 代碼的植入,幫助你獲得更多元化的數據,例如頁面滾動深度、按鈕點擊、影片播放等,這些數據可以更全面地反映訪客的行為,從而優化你的行銷決策。
2. 透過 Google Tag Manager 連接外掛程式
許多店主會使用外掛程式來增強網站功能,GTM 可以在不更改網站代碼的情況下,輕鬆串接這些程式。例如,通過 GTM,你可以連接 Sumo、Zotabox 等工具,為網站增加收集郵件表格、彈出優惠視窗等功能,這有助於提高用戶參與度並收集潛在客戶資料。
3. 提升網站速度
網站速度是影響 SEO 表現的重要因素之一。由於 GTM 的代碼是異步加載,並且集中管理所有追蹤碼,你可以隨時暫停不常用的代碼,減少對網站加載速度的影響,從而提升整體的用戶體驗和 SEO 排名。
4. 代碼功能測試
GTM 提供預覽和偵錯功能,確保所有代碼能正常運作。你還可以將預覽視窗分享給團隊成員,一起檢查代碼設置,從而降低錯誤風險,提高代碼實施的成功率。
Google Tag Manager 五個重點元素
- 容器 (Container):容器是用於存放追蹤代碼的地方,你可以將所有的追蹤代碼集中在一個容器中進行管理,從而簡化網站的代碼結構。
- 代碼 (Tag):代碼是各類追蹤程式碼的總稱,這些代碼可以通過 GTM 安裝、修改和管理,例如 Google Analytics 代碼、Facebook Pixel 等。
- 觸發條件 (Trigger):觸發條件決定了代碼在何時執行。你可以根據訪客的行為(如點擊按鈕、提交表單)來設定觸發條件,精確控制代碼的執行時機,從而獲取更加精細的數據。
- 變數 (Variables):變數存儲不同條件或數據,幫助觸發條件更加靈活地設置。變數包括內建變數(如網頁路徑)和自訂變數,便於根據需求定制數據收集方式。
- 資料層 (Data Layer):資料層用於傳遞所有與 GTM 相關的數據,例如訪客行為、訂單信息等,有助於觸發特定事件並傳遞正確的行銷數據。
了解更多:Google Tag Manager說明 – 代碼、觸發條件、變數和資料層
如何設置 Google Tag Manager 並連接到 SHOPLINE
先看看怎樣建立 GTM 帳號以及怎樣連接到你的 SHOPLINE 網店:
步驟一
建立 GTM 帳號:訪問 Google Tag Manager 頁面並使用 Google 帳號登錄,然後選擇「建立帳戶」。
步驟二
輸入網店名稱:根據提示輸入你的網店名稱,確保與你現有的品牌保持一致性。
步驟三
設置容器:輸入容器名稱並完成設定,容器相當於你的代碼倉庫。
步驟四
同意條款:同意 Google 的服務條款。
步驟五
複製 GTM 編號:在 SHOPLINE 已經安裝代碼的情況下,點擊右上角的「X」,然後在「工作區」中複製「GTM-XXXXX」的編號。
然後到「工作區」畫面,將「GTM-XXXXX」的編號複製下來。
步驟六
添加至 SHOPLINE 後台:返回 SHOPLINE 後台管理頁面,在「追蹤設定」中添加 Google Tag Manager,並將編號粘貼到相應的輸入框中。
步驟七
把複製的 ID 貼在以下的輸入欄裡。
大功告成!你已經有 GTM 的帳號而且已經成功連接到你的 SHOPLINE 網店了!
利用 GTM 安裝自訂程式碼
在添加代碼前,請確認代碼的用途和觸發條件。例如,如果你要追蹤結帳行為,應確保觸發條件設為結帳完成的頁面,而不是一般的網頁瀏覽。
新增觸發條件
選擇「觸發條件」後,可以根據需求設定各類事件。例如,設置「在 SHOPLINE 網店完成結帳」的觸發條件時,選擇「自訂事件」,然後設定 URL 包含「/confirm」即可。
以「在 SHOPLINE 網店完成結帳」為例,請選擇「自訂事件」為事件類型。舉例來說,如果你的網店完成結帳後的頁面網址為「xxx.com/confirm 」,請依照下圖設定「觸發條件」。
於「事件發生且這些條件全都符合時,啟用這個觸發條件」的地方,選擇 「Page URL」「包含」「/confirm」 ,即可完成結帳頁的觸發條件設定。
此外另一個電商常見的事件就是「造訪結帳頁」,同樣依照下列設定方式:
當你的「觸發條件」都設定好後,下一步就是「新增代碼」了。
新增 Google Tag Manager 支援代碼
在 GTM 的「代碼」部分選擇「新增」,根據需求選擇適合的工具。如果工具不在選項內,也可以選擇「自訂 HTML 代碼」,按照工具提供的指示進行設置。這樣你可以根據不同的行銷需求靈活添加功能。
儲存以上設定後,你就可以隨時修改和新增代碼,而不需要觸碰網站的原始碼。這對於不熟悉編程的用戶或開發者來說都是非常方便的功能。
如果沒有的話也沒關係,選擇「自訂HTML代碼」繼續:
此部分需要有 HTML 代碼的設定,請你依照你使用的工具或服務所提供的程式碼輸入即可(坊間多數第三方工具都有提供),若是缺少此部分,可能需要請熟悉 HTML 的人員協助完成完代碼設定。再加入代碼後,緊接著選擇驅動代碼的「觸發條件」。
儲存以上設定後,加入代碼的任務就大功告成了!
之後,你就可以隨時修改及新增代碼,而不需要碰觸到網站的原始碼。無論是對於不熟悉編程的用戶,或是自己架設網站的開發者,都是相當方便的功能。
總結
相比自行更改網站代碼,使用 Google Tag Manager 更加簡單且高效,對於不具技術背景的店主來說,雖然初期學習可能稍有挑戰,但其帶來的靈活性和優勢是無可比擬的。掌握 GTM 能幫助你更好地整合第三方行銷工具,並深入了解網站運營情況。如果看完文章後仍有疑惑,建議先嘗試建立帳戶並設置一些基本代碼,逐步增加信心後再挑戰進階功能!
歡迎預約 SHOPLINE 開店顧問免費諮詢!同時你亦可親自試用 SHOPLINE 各大功能,按此體驗 14 日免費試用。