1. 程式人生 > >google.tagmanager 在單頁面中的實踐

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 後邊加入一個想 標籤,目前看來雖然沒有什麼大的傷害,但總是不夠優雅。

我的個人網站