【GTM新手圖解】追蹤網頁button click教學實戰

第三章：瀏覽並找到要追蹤的Button. 快速步驟一覽：新增觸發條件（部分點擊）>設定包含「立即體驗」文字>新增代碼（GA通用分析 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite【GTM新手圖解】追蹤網頁buttonclick教學實戰本篇將介紹如何透過GTM在網頁上設定Buttonclicktracking，有助於網站PM/Marketer管理追蹤成效PhotobyrawpixelonUnsplash若還沒有GTM設定的朋友可先看上一篇入門版，再進行本篇教學：【GTM新手圖解】從申請GTM代碼，到追蹤PageView入門實戰GTM(GoogleTagManager)是Google的代碼管理工具，而不是一個新的追蹤代碼，近期不少同事開始嘗試用GTM來埋設追蹤代碼，寫這篇當作入門整理。

medium.com點這裡開始吧！GTM中文網址：https://tagmanager.google.com/?hl=zh-tw第一章：新增ButtonClick觸發條件＆變數快速步驟一覽：左方工作區>新增觸發條件>選擇「點擊連結」>選擇所有連結>新增各Click點擊變數目的說明：在追蹤之前，GTM需要先做「識別網頁上各Button」的工作，藉由設定觸發條件跟開啟變數，就可在網頁上找出要追蹤的項目Step1.新增觸發條件Step2.觸發條件選擇連結點擊Step3.觸發條件的啟動時機，選擇所有連結點擊Step4.設定變數>新增設定>勾選Click類別的各項目第二章：瀏覽並找到要追蹤的Button快速步驟一覽：在工作區按下預覽>原視窗輸入要追蹤的網頁網址>出現Listener介面>點選想要追蹤的Button>在變數欄中觀看Button的值目的說明：找出要追蹤的buttonStep1.於工作區按下預覽，進入預覽模式Step2.在預覽模式下進入有埋此GTM的網頁，下方出現listener介面（網頁已隱碼XD）Step3.點擊Button後，在Summary與變數欄中觀看要追蹤Button的「值」這邊能分辨追蹤的項目很多，包含了Classed/Element/ID/Target/Text/URL，依據不同網頁狀況做選擇，上圖範例是以Text「立即體驗」作為辨別的值。

第三章：瀏覽並找到要追蹤的Button快速步驟一覽：新增觸發條件（部分點擊）>設定包含「立即體驗」文字>新增代碼（GA通用分析）>設定事件追蹤與對應觸發條件目的說明：設定GTM&GA之間的串聯，讓Buttonclick的數據能順利被記錄Step1.回GTM新增點擊觸發條件，這次選擇「部分點擊」，並包含Clicktext的文字Step2.左方工作列選擇代碼，並新增一個代碼作為GAButtonClick追蹤的對應Step3.代碼類型為GA通用分析，並設定追蹤類型為事件，且定義為clickStep4.帶入先前的GA設定（參照上一篇文章），並新增觸發條件為剛設定的「立即體驗」Step5.設定完後長這樣，這邊填的「類別」跟「動作」會在GA事件維度中出現，若有不同Button可再設定不同名稱避免混淆第四章：驗證測試快速步驟一覽：預覽模式回網頁試點>回GA觀看即時數據>完成！目的說明：確認Buttonclick追蹤數據生效Step1.預覽模式下回網頁點擊button，下方Tags會出現剛設定好的追蹤代碼Step2.回到GA看即時數據就進來了！若是觸發條件沒有生效，在listener中也可以看到為何沒有生效，圖為點擊到另一個button下的狀況下篇再分享如何透過GTM追蹤網頁滾動(Scroll)，感謝大家！Measureschool教學參考：https://www.youtube.com/watch?v=r87A-Ql2czg同場加映，行銷經驗分享：【GTM新手圖解】從申請GTM代碼，到追蹤PageView入門實戰GTM(GoogleTagManager)是Google的代碼管理工具，而不是一個新的追蹤代碼，近期不少同事開始嘗試用GTM來埋設追蹤代碼，寫這篇當作入門整理。

medium.com給剛入行的行銷人(Marketer)：五樣基礎練習分享我離開數位代理商isobar幾年了，又在企業端行銷相關工作滾過幾圈，以前老闆們用心叮嚀的，觀察同事們的幾項特質，消化吸收後回想起來寫了這篇，獻給剛入行的行銷人，能找到適合自己努力的方向。

medium.com同場加映，工作經驗分享：Marketer轉ProductManager之六要心法跳轉工作環境覺得不適應？本文會分享從行銷人(Marketer)工作轉換為產品經理(ProductManager)的六種工作心態解析與轉換方式，期望協助你更快進入工作狀況，並在職場發揮更佳表現。

medium.com產品經理/設計如何與你的IT大神溝通？想寫這篇的緣由是看過非理工出身的PM/設計，與系統開發後端工程師溝通不良的情形，若在非新創環境底下工作，耗費的溝通成本常高得驚人，有效掌握溝通方式，專案卡關的時間將更少。

medium.com如果你覺得受用，請幫我Clap1-2下覺得心有戚戚焉，請幫我Clap3-5下希望鼓勵繼續寫，我很感謝你！請幫我Clap5-10下或更多感謝閱讀到最後的你！若有沒寫到的細節或建議，歡迎透過底下留言/FB/gmail聯繫我MorefromMuChen(Erhau)Follow數位金融混血兒，藉由產品成長茁壯｜現為LINE產品規劃經理｜[email protected]?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedMuChen(Erhau)829Followers數位金融混血兒，藉由產品成長茁壯｜現為LINE產品規劃經理｜musword@gmail.comFollowMorefromMediumAzlanIqbalTheCuriousCaseoftheIllegalDoubleCheckWarrenSongIliotibialBandSyndrome(Part1)ChamudiVidanagamaJiraAPIintegrationinBubble.ioLeahChenLetsGitWithItHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable