Claudia 生活旅遊
  • 首頁
  • 關於我
  • 日本旅遊
    • 關東地區
    • 關西地區
    • 九州地區
    • 沖繩地區
    • 租車資訊
  • 台灣旅遊
  • 飲食記
  • 開箱分享
  • 網站設定
網站設定

初學者必讀!網站設定GTM帳號、連結GA4分析工具

by 網站管理員Claudia 2022-12-17
2022-12-17

網站自架初學者必讀!教你如何設定 GTM 代碼管理工具,好處是方便管理 GTM 追蹤碼!提升網站速度!免費Google工具省荷包!連結最新版GA4分析工具,及wordpress網站該如何設定,讓你輕鬆變達人!

一、網站為何要設定GA、GTM線上工具呢?

GA全名為Google Analytics,是指Google的分析工具,可用於網站、APP程式等,目前最新版本稱為GA4。基本必備的網站分析工具,目前免費且中文版的線上工具,可分析網站的流量來自哪裡?熱門網頁為何?熱門商品為何?用來了解目前網站的營運狀況,進而分析資料讓網站業績更上一步。

GTM全名是Google Tag Manager,是指Google的代碼管理工具,原本是GA4直接安裝在網站/APP上即可,現在透過GTM安插在兩方像是中間商,讓您能方便管理追蹤碼、快速找到代碼並新增修改、亦能加速網站讀取速度。GTM不一定每個網站需要設定,看您本身的需求而定。

二、網站如何設定GTM代碼管理工具

GTM好處多多我相信其它網站蠻多人介紹,對我來說設定GTM可讓網站速度變快、設定代碼後可於GTM先測式很方便,反正我的網站還在初始階段,設定錯誤再重來也沒關係,原本設定好GA4後,又改設定為GTM代碼管理工具。

設定分為兩個重點:

  • 網站中放置GTM程式碼
  • GTM代碼管理工具設定GA4的ID

1) 在GTM代碼管理工具裡,GTM ID、GTM程式碼在哪裡?

註冊並登入GTM系統帳號後,主畫面上方的紅框即會顯示GTM的ID,請點擊

註:GTM官網【請點我連至官網】

GTM 代碼管理工具,登入帳號後,主畫面上方即顯示GTM的ID

即出現GTM的程式碼,皆有詳細註明每段程式碼該貼哪邊,第一段是貼在<head>中、第二段是貼在<body>開頭後,善用右上方的複製選項,可把程式碼完整複製起來。

GTM 代碼管理工具的GTM的程式碼

2) 如何在wordpres網站中放置GTM程式碼

以wordpress製作的網頁為例,可下載免費外掛「Head, Footer and Post Injections」來安裝程式碼,我覺得這個外掛蠻多位置可選擇,讓網頁製作更靈活。

插入網頁位置選擇:

  • 頁首及頁尾:插入<head>及</head>標籤之間、在<body>標籤後方、在</body>標籤前方
  • 文章:文章內容之前、文章內容之後
  • 其它:每頁都需要、還是僅在首頁出現

安裝外掛後,可在「wordpress後台」的「設定」之下的「Header and Footer」找到外掛,把GTM的程式碼第一段是貼在<head>中、第二段是貼在<body>開頭後即完成。

wordpress後台,貼上 GTM 的程式碼

3) 在GA4分析工具裡,GA4的ID在哪裡?

登入GA4系統帳號後,左下角的「管理」點選後,帳戶下的資源「資料串流」依需求設定後點選。

GA4分析工具裡,GA4的ID在哪裡?

進入到網頁串流詳情後,即可看到GA4的ID,善用右邊的複製選項,可把ID完整複製起來。

GA4分析工具裡,找到GA4的ID

4) 如何在GTM代碼管理工具設定GA4的ID

目前Google Analytics最新版是GA4,目前蠻多資訊是教GA3的設定,兩者設定方式不同,我終於在廣大的資訊中設定完成,快來看看是如何設定完成。目前GA4雖是最新版,但每個月google還是會調整更新,只能再臨時發揮DIY精神。

登入GTM系統帳號後,主畫面左側選擇「代碼」。

GTM 代碼管理工具,設定代碼

位在「代碼」位置後,點選「新增」後出現下面畫面,需設定「代碼設定」與「觸發條件」,依先設定「代碼設定」右上角滑鼠移過會出現設定的筆符號。

GTM 代碼管理工具,設定代碼

需依照您的Google Analytics版本而選擇,因我是GA4版本所以選第二個「GA4設定」,若是舊版GA3則選第一個「通用Analytics」,我也試過用第一個輸入GA4的ID,因系統有防呆會儲存失敗。

GTM 代碼管理工具,設定選擇GA4選項

開始「代碼設定」頁面,評估ID請填您的GA4的ID帳號,預設的「載入這項設定時傳送一次網頁瀏覽事件」,進階設定的「代碼觸發選項」預設的「每個事件一次」即可。

GTM 代碼管理工具,設定選擇GA4選項

選擇下方的「觸發條件」頁面,右上角滑鼠移過會出現設定的筆符號。

GTM 代碼管理工具,設定選擇GA4選項,選擇觸發條件

開始「觸發條件」頁面,請選擇「All Pages」每頁都需要安裝,並按右上方的「儲存」。

GTM 代碼管理工具,設定選擇GA4選項,選擇觸發條件

出現「代碼名稱」設定,請自行輸入方便管理、方便記憶的名稱,並按下「儲存」。

GTM 代碼管理工具,設定GA4完成後儲存

GTM代碼管理工具設定GA4的ID已完成。

GTM 代碼管理工具,完成設定GA4

三、如何測式GTM代碼管理工具安裝GA4成功?

GTM代碼管理工具有預覽功能,可提前測式是否安裝成功,事前準備需先另外安裝「Google Tag Assistant」在Chrome瀏覽器上,這個程式是Google推出是免費的小程式,可測式自已的網站是否安裝成功。

註:Google Tag Assistant程式【請點我至google線上應用程式】

若要查看GTM代碼管理工具是否設定GA4完成,可按上方的「預覽」。

GTM 代碼管理工具,設定GA4後選擇預覽

出現是否連結至您的網站訊息,請按下「Connect(連結)」。

GTM 代碼管理工具,設定GA4後選擇預覽,連結至網站

畫面出現,正在連結至您的網站的訊息。

GTM 代碼管理工具,設定GA4後選擇預覽,連結至網站

連結至網站成功後,請選Chrome瀏覽器上的「擴充功能」把「Google Tag Assistant」呼叫出來。

使用Google Tag Assistant,讀取網站資料

「Google Tag Assistant」程式出現後,請按下「Enable」開始讀取網站的記錄,並按「F5」重新整理網頁。

使用Google Tag Assistant,讀取網站資料

網頁重新整理後,再次呼叫出「Google Tag Assistant」則讀取結果有GTM的ID、GA4的ID,表示您的設定已完成並讀取成功。

使用Google Tag Assistant,讀取ID結果

四、GTM代碼管理工具設定後,如何正式上線?

若GTM代碼管理工具設定完成,可按上方的「提交」功能,讓設定正式上線。正常的情況下,藍色區域會顯示目前「已修改、已新增、已刪除」的各個數量,待需上線的數量。

GTM 代碼管理工具,設定完成可按上方的「提交」功能

在GTM提交資訊裡填寫「版本名稱」、「版本說明」即可按下「發布」。

GTM 代碼管理工具,填寫提交資訊後可按下「發布」

發布完成後,會顯示本次的GTM修改資訊後,即上線完成了。

GTM 代碼管理工具,發布完成後的畫面






分享 FacebookTwitterWhatsappLINE

發表迴響 取消回覆

文章分類

  • 日本旅遊 (14)
    • 關東地區 (6)
    • 關西地區 (2)
    • 九州地區 (5)
    • 沖繩地區 (1)
    • 租車資訊 (1)
  • 台灣旅遊 (3)
  • 飲食記 (7)
  • 開箱分享 (5)
  • 網站設定 (1)

【海外購物 注意事項《札幌藥妝》《唐吉訶德》】

『旅遊類』熱門文章

  • 1

    世界遺產!日本富士山河口湖攻略、優惠套票、必玩景點

  • 2

    輕井澤第一!雲場池紅葉、白貓自行車、銀座通商店街

  • 3

    必去景點!熊本城、熊本熊部長辦公室、飲神水庭園

  • 4

    新玩法!觀光雙層巴士skybus、明治神宮、東京鐵塔

  • 5

    攻略版!東京迪士尼樂園、APP快速通關、海洋萬聖節

  • 6

    台北景點!三峽藍染手作體驗、親子DIY

『其它類』熱門文章

  • 1

    平價美食!日本壽司連鎖店排行、HAMA壽司人氣產品

  • 2

    網紅滴妹!再睡5分鐘NAP TEA飲料店、2023菜單

  • 3

    日本西東京第一!武藏野焦糖乳酪~西東京草莓塔

  • 4

    日本第一!壽司郎人氣產品、回轉壽司好吃秘訣

  • 5

    福岡美食!柳川百年老店「若松屋」日式鰻魚飯

  • 6

    日本美食雜貨!台北忠孝新生「唐吉訶德」走訪開箱

最新文章

  • 台北華山∣SPY FAMILY 間諜家家酒 快閃店!免門票

  • 驚爆6折起!日本超人氣「唐吉訶德」線上購物介紹

  • 自由行必買!外國人優惠 JR PASS 交通券(東京/大阪)、常見問題

  • 初學者必讀!網站設定GTM帳號、連結GA4分析工具

  • 超人氣!沖繩美麗海水族館&熱門景點套票

KKDAY優惠

熱搜!2023 全台賞櫻趣,優惠78折起



03/26前!購指定韓國商品,贈好禮,再抽機票、手機



2023 日本、韓國!賞櫻團開賣囉~


其它優惠

搜尋文章

Copyright ©2022 - Claudia 生活旅遊 版權所有


Back To Top
  • 首頁
  • 關於我
  • 日本旅遊
    • 關東地區
    • 關西地區
    • 九州地區
    • 沖繩地區
    • 租車資訊
  • 台灣旅遊
  • 飲食記
  • 開箱分享
  • 網站設定