跳至主要内容

技術部落格初體驗：Google Tag Manager 我想知道有誰來看我

· 閱讀時間約 6 分鐘
Chao-En Huang
Chao-En Huang
Back End Engineer

寫完文章了！但我想要知道有誰來看我，在網頁上加上Google Tag，就能透過 Google Analytics 來分析瀏覽次數等等。

安裝教學​

安裝 docusaurus 的套件 plugin-google-tag-manager​

  1. 如果你在 docusaurus.config.ts 中，是使用@docusaurus/preset-classic的話，不用執行以下的安裝。
docusaurus.config.ts
const config: Config = {
  presets: [
    [
      '@docusaurus/preset-classic',
    ],
  ],
};
export default config;
yarn add @docusaurus/plugin-google-tag-manager

建立 Google Tag Manager (GTM) 容器​

  1. 到tagmanager.google.com的地方，創建一個新的帳戶

google_tag_manager_create_account

  1. 填寫帳戶名稱、容器名稱，容器名稱是 domain name 會比較好

google_tag_manager_create_container

  1. 同意 GTM 的合約

google_tag_manager_agree_contract

設定 docusaurus 中的 GTM 容器 ID​

  1. 從網頁上獲得你的 GTM 容器的 ID 名稱

google_tag_manager_container_id

  1. 在 docusaurus.config.ts 中設定 GTM 的 ID 名稱，就可以部版到 GitHub Page 上面
docusaurus.config.ts
const config: Config = {
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        googleTagManager: {
          containerId: 'GTM-XXXXXX', // 填寫在這裡
        },
      },
    ],
  ],
};
export default config;
  1. 到 GTM 中，點選剛剛第一點 ID，會跳出提示框，在最下面輸入靜態網頁網址，測試網站增加 GTM 是否 OK，左邊有綠色勾勾代表 OK

google_tag_manager_testing

創立 Google Analytics (GA) 帳號​

  1. 到analytics.google.com建立帳號

google_analytics_start

  1. 填寫要觀察的帳戶名稱

google_analytics_account_name

  1. 建立 GA4 的名稱

google_analytics_source_name

  1. 依照自己的商業規模填寫，因為是個人網站，所以只有一個人

google_analytics_commercial_info

  1. 依照自己的商業目標填寫，因為只是想觀察流量，因此點選流量

google_analytics_commercial_target

  1. 進到分析頁面代表創立 GA 帳號成功

google_analytics_create_success

  1. 建立 Google Tag 等一下要使用到

google_analytics_create_streaming

  1. 填寫自己 GitHub Page 上面的網址，並且自訂自己知道的串流名稱，按下建立並繼續

google_analytics_create_streaming_info

  1. 取得 GA tag 的 ID，等一下會用到

google_analytics_4_tag_id_info

使用 GTM 觸發拋轉 GA​

  1. 回到 GTM 的地方，我們要設定觸發條件和拋轉到 GA 上面，首先創立一個代碼，用於初始化 GA tag

google_tag_manager_create_code

  1. 點選代碼設定，再點選 Google 代碼

google_tag_manager_create_code_setting_gatag

  1. 將剛剛取得的 GA tag ID 貼過來，另外修改左上角的代碼名稱

google_tag_manager_create_code_setting_gatag_add_gatag

  1. 設定觸發條件為 Initialization - All Pages

google_tag_manager_create_code_setting_gatag_trigger

  1. 再建立一個代碼，用於將 GA tag 拋轉到 GA

google_tag_manager_create_code

  1. 點選代碼設定，再點選 Google Analytics

google_tag_manager_create_code_setting_ga_1

google_tag_manager_create_code_setting_ga_2

  1. 將剛剛取得的 GA tag ID 貼過來，並且確認右邊 google 有找到代碼，另外修改左上角的代碼名稱

google_tag_manager_create_code_setting_ga_add_gatag

  1. 設定觸發條件為 All Pages，這樣只要使用者瀏覽頁面，就會拋轉 GA，按下確認

google_tag_manager_create_code_setting_ga_trigger

  1. 完成建立

google_tag_manager_create_code_success

測試教學​

測試 GTM 是否運作正常​

  1. 點選右上角的預覽，來觀察 GTM 是否正確載入

google_tag_manager_preview

  1. 輸入自己靜態網站網址，連結網站後進行分析

google_tag_manager_preview_connect_url

  1. 網頁打開後，我們會看到兩個畫面，一個是預覽的網頁，一個是 Tag Assistant 的網頁

google_tag_manager_preview_overview

  1. 點選 Tag Assistant 的初始化，我們可以看到已觸發代碼中，有 GA tag 初始化的代碼

google_tag_manager_preview_init

  1. 點選 Tag Assistant 的容器已載入，我們可以看到已觸發代碼中，有拋轉 GA tag 到 GA 的代碼，這樣就確認成功

google_tag_manager_preview_container_loaded

測試 GA 是否運作正常​

  1. 進到 GA，就會發現在過去 30 分鐘內活耀使用者人數有紀錄，這樣就是正常的

google_analytics_success

刪除教學​

刪除 GTM 的 container​

  1. 點選要刪除的帳戶，按下帳戶設定

google_tag_manager_delete_account

  1. 按下刪除即可

google_tag_manager_delete_account_agree

心得​

這些設定真的很繁瑣，不過拆解每一步驟之後，就會發現 GTM 的 debugger 做得還不錯，可以分析有沒有觸發，以及有沒有真實的拋轉， docusaurus 的 plugin 也大幅簡化了需要增加再 html 的 code，有這些幫助，讓建立 GTM 然後拋轉 GA 變得相對容易， 這篇並沒有詳細介紹 GTM 的各種功能，有興趣的朋有可以更深入研究 GTM，甚至還可以記錄到哪一個按鈕，從哪一頁跳轉到哪一頁等等資訊。