Blogger 網站如何追蹤 Google Analytics 點擊事件的成效？

之前接到一個需求，想在 Blogger 網站監測連結點擊的成效，收集不同優惠方案的點擊數據。

只要網站有安裝 Google Analytics(簡稱 GA)，那麼做到這件事很容易，為每個點擊按鈕植入 GA 追蹤碼，在 GA 後台就能撈出點擊事件的詳細報表。

但實際上做了之後才發現 Blogger 網站會遇到一些狀況，請見本篇的說明。

一、植入 GA 追蹤碼

1. 官方說明

• GA 事件跟踪

參閱 GA 官方文件後，追蹤碼的完整格式如下：

ga('send', 'event', [事件類別], [事件動作], [事件標籤], [事件價值]);

• 前兩個 send、event 都是必要參數
• 事件類別：必要參數，為該事件設定一個分類字串
• 事件動作：必要參數，紀錄該事件的執行動作
• 事件標籤：非必要參數，可為該事件進行註解說明
• 事件價值：非必要參數，只能填入數字

2. 追蹤碼範例

假設網頁上有個按鈕，會連結到行銷網頁，為了追蹤點擊的成效，追蹤碼範例如下：

ga('send', 'event', '按鈕', '點擊', '2019 最新優惠', 1000);
只要這個按鈕被點擊了，這一行 JS 就會被執行，該點擊事件會自動出現在 GA 的報表。


3. 完整 HTML 碼範例

這個按鈕的超連結語法範例如下：

<a onclick="ga('send', 'event', 'button', 'click', '2019 最新優惠', 1000);" href="行銷網頁連結" target="_blank">前往最新優惠頁面</a>
有沒有覺得奇怪上面完整的範例碼，把 '按鈕', '點擊' 這兩組中文字串，換成了英文？

我在這篇「Google analytics 事件追蹤教學」，看到作者使用的參數為中文，而且 GA 截圖也顯示中文，但很奇怪「事件類別」、「事件動作」這兩組參數，我使用中文字串時 GA 都不吃，但一用英文字串 GA 馬上就撈到數據。

所以讀者可以自行試試看，如果中文也無法被 GA 接受的話，就使用英文吧。

但「事件標籤」確定是可以使用中文字串的。

二、調閱 GA 事件報表

接著進入「GA 官網」→ 左側選單：

• 行為 → 事件 → 總覽

• 如果剛剛自行點擊按鈕，想要馬上看報表，右上角記得日期範圍要選「今天」。
• 可以看到「事件類別」抓到的資料全部都是英文，我設成中文字串的事件全部都沒撈到。

切換到「活動標籤」看看，這邊就正常了，中、英文都沒問題。

三、Blogger 如何植入事件追蹤碼

前面說明的是所有網站通用的處理狀況，Blogger 若使用相同的追蹤碼，有可能在 GA 怎麼樣都追蹤不到任何事件。

調查了很久才發現原因，可參考這篇「Google Blogger/Blogspot onclick event in link will not pass to Google Analytics」。


1. Blogger 預設的 GA 安裝碼

事情出在 Blogger 範本中的 GA 預設程式，大部分 Blogger 站長都會符合以下兩個條件：

• 後台 → 設定 → 其他 → Analytics (分析) 網站資源 ID → 填入 GA ID
• 範本中應該會看到這行字串 <b:include data='blog' name='google-analytics'/>

這樣 Blogger 不需要額外在範本中放入 GA 安裝碼，在網頁原始碼中就會看到自動產生的 GA 安裝碼，像下圖這樣：




注意上圖紅框的程式碼，這行由 Blogger 自動產生的參數，正是讓 GA 事件追蹤碼失效的原因：

ga('blogger.send', 'pageview');

正常的 GA 安裝碼參數應該是 'send' 而不是 'blogger.send'，這會導致 「GA 事件追蹤碼」跟「GA 安裝碼」彼此無法對應。

然而 Blogger 自動產生的「GA 安裝碼」我們又無法修改，所以我們得修改「GA 事件追蹤碼」的參數，讓兩邊能對應的起來。


2. Blogger 修改事件追蹤碼

請將前面提供的完整 HTML 碼範例，改成以下即可：

<a onclick="ga('blogger.send', 'event', 'button', 'click', '2019 最新優惠', 1000);" href="行銷網頁連結" target="_blank">前往最新優惠頁面</a>
只有紅字部分不同，其他都一樣，這樣 GA 報表就能看到事件的數據了。

四、總結

使用 Blogger 先檢查一下，如果使用官方範本，那麼一定會出現自動產生的 "blogger.send" 參數，那麼就需要修改 GA 事件追蹤碼。

如果使用非官方範本，那麼可開啟網頁原始碼，搜尋是否有 "blogger.send" 參數。如果沒有的話，應該當初是自行安裝 GA，那麼追蹤 GA 事件就不必特別修改參數了。