許多網店店主對 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 日免費試用。
Hi, how about Facebook pixel, can i also manage it via GMT account?
Thank you. GOD bless you.
rodney
Hello Rodney! Thank you for supporting SHOPLINE! Yes you can manage Facebook Pixel through Google Tag Manager, please refer to the following link for detailed instructions:
https://www.facebook.com/business/help/1021909254506499
Thank you again!