google.tagmanager 在單頁面中的實踐
在上一篇文章中說了下基礎的 tagmanager 怎麼使用 入口在這裡
下面是我遇到的一些問題,以及處理方法,可能有些有問題,或者處理的很複雜,如果你有更好的思路,請一定聯絡我 [email protected] 感謝。
一、單應用頁面怎麼處理 PV(pageview)?
現在有很多優秀的框架能實現頁面應用化,一次載入所有資源,根據路由變化,載入不同頁面,而不進行重新整理,例如 AngularJS ,由於這類網站在頁面跳轉時,並不進行頁面重新整理,所以 GA(analytics.google)不會發送 PV 資料, 這時該怎麼辦呢,其實官方文件中給出了建議,連結點這兒,文件的大意是,你的網站,你當然知道什麼時候需要發 PV 了,so,需要的時候就發給我吧
第一步,設定 page,ga('set', 'page', '/new-page');
第二步,傳送 pv,ga('send', 'pageview');
搞定,超簡單。
1、但是這裡有一個問題,設定 page?什麼是 page?
舉個例子,例如你使用的是 angular,你的連結就會像這樣:harvestmoon.cn/blog/#/abc、 harvestmoon.cn/blog/#/xyz,… page 為別為 abc、xyz;在我自己的實踐中,我是將 page 設定為 blog/abc 和 blog/xyz 的,統計的資料也是正確的,可能是偉大的谷歌為我們做好了相容。
2、這裡還有一個問題,在邏輯程式碼中,我知道什麼時候執行 設定 page
、傳送 pv
,但是在 tagmanager 中怎麼設定觸發器呢?
這位觀眾,你很厲害哦,一下抓住了重點,接下來,我們就講講在單應用頁面中怎麼使用 tagmanager。
二、單應用頁面中使用 tagmanager
問題的關鍵就是:在我們本地的程式碼中,我們總是知道何時發生了路由切換,從而知道什麼時候傳送 pv,以 angular 為例,如下程式碼
$rootScope.$on('$routeChangeSuccess', function (event, current, previous) {
ga('set', 'page', '/blog/abc');
ga('send','pageview' );
});
複製程式碼
所以我們只需要在 tagmanager 中找到這樣一個觸發時機即可,在新建觸發器(triggers)時,偉大的谷歌再次讓我膜拜,我發現一個內建的觸發器叫做【歷史記錄更改】,它的意思是隻要是網址傳送了變化,就會觸發,簡直就是為單應用定製的觸發器。
知道什麼時候觸發,接下來,只需要搞定執行程式碼即可,然而程式碼早已經有了 ga('set', 'page', '/new-page'); ga('send','pageview');
三、是時候看看具體的操作了
1、我們從程式碼(tags)開始,選擇新建程式碼,依次:
選擇產品-》Google Analysis;
選擇程式碼型別-》Universal Analytsis;
配置程式碼-》跟蹤ID 填入你的 Analysis.Google 的 ID,在管理下的媒體資源設定下可以找到,我這裡填入的是 ga-property 是引用了自己設定的一個變數(變數在下面介紹)。
-》跟蹤型別:網頁瀏覽(就是平時所說的 pv)
-》欄位名稱填入 page,值填入本頁面的 page 值(這裡我有使用了一個自定義的變數 ga-page 值,後邊講解怎麼設定)
觸發條件-》新建一個觸發器,歷史記錄更改;如圖,還有一個【視窗已經載入】觸發器,是因為頁面第一次載入時,我們需要傳送 pv,【歷史記錄更改】在第一次載入時,是不會觸發的。
2、變數的建立,
1)ga-property 變數,在左邊欄選擇變數(variables),選擇新建
選擇型別-》常理
配置變數-》填入你的跟蹤 ID 即可
2)ga-page 值
主要說下自定義的 JavaScript,你需要建立一個匿名函式,返回你需要的值即可
拿 www.smartisan.com/t2/#/overvi… 這個網址做例,我這裡返回的就是 t2/overview,你可以根據自己的需要返回任何值
四、 可能的問題
tagmanager 解決單頁面 pv 的問題大致就如上,下面記錄一些已知問題
1、傳送的 pv 標題錯誤:由於觸發條件為【歷史記錄更改】,會導致單頁面標題還未改變,就已經發送了 pv,所以往往本次 pv 的標題還是上個頁面的。
目前我想到的解決方法比較傻,就是每次傳送 pv 的程式碼(tags)都選擇【自定義 javascript】,在程式碼了 setTimeout 延遲大概 200ms 然後傳送 pv,這時候標題已經切換為新的了。但是這樣有個問題,【自定義 javascript】每次觸發都會忘頁面的 body 後邊加入一個想 標籤,目前看來雖然沒有什麼大的傷害,但總是不夠優雅。