給工程師的什麼是GTM? - 工作玩樂實驗室

什麼是GTM? 追蹤碼? 使用者行為分析? 電商相關又扯上增強型電子商務(Enhanced-Ecommerce) Google Tag Manager (GTM), Google Analytics (GA), ... HomeGrowth給工程師的什麼是GTM?什麼是GTM?追蹤碼?使用者行為分析?電商相關又扯上增強型電子商務(Enhanced-Ecommerce)🤯GoogleTagManager(GTM),GoogleAnalytics(GA),FacebookPixel/像素(fbq)追蹤碼(trackingcode)一大堆相關服務這些東西和工程師有關嗎?這些東西完全就是行銷的工具，為什麼工程師要處理?應該是前端工程師處理，還是後端工程師處理呢?從工程師角度簡單說明GTM。

安裝與設定的部份可以參考:工程師也會的GoogleTagManager(GTM)追蹤碼設定教學IndexWhy為什麼工程師要暸解GTM/GA?什麼是GTM/GA/Pixel?GoogleTagManager(GTM)trigger,tag,variable關係圖GoogleAnalytics(GA)Enhanced-EcommerceFacebookPixel(像素)結語Ref.參考內容Why為什麼工程師要瞭解GTM/GA?行銷上的使用就不多說，那除了行銷目的之外，為什麼要追蹤使用者行為？對工程師這邊有什麼幫助呢?暸解網站或APP上使用者的使用時間、偏好~記錄新功能、新頁面的使用熱度或是A/BTest的記錄。

(註1)透過自定事件(event)追蹤特定任務;例如:有多少個使用者點擊看更多連結…另外~為什麼這些服務都需要用到javascript(js)置入追蹤碼呢?(這個部份也是讓行銷人員頭痛的地方…)目前用js取得、監聽使用者在瀏覽器上的作行為(點擊按鍵、連結，捲動到指定位置…)是最為快速、有效的!What什麼是GTM/GA/Pixel?先簡單說明GoogleTagManager(GTM),GoogleAnalytics(GA),FacebookPixel(fbq)三者的關係和功能。

(這是較常見的三個服務)首先~GoogleAnalytics(GA)和FacebookPixel是目前最為流行的使用者行為追蹤工具/服務當然~市面上還有更多其它的追蹤服務可用，amplitude.com、mixpanel.com等…本次就不討論~~這些眾多的服務中就會出現相似又相異的需求，每個服務都需要在網站上安插javascript追蹤碼…(googleanalyticstrackingcode)(facebookpixeltrackingcode)這麼一來，每次要追加、修改追蹤碼、追蹤內容都需要找工程師加入這些js程式然後更新網頁、APP好像有點麻煩，行銷人員不能自己處理嗎?🤣為了解決上述的問題GoogleTagManager(GTM)出現了!而GTM帶來的優點有下:託管理所有Google自家與第三方追蹤套件javascsriptlibrary(GTM內建支援的其它第三方服務)開放非工程人員直接設定追蹤任務與事件內容可以隨意插入自定義HTML(在每一頁console顯示colaispig)GTM設定的版本管理改壞、設定失敗?輕鬆回到上一個正常版本(GTM的版本控制)GTM權限管理可以將GTM開放給廣告行銷人員(外包公司)修改、設定，再由擁有者進行核可、發佈動作(Publish、approvals)就上述優點~看起來使用GTM之後就世界和平囉?將追蹤碼安裝交還給行銷人員了(?!)當然沒這麼容易，接著看下去…🤯各個工具各有一片天，有興趣的工程師們再各自深入研究。

這邊簡單說明三個工具各自主要負責的任務和功能~GoogleTagManager(GTM)統合各個工具，觸發與整合追蹤事件簡單來說，使用GTM管理、觸發其它多個第三方套件(GTM可以連當GA,FBPixel,GoogleAds…)GTM也和古早時期GA一樣，需要安插JS程式碼。

