【2021 年版】新手都能看懂的GTM 教學！輕鬆解鎖FB 像素

Google 代碼管理工具（GTM） 是一套代碼管理系統，提供行銷人員不用 ... 我們先看看要怎麼設定好GTM 的帳號以及如何連接到你的SHOPLINE 品牌官網： ... Skiptocontent 新手都能看懂的GTM教學！輕鬆解鎖Facebook像素、GA等追蹤碼如何埋入網站 SHOPLINE2021-01-08T18:55:21+08:002017年05月24日|Categories:網路行銷,行銷工具|Tags:數位行銷,電商經營| 2021年1月08日更新 8,159 在消費者行為破碎化的時代，「追蹤數據」是每個品牌在經營電商的必修課，而SHOPLINE也有支援多元的行銷追蹤碼嵌入，只需要將追蹤碼貼在後台相對應的欄位，便能輕鬆完成嵌入，對於品牌經營的數據收集及後續行銷規劃來說是非常重要的。

然而當越來越多追蹤碼需要加進品牌官網時，可能會造成管理者的混亂，甚至連埋入的追蹤碼有沒有成效也不清楚，而對於此情況，究竟該怎麼做呢？就讓GoogleTagManager（以下簡稱GTM）來幫你！ 對於經驗老道的店家來說，數據分析已是駕輕就熟，但伴隨著行銷管道多元化及成熟化，也會陸陸續續碰到以下問題： 埋設過多追蹤碼，卻不知道哪些管道有實質幫助。

忘記每個追蹤碼的來源及用途。

常使用第三方行銷網站所裝的追蹤碼，但卻沒有統一的後台可以檢視。

綜合這些問題，GTM這項工具彷彿是數據分析者的救世主，讓你可以一次掌管所有的追蹤碼，並能夠即時的增減及修改、檢視成效，不需要繁複的步驟及強大的程式背景也能輕鬆操作。

文章目錄GTM是什麼？GTM可以協助你做什麼？GTM該如何建立及安裝？安裝好後，GTM該如何使用呢？如何利用GTM安裝自訂的程式代碼？（如第三方工具程式碼）總結 GTM是什麼？ Google代碼管理工具（GTM）是一套代碼管理系統，提供行銷人員不用更改網站的程式碼，便能透過GTM整合各種追蹤碼以及第三方應用工具嵌入到你的網站中，在同一個平台上做檢視。

GTM可以協助你做什麼？ 對於各位賣家來說，GTM究竟能協助你做到什麼事情？以下編輯整理四點電商網站常會用到GTM的時刻：1.利用小工具在網站上加入客服外掛。

2.利用外掛工具(例如：SUMO)收集客人的電子郵件。

3.利用安裝外掛工具來提供商店優惠訊息的跳出視窗。

4.利用外掛工具(例如：Zotabox)將商店優惠訊息置頂/置底。

圖一、如網站的跑馬燈工具，就可用GTM來埋設第三方工具程式碼 GTM該如何建立及安裝？ 想要在網路商店安裝客服外掛或者是彈跳視窗嗎？我們先看看要怎麼設定好GTM的帳號以及如何連接到你的SHOPLINE品牌官網： 步驟一、建立GTM帳號 首先請先到Google代碼管理工具的頁面建立帳號，並點選「建立帳戶」。

圖二、新增帳戶並為帳戶設定名稱 圖三、設定容器名稱，目標廣告平台選擇「網路」 圖四、取得安裝GTM的工具編號，圖中紅框內代碼 步驟二、在SHOPLINE商店後台設定 回到SHOPLINE商店後台，點選「網店行銷及追蹤」→接著選「追蹤設定」。

圖五、點選要加入顧客活動追蹤中的「Google代碼管理工具」選項 圖六、依序填入「追蹤工具」、「追蹤事件」及「Google代碼管理工具編號」 注意！此時的「Google代碼管理工具編號」欄位，請填入上方圖四紅框中的代碼（每組代碼皆不同，切勿複製圖中示意的代碼，請使用你專屬的代碼），填入後就大功告成了！（看更多SHOPLINE追蹤設定請看FAQ) 繼續閱讀文章 安裝好後，GTM該如何使用呢？ 完成安裝設定後，真正的挑戰才正要開始，究竟該怎麼充分利用GTM呢？ 圖七、GTM後台管理介面示意圖 GTM的「管理」介面看起來和GoogleAnalytics（GA的管理介面十分相似，只是名稱有些不同。

GTM裡面的「容器」，和GA的「資源」一樣，就是一個網站的意思。

