Google Analytics 教學 – Google Tag Manager 安裝 GA 追蹤碼

歡迎回到鵠學苑— 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 Tag Manager 安裝 GA 追蹤碼

第二步:在代碼管理工具中點選建立帳戶。

Google Tag Manager 安裝 GA 追蹤碼

第三步:下圖標示的位置分別填入帳戶名稱(網站名稱)、國家地區,容器設定請輸入網站網址,使用位置記得選擇網路,接者點選建立。

Google Tag Manager 安裝 GA 追蹤碼

標示的位置打勾即可完成帳戶建立。

Google Tag Manager 安裝 GA 追蹤碼

第四步:Google 代碼管理工具同樣需要加入網站串接程式碼,與直接加入 GA 追蹤程式碼不同的是只需要輸入一次 Google 代碼管理工具,其它的網站連動程式之後都可以在 Google 代碼管理工具上直接做串接,非常方便。

Google Tag Manager 安裝 GA 追蹤碼

第五步:加入的方式同樣是是在 HTML 標籤 </head> 上方與 <body> 下方空白區域分別加入 Google 代碼管理工具提供的程式碼。

Google Tag Manager 安裝 GA 追蹤碼

第六步:下圖是 <body> 大致上放的位置,如果在 header.php 中找不到 <body>,那麼可以在 footer.php 中尋找,每一個網站安裝的主題架構都不相同,因此筆者無法一一列出,加入後記得點選更新檔案。

Google Tag Manager 安裝 GA 追蹤碼

在 Google 代碼管理工具中設定 GA 追蹤程式碼

第一步:建立完成後會進到如下圖的畫面,點選新增代碼。

Google Tag Manager 安裝 GA 追蹤碼

第二步:在 Google 代碼管理工具中每一組設定都可以視為一個容器,因此在代碼設定時必須為容器取名稱,如下圖左上角筆者直接輸入 GA 追蹤碼做為容器名稱,在日後也較方便統一管理,接者點選代碼設定,在代碼類型中選擇第一個 GA 分析。

Google Tag Manager 安裝 GA 追蹤碼

第三步:在 GA 分析的欄位中設定變數,接者在追蹤編號的欄位中輸入 GA 追蹤 ID。

Google Tag Manager 安裝 GA 追蹤碼

Google Tag Manager 安裝 GA 追蹤碼

第四步:接者點選觸發條件,因為 GA 追蹤碼是針對整個網站做分析,因此在條件上請選擇 All Page (全部頁面),如圖二所示。

Google Tag Manager 安裝 GA 追蹤碼

Google Tag Manager 安裝 GA 追蹤碼

第五步:下圖是完成設定後的畫面,點選右上角的儲存。

Google Tag Manager 安裝 GA 追蹤碼

第六步:Google Tag Manager 容器設定完成後必須要提交才會生效,在點選提交按鈕後,輸入此次變更的內容文字,作為不同版本的提示,接者點選發佈,如下圖所示。

Google Tag Manager 安裝 GA 追蹤碼

Google Tag Manager 安裝 GA 追蹤碼

第七步:完成後在進入下圖的畫面,則表示發佈完成。

Google Tag Manager 安裝 GA 追蹤碼

結語:

以 Google 代碼管理工具導入 GA 追蹤碼操作方式其實並不複雜,除了串接 GA 之外,也可以將 schema.org  結構化資料的標記內容加入到網站中執行,相關的教學之後如果有機會寫到 Google 代碼管理工具的介紹,會再詳細說明。
今天的教學到這裡告一段落了,不要忘記在右側訂閱鵠學苑電子報,確保收到最新 WordPress 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

SEO相關文章:

網站架設知識推薦閱讀

GDPR 歐盟 個人資料保護 法規發佈,網站必須建立 隱私 政策 !
Site Kit WordPress Plugin – Google SEO 整合工具外掛介紹
Google reCaptcha v3 發布,以後不用再點選 我不是機器人?

鵠學苑

鵠學苑

我們是由一群熱愛 WordPress 網站架設的同好所組成的團隊,希望可以將這套 頂尖的 CMS 管理系統推廣給想要架站的朋友們,並且能夠在過程中互相交流心得,讓網站架設過程變得更有效率!

訂閱電子報

立即訂閱鵠崙設計(鵠學苑)!我們將不定期發送架站教學文章、最新網站版型介紹以及網頁設計最優惠價格!

熱門文章

最新文章

相關文章

標籤雲

Scroll to Top