內容目錄
歡迎回到鵠學苑— WordPress 網頁設計超詳細攻略 – Google Tag Manager 安裝 GA 追蹤碼 相對於使用 WordPress 主題編輯器或外掛導入的方式而言更為穩定，Google 代碼管理工具可以整合許多與網站相關的追蹤 ID ，以外部導入的方式讓追蹤程式碼在網站中可以正確運作，讓所有連動程式可以獲得統一管理，也能避免掉編輯程式碼導致網站問題的風險。
本篇教學將說明如何申請 Google Tag Manager 帳戶並與網站串接的方法，在第二小節也會將加入 GA 追蹤 ID 的操作步驟做完整的圖文解釋，增加代碼的方式不只適用於 Google Analytics ，像是 hotjar 這一類的網站分析工具，同樣也可以使用 Google 代碼管理工具導入。接下來跟著鵠學苑的腳步，讓我們開始學習吧！
Google Tag Manager 安裝指南
https://developers.google.com/tag-manager/quickstart
Google Tag Manager 註冊網址
https://marketingplatform.google.com/about/tag-manager/?hl=zh_TW
Google 代碼管理工具加入 GA 追蹤碼說明文件
https://support.google.com/tagmanager/answer/6107124?hl=zh-Hant&ref_topic=6333310
Google 代碼管理工具帳戶申請步驟
第一步：進入 Google Tag Manager 點選 Start for free 按紐，以 Google 帳戶登入後就可以進入操作介面。
第二步：在代碼管理工具中點選建立帳戶。
第三步：下圖標示的位置分別填入帳戶名稱（網站名稱）、國家地區，容器設定請輸入網站網址，使用位置記得選擇網路，接者點選建立。
標示的位置打勾即可完成帳戶建立。
第四步：Google 代碼管理工具同樣需要加入網站串接程式碼，與直接加入 GA 追蹤程式碼不同的是只需要輸入一次 Google 代碼管理工具，其它的網站連動程式之後都可以在 Google 代碼管理工具上直接做串接，非常方便。
第五步：加入的方式同樣是是在 HTML 標籤 </head> 上方與 <body> 下方空白區域分別加入 Google 代碼管理工具提供的程式碼。
第六步：下圖是 <body> 大致上放的位置，如果在 header.php 中找不到 <body>，那麼可以在 footer.php 中尋找，每一個網站安裝的主題架構都不相同，因此筆者無法一一列出，加入後記得點選更新檔案。
在 Google 代碼管理工具中設定 GA 追蹤程式碼
第一步：建立完成後會進到如下圖的畫面，點選新增代碼。
第二步：在 Google 代碼管理工具中每一組設定都可以視為一個容器，因此在代碼設定時必須為容器取名稱，如下圖左上角筆者直接輸入 GA 追蹤碼做為容器名稱，在日後也較方便統一管理，接者點選代碼設定，在代碼類型中選擇第一個 GA 分析。
第三步：在 GA 分析的欄位中設定變數，接者在追蹤編號的欄位中輸入 GA 追蹤 ID。
第四步：接者點選觸發條件，因為 GA 追蹤碼是針對整個網站做分析，因此在條件上請選擇 All Page （全部頁面），如圖二所示。
第五步：下圖是完成設定後的畫面，點選右上角的儲存。
第六步：Google Tag Manager 容器設定完成後必須要提交才會生效，在點選提交按鈕後，輸入此次變更的內容文字，作為不同版本的提示，接者點選發佈，如下圖所示。
第七步：完成後在進入下圖的畫面，則表示發佈完成。
結語：
以 Google 代碼管理工具導入 GA 追蹤碼操作方式其實並不複雜，除了串接 GA 之外，也可以將 schema.org 結構化資料的標記內容加入到網站中執行，相關的教學之後如果有機會寫到 Google 代碼管理工具的介紹，會再詳細說明。
今天的教學到這裡告一段落了，不要忘記在右側訂閱鵠學苑電子報，確保收到最新 WordPress 教學文章，如果有網頁設計相關需求，或者想了解最新網站知識，也可以到 鵠崙設計 做線上免費諮詢喔！我們下次的教學見～
SEO相關文章：
網站架設知識推薦閱讀
GDPR 歐盟 個人資料保護 法規發佈，網站必須建立 隱私 政策 ！
Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹
Google reCaptcha v3 發布，以後不用再點選 我不是機器人？