至於其他後台相關的名詞解釋，就由編輯在此娓娓道來： 1.代碼 GTM中的「代碼」，其實就是我們使用的「程式碼」。

你可以在一個「容器」中安裝多個代碼，直接透過GTM增減、變更、管理。

2.觸發條件 由於每個代碼（程式碼）的使用情況不同，你可以透過「觸發條件」設定程式碼在哪些事件發生時才執行。

事件類型包含網頁瀏覽、點擊、提交表單…等，也可以使用網址或變數等條件來設定自訂事件。

3.變數 GTM提供許多內建變數，觸發條件在執行時會比較變數中的值與定義觸發條件時所指定的值，再由系統判斷為true或false。

另外，更進階的用戶也可以自訂變數。

想要瞭解更多請看：GoogleTagManager說明–代碼、觸發條件、變數和資料層 《品牌網店設計電子書》 網頁設計及瀏覽體驗對一個電商網站來說，是決定品牌第一印象的關鍵，下載此電子書讓你一個下午就能做出好看的網站！ 免費下載 如何利用GTM安裝自訂的程式代碼？（如第三方工具程式碼） 關於如何使用GTM安裝自訂程式碼，編輯以電商網站常用的GoogleAds轉換碼及Facebook像素如何埋入商店為例吧！ 在加入代碼前，你必須先瞭解代碼如何運作，需要使用到哪些觸發條件。

因此你必須先新增觸發條件。

一、新增觸發條件 在「觸發條件」點選「新增」後，你可以看到以下多種事件類型可以選擇： 圖八、新增觸發條件 以「在SHOPLINE網店完成結帳」為例，請選擇「自訂事件」為事件類型。

舉例來說，如果你的網店完成結帳後的頁面網址為「xxx.com/confirm」，請依照下圖設定「觸發條件」。

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

此外另一個電商常見的事件就是「造訪結帳頁」，同樣依照下列設定方式： 圖十、設定造訪結帳頁面的觸發條件 同理，如果你的網店結帳頁面網址為「xxx.com/checkout」，則就能依樣畫葫蘆填入。

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

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

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

圖十一、在「代碼」點選新增後，會看到GTM支援的眾多產品 如果沒有你想要使用的代碼的話也沒關係（有時候第三方工具不見得會出現在選項中），你可以選擇「自訂HTML代碼」。

圖十二、選擇「自訂HTML代碼」來新增你想要的代碼 此部分需要有HTML代碼的設定，請你依照你使用的工具或服務所提供的程式碼輸入即可（坊間多數第三方工具都有提供），若是缺少此部分，可能需要請熟悉HTML的人員協助完成完代碼設定。

再加入代碼後，緊接著選擇驅動代碼的「觸發條件」。

圖十三、選擇驅動該代碼的「觸發條件」 設定好後便可儲存，這樣就完成新增GTM代碼的設定了！是不是輕鬆又簡單呢？ 總結 總之，在Data-driven的時代中，數據將是影響品牌經營的一大因素，品牌行銷人員必須掌握各種數據的追蹤才能因應行銷趨勢的物換星移。

看完這篇文章後相信之後你就可以隨時使用GTM來修改及新增代碼，而且不需要碰觸到網站的原始碼。

無論是對於不熟悉編程的店家，或是自己架設網站的開發者，都是相當方便的功能。

SHOPLINE除了提供簡單上手的管理介面，也希望能提供店家自由發揮的彈性空間，將自己的網店打造得盡善盡美。

同時也開放支援GTM及其他代碼的增加設定，讓品牌店家能在行銷或技術上更進一步，打造屬於自己的品牌電商王國。

編修作者 SunnyKaoSHOPLINE廣告文案師 我是Sunny，擔任SHOPLINE行銷團隊的文案編輯，一畢業就隨著趨勢走，就這樣一頭栽進數位行銷產業。

嗜旅遊、文字以及一切新鮮的人事物，期許可以透過SHOPLINE讓更多店家站上電商舞台。

你覺得文章有幫助到你嗎？歡迎給我們評論唷！5/5.共有3可以留下你的評論讓我們知道 延伸閱讀 關於FB廣告可能讓你很意外的Points：助你突破規劃廣告預算盲點備戰618購物節！ 該如何與Z世代消費者溝通？品牌店家絕不能忽視的潛力消費族群 【SocialLab專欄】品牌該如何找KOL合作？3種需求情境分析讓你網紅行銷能找到合適的選擇！ SHOPLINESHOPLINE電商教室站長 SHOPLINE 透過創新的服務與國際化的團隊，持續為品牌賣家打造最好的產品，以品牌電商架站平台為核心，提供跨境電商、社群電商、POS系統以及O2O虛實整合等全通路解決方案，是亞洲電商市場的行業領軍者。

