2019年3月1日 星期五

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

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

Wayne Fu 0 A+
blogger-track-ga-event.jpg-Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?之前接到一個需求,想在 Blogger 網站監測連結點擊的成效,收集不同優惠方案的點擊數據。

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

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



一、植入 GA 追蹤碼


1. 官方說明


參閱 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-track-ga-event-1.jpg-Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?

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


blogger-track-ga-event-2.png-Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?

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



三、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-track-ga-event-3.png-Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?


注意上圖紅框的程式碼,這行由 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 事件就不必特別修改參數了。


更多 Google Analytics 相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 請避免使用 Safari 瀏覽器,否則無法登入 Google 帳號留言(只能匿名留言)!
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」;或參考「Blogger 行動版範本修改技巧 」,或本站 Blogger 行動版標籤相關文章。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若是使用官方 RWD 範本,請參考「Blogger 推出全新自適應 RWD 官方範本及佈景主題」→ 不建議對範本進行修改!
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP