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

Google Analytics 教學 – Google Tag Manager 安裝 GA 追蹤碼 內容綱要:

1. Google Tag Manager 帳戶申請流程

2. Google Tag Manager 設定 GA 追蹤碼

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

• 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 教學文章,如果有網頁設計相關需求,或者想了解最新網站知識,也可以到 鵠崙設計 做線上免費諮詢喔!我們下次的教學見~

Google Search Console  相關教學文章:

Search Console 教學 – Google 索引與網站收錄狀態、移除網址

Google Search Console 教學 – hreflang 標記網站指定國際目標

Google Console 教學 – 內部連結、外部連結 項目解說及外掛推薦

Google Search Console 教學 – AMP 加速行動網頁項目操作說明

Google Console 改善 HTML – Meta Title and Description 重複內容

Google Search Console 強化項目:複合式資訊卡 、行動裝置可用性及 AMP

網站架設知識推薦閱讀:

Google reCaptcha v3 發布,以後不用再點選 我不是機器人?

Google 在地商家 新增訊息功能,在 Google 地圖上即時通訊!

網站建置必看重點 – 10 個網站製作前必須了解的知識與概念!

鵠學苑

鵠學苑

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

訂閱電子報

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

熱門文章

最新文章

相關文章

標籤雲

Sign up for our Newsletter

Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit

Scroll to Top