1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. Google TAG Manger (GTM) 自訂 javascript 與 整併GA、FB像素追踨碼

Google TAG Manger (GTM) 自訂 javascript 與 整併GA、FB像素追踨碼

2021/02/23

梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
  大約在二、三年前,梅干曾分享過 Google TAG Manger 自訂 HTML,透過 GTM 動態產生一些網頁資料還蠻方便的,事隔多年後,最近身旁又有朋友問到梅干,能否透過GTM自訂jQuery語法,答案當然是可以的呀!除此之外還可將一些追踨碼,全部整併在一起,除了好管理外,也方便隨時調整與修改,因此還沒使用GTM的朋友,現在也一塊來看看,如何自訂javascript與將多個追蹤碼整併在一起吧!


Google TAG Manger


Step1
在進入GTM的網站後,點「Sign in to Tag Manger」鈕。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step2
進入後,再點右上的「建立」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step3
接著輸入GTM帳戶、容器名稱和使用平台。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step4
接著將下方勾選再按「」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step5
這時再把GTM的追蹤碼,貼到網頁指定的區塊中。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step6
接著將剛剛的GTM碼,放置到</head>前,至於另一段則是當瀏覽器不支援javascript則會讀取那一段,但就目前來說,九成九的瀏覽器都支援,所以那一段可加可不加。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step7
接著回到GTM後,點左邊的「代碼」頁籤後,再點右上的「新增」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step8
進入代碼設定後,再點右上的筆。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step9
接著選取 自訂自訂HTML」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step10
接著要輸入javascript時,需要使用script標籤將它包覆起來,而GTM無需再載入jQuery元件,就可直接使用,但要選取物件時,原來的$要改用jQuery才行喔!而這邊梅干先簡單加入一段javascript,當把HTML加入後,再點下方觸發條件的筆。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step11
由於希望每個載入頁面都執行,因此選擇「All Pages」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step12
都設定好後,再按右上的「儲存」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step13
儲存完畢後,再將它勾選,並按右上的「提交」。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step14
設定好版號與說明後,再按「發布」,這樣才能將GTM的權限變為公開。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step15
當發布完成時,就會看到以下資訊。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step16
這時回到網頁,重整看看,當網頁載入時,就會去讀取GTM中的碼,這時在Console就會出現,剛所設定好的資訊。
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼
Step17
甚至也可將GA或臉書像素的追蹤碼,直接貼到GTM集中管理,簡單又方便喔!
梅問題-Google TAG Manger (GTM)自訂javascript與整併GA、FB追踨碼


延伸文章