Autotrack v1.0發布,GA高級設置輕鬆搞定

Photo of author
Written By CMO

大約在5個月前,HubSpot One曾經特地撰文介紹Autotrack這個GA插件集。這個不是親兒子勝過親兒子的插件集在8月初正式發布了1.0版。 Google Analytics的官方部落格也喜大普奔詳盡介紹了其新特性和區別。

從舊版本升級Autotrack

如果你是舊版本的Autotrack用戶那麼請注意你需要對你已經部署的代碼進行更改。以往只要一行ga(‘require’, ‘autotrack’)就可安裝的大禮包現在需要一個一個插件安裝。也就是說你需要用幾個插件就裝幾個插件,如下面這樣:

ga(‘require’, ‘eventTracker’);
ga(‘require’, ‘outboundLinkTracker’);
ga(‘require’, ‘urlChangeTracker’);

這個更改是為了避免網站安裝所以插件後出現一些“意外”。

接下來你只要下載autotrack.js這個文件覆蓋掉舊的文件即可。

這次更新開發團隊還加入了多種語言的使用說明,查看中文技術文檔請點擊這裡。部分已翻譯。

Autotrack新版本的新特性

對新手Web Analyzer來說Autotrack是一套非常好用的插件。這次更新主要添加了幾個新插件,分別是Impression Tracker,Clean URL Tracker和Page Visibility Tracker。

Impression Tracker

Impression Tracker可以幫助你檢測是否頁面上的一個元素真實可見。我們知道廣義上的Impression是瀏覽器讀取一次就算作一次的。即便某些元素,如圖像,影片在頁面底部需要訪問者向下探索才能看到也會被算作一個展現(Impression)。這是不科學的,也是會對我們的決策產生干擾的。該插件使用了瀏覽器API中的IntersectionObserver,當元素出現在用戶可視範圍內時被觸發。這項功能在Chrome 51以上版本默認適用,在其他瀏覽器上你需要載入polyfill。

<script src=” path/to/ intersection-observer.js”></script>

你可以把這個js文件放在你的服務器上。具體的用法是在加載插件時直接設定Option。

ga(‘require’, ‘impressionTracker’, {elements: [{id: ‘foo’, threshold: 0.5}, {id: ‘bar’, threshold: 0.5}]});

上面這個例子是指示當id為foo的元素或者id為bar的元素可見超過50%時觸發一個GA的event。這個GA Event的category,action和label分別為Viewport,impression,元素id。

Clean URL Tracker

我們在GA報表中很多時候可以看到Page的URL後面會帶斜杠/,帶參數?,帶文件名。那麼如何把這些其實是同一頁面的PageView聚合到一起呢? Clean URL Tracker就是起到這個作用。 Clean URL Tracker的功能我們大多數可以用GA的過濾器功能實現。但是如果你對過濾器不是很熟悉的話也可以使用這個插件。使用方法和上面的插件非常類似。舉個例子:

ga(‘require’, ‘cleanUrlTracker’, { stripQuery: true, queryDimensionIndex: 1, indexFilename: ‘index.html’, trailingSlash: ‘remove’ });

上面的這個代碼片段說明我們需要把URL後面的參數去掉,同時把參數保存到自定義的維度,再去掉所有的index.html,最後去掉斜杠。這裡需要注意的是queryDimensionIndex僅支持Hit-level的自定義維度。以下三種情況最後被推送到GA的都會是/contact。

  • /contact/
  • /contact?hl=en
  • /contact/index.html

第二種情況的hl=en會被推送到dimension1中。

Page Visibility Tracker

生活中我們時常會遇到這樣一種情況,你打開了某個網頁,掃了一眼,也不關掉,然後去忙其他的事情了。而對於某些單頁面應用來說很多頁面也許根本就不曾關閉。這種情況下,傳統的PageView以及Session的統計顯得有些“過時”了。為了解決這一問題Autotracker開發組為我們提供了pageVisibilityTracker插件。如果你使用了此插件,當你的頁面打開後,用戶查看別的瀏覽器標籤,離開幾小時或幾天后再回來時會計算作一個新的PageView和新的Session。

該插件的原理是監聽瀏覽器visibilitychange的事件。如果之前的Session過期了的話會推送一個新的Session和PageView給GA。這里大家仍然要注意的是瀏覽器版本的兼容性問題。比如IE瀏覽器至少要10以上才能支持。當你開啟此插件後,你會發現頁面訪問數和訪問量增加了。這不是什麼錯誤,只是因為過去未能抓取的數據現在可以被收集了。

下面來介紹一下用法:

ga(‘require’, ‘pageVisibilityTracker’, options);

激活插件的方法很類似,關鍵在於options參數。HubSpot One在此簡要介紹一下:

  • sessionTimeout參數決定多少分鐘以後Session過期,默認值是30(分鐘)
  • changeTemplate方法用於覆蓋原有的eventLabel。
  • hiddenMetricIndex和visibleMetricIndex用於設置自定義指標索引,生效之後該頁面有多少秒可見,多少秒不可見(被其他頁面覆蓋)就會被記錄於其中。下面的範例1。
  • fieldsObj用於GA加載的參數設置,如nonInteraction我們可以設置成null,這樣每一次觸發Event都會成為一個Interaction。這樣你會發現Average Time On Page和Average Session Duration會延長。下面的範例2。
  • hitFilter參數可以更自由地操控Model對象,篇幅關係,不便展開。下面的範例3。

下面舉幾個例子:

  1. ga(‘require’, ‘pageVisibilityTracker’, { hiddenMetricIndex: 1, visibleMetricIndex: 2, });
  2. ga(‘require’, ‘pageVisibilityTracker’, { fieldsObj: { nonInteraction: null } });
  3. ga(‘require’, ‘pageVisibilityTracker’, { hitFilter: function(model) { model.set(‘dimension1’, String(model.get(‘eventValue’)), true); } });

讓Web Analytics更科學更智能

HubSpot One通過對Autotrack v1.0的介紹揭示了我們在網站分析上的新思路。互聯網從一片混沌到如今的各種可靠的衡量方法在過去的十年間有著長足的進步。筆者依稀記得當年打開最老版本的Google Analytics時的那種興奮之情。 Web Analytics是數字行銷的基石,它將會在未來的幾年內持續顛覆我們在數字廣告上的認識。

在介紹早先版本的Autotrack時HubSpot One曾經說如果你對GTM不太了解,那麼Autotrack是一個很好的替代方式。在進化到1.0之後,我們發現Autotrack的新功能仍然需要部署一定的代碼量並且對JS需要有足夠的基礎。這就出現了一個在Autotrack這個插件集和GTM之間取捨的問題,而“不需要寫代碼”變成了一個很弱的理由。那麼你會怎麼選擇呢?

感謝關注HubSpot One!