追蹤電商教室，趨勢新知報你知 6則留言 Fei 4月27,2017於下午7:31-回復 不好意思，我在看妳這篇的時候，有彈跳出來一個視窗，看似不是搜集email資訊，而是有「了解詳情」的按鈕，請問是如何設定呢 Karl基琛 5月4,2017於上午9:27-回復 您好！謝謝你的提問，那是用一個第三方行銷工具做的，你可以參考一下這篇文章：https://shoplinetwblog.wpengine.com/online-store-boost-return-sales/ Ashley 6月23,2017於下午6:07-回復 不好意思，想請問可以”增加通訊插件”的小工具是哪一個呢? 謝謝! CathyXiong 7月3,2017於下午3:40-回復 嗨～Ashley, 可以到SHOPLINE的後台或官網詢問我們的線上顧問唷！謝謝你 自學GTM的小白 6月11,2021於下午10:07-回復 妳好🙋‍♂️想請教一下，要埋入GTM所給的程式碼到網站，埋的網站是不是一定要屬於自己的？還是隨便一個網址下的內容，都可以埋入？因為為自己按照GTM所給的指示，在和埋入後，該設定的也好了，但在提交後點preview，一直連結失敗（我是用googletagassistant)，謝謝回覆～ KevinWu 6月15,2021於上午9:53-回復 您好，感謝您的回覆，由於埋設程式碼到網站之中，是需要該網站的相關權限，所以基本上網站應是屬於您的，在自己的網站中根據GTM中提供的程式碼，將其複製並貼在指示的位置置入，再提交後便會完成了，感謝您 留言取消回覆Comment 儲存您的名字、Email和網站，在下次留言時則無需再輸入。

Δ 　 　 1 IG限動必讀全攻略！5招教你玩出品牌創意新商機 IG經營,Instagram,專題-IG經營,社群行銷 　215月,2018 2 直播平台哪個最夯？6大直播平台評比，帶你解析直播紅什麼！ 專題-直播,數位行銷,直播相關,行銷策略 　275月,2020 3 店名應該怎麼取？5大重點為品牌找到最合適的名稱 品牌建立,品牌經營,專題-開店思維學,電商經營 　255月,2016 4 什麼是POS系統？功能優點、如何挑選一次看懂！ 品牌經營,專題-實體門市,門市經營 　278月,2019 5 《簡單JANDAN》堅持天然、真實、透明3大原則打造植萃保養品，強化顧客互動與體驗搶佔品牌心佔率 成功案例,美妝保養 　66月,2022 　　　　3C休閒EDM行銷FacebookFacebook廣告案例FB廣告前置作業FB經營GA教學GoogleGoogle廣告前置作業Google廣告案例Google趨勢IG經營InstagramO2OSEO教學SHOPLINEYouTubeYouTube經營促銷活動內容行銷　 GTM是什麼？GTM可以協助你做什麼？GTM該如何建立及安裝？安裝好後，GTM該如何使用呢？如何利用GTM安裝自訂的程式代碼？（如第三方工具程式碼）總結 Pageloadlink 　本網站採用Cookies工具來改善使用者體驗及確保網站有效運行Cookie設定我瞭解了Manageconsent Close PrivacyOverview Thiswebsiteusescookiestoimproveyourexperiencewhileyounavigatethroughthewebsite.Outofthese,thecookiesthatarecategorizedasnecessaryarestoredonyourbrowserastheyareessentialfortheworkingofbasicfunctionalitiesofthewebsite.Wealsousethird-partycookiesthathelpusanalyzeandunderstandhowyouusethiswebsite.Thesecookieswillbestoredinyourbrowseronlywithyourconsent.Youalsohavetheoptiontoopt-outofthesecookies.Butoptingoutofsomeofthesecookiesmayaffectyourbrowsingexperience. Necessary Necessary AlwaysEnabled Necessarycookiesareabsolutelyessentialforthewebsitetofunctionproperly.Thiscategoryonlyincludescookiesthatensuresbasicfunctionalitiesandsecurityfeaturesofthewebsite.Thesecookiesdonotstoreanypersonalinformation. Non-necessary Non-necessary Anycookiesthatmaynotbeparticularlynecessaryforthewebsitetofunctionandisusedspecificallytocollectuserpersonaldataviaanalytics,ads,otherembeddedcontentsaretermedasnon-necessarycookies.Itismandatorytoprocureuserconsentpriortorunningthesecookiesonyourwebsite. SAVE&ACCEPT 線上講座　｜　免費試用　｜　免費諮詢 GotoTop