一樣的是~安裝方法非常簡單依教學處理即可不同的是~安裝GTM之後，其它GA,FBPixel…等套件就可以透過GTM載入了下面先簡單說明GTM幾個主要功能:GTMVariables/變數設定GA或Pixel追蹤代碼ID在GTM的Variables設定GAtrackingID，功能就像程式裡的const一樣..也可以透過進階的GTM使用方法動態取得畫面上特定數值，如金額或數量等…但是..這樣的方法操作人員必須有一定的程式基礎😭(透過一段程式取得商品金額)Tag/程式/代碼設定需要執行的實際動作例如:傳送購物車結帳事件(金額、數量、商品內容)至FBPixelTriggers/觸發器設定使用者執行何種動作、行為時觸發Tag可以自定各種規則、條件例如:–點擊結帳鈕、連結時觸發上述的Tag內容(e.g.送資料至FBPixel)–僅在A商品，結帳後觸發指定的TagGTM小結GTM看起來很複雜其實拆開來看就容易理解多了~上述的三個功能各司其職以文字說明來看:使用者執行特定動作(點擊購物鈕)->發送追蹤事件內容(訂單編號、金額)至FacebookPixel以GTM設定角度來看:Triggers->Tag+Variables也可以從trigger,tag,variable三者的關系圖暸解整個流程~GoogleAnalytics(GA)因為提到GTM就一定得講一下GAGTM與GA兩者相輔相成~(利用GA查看特定頁面的瀏覽狀態)GA博大精深，這裡只簡單說明其中的增強型電子商務功能Enhanced-Ecommerce/增強型電子商務報表將特定的電商事件(event)整合為下列報表~(註2)當然，也可以傳送自定義的事件，另行觀察、統計一些行為、事件(event)FacebookPixel(fbq)FBPixel是目前台灣較為流行的追蹤、廣告服務主要目標是推銷、行銷，例如當使用者看過、點擊、查詢機票相關內容之後…短時間內你的FB的時間軸(timeline)將會是滿滿的機票、旅行相關內容...pixel的相關事件(event)和GAEnhanced-Ecommerce行為類似但名稱有點不同，大多也是定義查看商品、加入購物車、結帳等事件…(註3)..Conclusion結語就我看來…其實行銷人員要編寫、安裝GTM等服務是有門檻的，無論如何多少還是需要工程師幫忙。

其實前端、後端工程師都能處理這些內容，但因為需要編寫javascript並處理一些瀏覽器非同步問題🤔個人可能偏向讓前端工程師主導GA和Pixel的報表、操作部份我不熟再加上篇幅關係…實在是寫不完😓如果想深入學習GA報表的人，可以到youtube上找到非常多的教學影片喔!!在寫文時上傳的範例圖檔名因為含有ga,analytics,pixel,tracking等字眼會被chrome的擋廣告套件擋掉，還真讓人不方便:/Ref.參考內容chromeextension:page-analytics連結GA資料，在頁面上使用顏色清楚標示出使用者點擊百份比很方便就能看出，頁面上哪些區塊受到使用者歡迎(註1)GTMEnhanced-EcommerceData-Layer:https://developers.google.com/tag-manager/enhanced-ecommerce#data-layer(註2)部份事件將自動被歸類至電子商務報表裡:e.g.productClickaddToCartcheckout...FacebookPixelEvent:https://developers.facebook.com/docs/facebook-pixel/reference(註3)HowtopulldatarelativetotheclickedelementinGoogleTagManager15分鐘教你如何在GTM裡取得頁面上的動態數值分享此文：ClicktoshareonTwitter(Opensinnewwindow)ClicktoshareonFacebook(Opensinnewwindow)RelatedTags:enhanced-ecommerce,fb,fqb,ga,google,gtm,javascirpt,pixel,tag,像素YoumayalsolikeAboutTheAuthor可樂OneCommentPingback:工程師也會的GoogleTagManager(GTM)追蹤碼設定教學-工作玩樂實驗室LeaveaReplyCancelreplyRecentPostsplainPHP搭配Slack進行錯誤追蹤、回報(ErrorTracking、ErrorHandling)DroneCI/CD配合Github使用Rsync進行DeployNginxbrotli設定本機使用Docker容器內PHP(wrapper/exposePHP)為什麼你需要密碼管理工具大家都看了哪些文章？如何在Json中加入註解實例網站解說什麼是LandingPage？簡單使用MysqlPartition優化查詢CategoriesCSSGrowthjavascriptLaravelPHPSEOUncategorized什麼是?工具讀書心得軟體開發RSS-PostsRSS-Comments