Google Tag Manager 是甚麼？為甚麼開網店要使用 Google Tag Manager？普遍店家對於 Google Analytics 或 Google Ads 等平台可能較為熟悉，今次 SHOPLINE 電商教室 的「網店說明書」系列，則會介紹另一個免費但相當重要的工具 ——  Google Tag Manager （GTM），並手把手教妳開設帳戶以及設置自訂程式碼，即使不懂 coding 的網店新手也能輕鬆學會管理第三方行銷工具！

數據追蹤和分析是經營網店其中一個必學技能，因為數據能讓你客觀地掌握網店表現並找出正確行銷方向。 SHOPLINE 系統支援各大網絡行銷追蹤碼，只要將追蹤編號輸入後台，就能簡單植入追蹤碼，而 Google Tag Manager 是其中一種支援平台。

Google Tag Manager (GTM) 是什麼？

Google Tag Manager  中文是 Google 代碼管理工具。GTM 是一套免費的代碼管理系統，讓行銷人員可以在不用更改網站的程式碼的情況下，透過 GTM 整合各種追蹤碼以及第三方應用工具嵌入到網站中，並在同一個平台上作檢視。

Google Tag Manager (GTM) 與 Google Analytics (GA) 有什麼分別？

有別於 GA，GTM 並不是一個用作分析數據的工具，反而是儲存和集中管理不同代碼的平台。不過，GTM 的確可以協助你將 GA 、Google Ads、Facebook Pixel 或者其他平台的程式碼簡單嵌入網站，甚至可以自訂代碼以獲取客製化數據。 換句話說， GTM 就像一個中間人，統一連接網站數據以及各個第三方行銷工具，三者之間是互相兼容而非互相排斥或依賴的關係。

GTM 的主要用途

1. 網站事件追蹤

Google Tag Manager 雖然不是一個分析平台，但卻可以簡化 Google Analytics 代碼植入並讓你能輕易獲得更多元和真實的數字。平日我們在 GA 最常接觸的數據，例如平均網頁停留時間（Average Time On Page）、跳出率（Bounce Rate）、以及離站率（Exit Rate）等，可以呈現網站現況卻未必能準確反映訪客行蹤和行動原因。其實 GA 還能讓你獲得頁面滾動深度（Page Scrol Depth）、按鈕點擊、影片追蹤等數據，而這些事件追蹤代碼能夠透過 GTM 進行設置。

2. 透過 Google Tag Manager 連接外掛程式

不少店家都會使用外掛程式來增加網站功能，GTM 同樣可以讓你在不用接觸網站程式碼的情況下輕鬆串接其他程式。例如你可以透過 GTM 連接 Sumo、Zotabox 等程式來在網站上增添收集電郵表格、優惠彈出視窗、優惠訊息置頂/置底、或客服外掛等功能。

3. 提升網站速度

網站使用體驗和連載速度都是會影響 SEO （Search Engine Optimisation）成效的重要因素，而因為 GTM 的代碼是異步使用，加上集中管理眾多追蹤碼，所以你可以隨時暫停較少用的代碼，這意味著個別代碼加載緩慢也不會拖慢其他代碼的進度甚至影響網站連載。

4. 代碼功能測試

GTM 提供預覽和偵錯功能以確保網站和代碼能夠正常運作，包括哪些代碼已經觸法以及其出發順序等，你更可以將預覽視窗分享給其他人，一起檢查代碼設置，減低出錯之餘同樣可以提升網站速度！

還是覺得有點複雜嗎？歡迎預約免費開店諮詢了解更多，或立即開通 14 天試用，體驗 SHOPLINE 一站式無痛網站管理！

Google Tag Manager 五個重點元素

容器 （ Container ）

「容器」就好比 GA 的「資源」，就是要一個網站的意思。

代碼 （Tag） 

「代碼」就是我們使用的「程式碼」。你可以在一個「容器」中安裝多個代碼，直接透過 GTM 增減、變更、管理。

觸發條件 （Trigger）

由於每個代碼（程式碼）的使用情況不同，你可以透過「觸發條件」設定在程式碼在哪些事件發生時才執行。事件類型包含網頁瀏覽、點擊、提交表單等等，也可以使用網址或變數等條件來設定自訂事件。

變數 （Variables）

變數分為內建變數（Built-in Variables）和使用者自訂變數（User-defines Variables）。內建變數有多種常用的觸發方式，例如網頁路徑或點擊等；使用者自訂變數則會根據特定需求而定義變數，相對會較為複雜。

資料層 （Data Layer）

資料層級也是一種程式碼，可以用作傳遞 GTM 的所有信息，例如變數資料訊息等可以透過資料層傳達到 GTM，更可根據變數觸發事件。

了解更多：Google Tag Manager說明 – 代碼、觸發條件、變數和資料層

Google Tag Manager 建立和安裝

先看看怎樣建立 GTM 帳號以及怎樣連接到你的 SHOPLINE 網店：

步驟一

瀏覽 Google 代碼管理工具頁面並且登入你的 Google 帳號，然後選擇「建立帳戶」。

步驟二

輸入網店名稱

步驟三

輸入容器名稱來設定容器

步驟四

同意 Google 服務條款

步驟五

由於 SHOPLINE 已經將程式碼安裝在商店中，所以可以點選右上角的「X」。

然後到「工作區」畫面，將「GTM-XXXXX」的編號複製下來。

步驟六

返回你的SHOPLINE後台管理頁面，然後在「追蹤設定」裡增加「Google 代碼管理工具」。

步驟七

把複製的 ID 貼在以下的輸入欄裡。

大功告成！你已經有 GTM 的帳號而且已經成功連接到你的 SHOPLINE 網店了！

利用 GTM 安裝自訂程式碼

在加入代碼前，你必先確保自己了解代碼如何運作以及需要使用到哪些觸發條件。如果你的代碼是用於追蹤結帳，卻將觸發事件設定為網頁瀏覽，代碼就無法正常使用了!

新增觸發條件

在「觸發條件」點選「新增」後，你可以看到以下多種事件類型可以選擇：

以「在 SHOPLINE 網店完成結帳」為例，請選擇「自訂事件」為事件類型。舉例來說，如果你的網店完成結帳後的頁面網址為「xxx.com/confirm 」，請依照下圖設定「觸發條件」。

於「事件發生且這些條件全都符合時，啟用這個觸發條件」的地方，選擇 「Page URL」「包含」「/confirm」 ，即可完成結帳頁的觸發條件設定。

此外另一個電商常見的事件就是「造訪結帳頁」，同樣依照下列設定方式：

當你的「觸發條件」都設定好後，下一步就是「新增代碼」了。

新增 Google Tag Manager 支援代碼

同樣在代碼部分選擇「新增」，可以看到以下 GTM 所支援的眾多產品。

如果你要新增的代碼屬於以下產品，太好了！你可以直接選擇，並按照該產品提供的指示進行設定。

如果沒有的話也沒關係，選擇「自訂HTML代碼」繼續：

此部分需要有 HTML 代碼的設定，請你依照你使用的工具或服務所提供的程式碼輸入即可（坊間多數第三方工具都有提供），若是缺少此部分，可能需要請熟悉 HTML 的人員協助完成完代碼設定。再加入代碼後，緊接著選擇驅動代碼的「觸發條件」。

儲存以上設定後，加入代碼的任務就大功告成了！

之後，你就可以隨時修改及新增代碼，而不需要碰觸到網站的原始碼。無論是對於不熟悉編程的用戶，或是自己架設網站的開發者，都是相當方便的功能。

總結

使用 Google Tag Manager 對比起自行更改網站代碼是更簡單，但對於毫無技術背景或興趣的店家來說又算不上易如反掌。事實上，能夠掌握 GTM 的確可以讓你善用更多第三方行銷工具並更全面地了解網站表現，如果看畢文章仍有疑惑，也可以先嘗試設立帳戶並設置一些基本代碼，更有信心後才挑戰進階設定！開網店教學系列會繼續為你帶來更多網店知識，記得密切留意！

「唯有客戶的成功，才是我們的成功。」SHOPLINE 一直秉持這個理念，幫助逾 250,000 個品牌建立網上商店，配合專業行銷團隊協助，開拓網上銷售渠道、發挖新客源！歡迎預約 SHOPLINE 開店顧問免費諮詢！同時你亦可親自試用 SHOPLINE 各大功能，按此體驗 14 日免費試用。

SHOPLINE

SHOPLINE 全球智慧開店平台，為品牌提供一站式網店建立、管理線上與線下商店的智慧開店服務。

自 2013 年創辦以來，全球已經有超過 350,000 個品牌使用 SHOPLINE 的服務成功開店， 透過創新的服務與國際化的團隊，持續為品牌賣家打造最好的產品和服務，以網店平台為核心，提供跨境、O2O 線上線下整合、POS 系統等全方位解決方案，更成為在亞洲市場的行業先驅。