google.tagmanager 在單頁面中的實踐

在上一篇文章中說了下基礎的 tagmanager 怎麼使用 入口在這裏

下面是我遇到的一些問題，以及處理方法，可能有些有問題，或者處理的很複雜，若是你有更好的思路，能夠在留言區一塊兒討論。

1、單應用頁面怎麼處理 PV（pageview）？

如今有不少優秀的框架能實現頁面應用化，一次加載全部資源，根據路由變化，加載不一樣頁面，而不進行刷新，例如 AngularJS ,因爲這類網站在頁面跳轉時，並不進行頁面刷新，因此 GA（analytics.google）不會發送 PV 數據， 這時該怎麼辦呢，其實官方文檔中給出了建議，連接點這兒，文檔的大意是，你的網站，你固然知道何時須要發 PV 了，so，須要的時候就發給我吧

第一步，設置 page，ga('set', 'page', '/new-page');

第二步，發送 pv，ga('send', 'pageview');

搞定，超簡單。

一、可是這裏有一個問題，設置 page？什麼是 page？

舉個例子，例如你使用的是 angular，你的連接就會像這樣：harvestmoon.cn/blog/#/abc、 harvestmoon.cn/blog/#/xyz，… page 爲別爲 abc、xyz；在我本身的實踐中，我是將 page 設置爲 blog/abc 和 blog/xyz 的，統計的數據也是正確的，多是偉大的谷歌爲咱們作好了兼容。

二、這裏還有一個問題，在邏輯代碼中，我知道何時執行 設置 page、發送 pv,可是在 tagmanager 中怎麼設置觸發器呢？

這位觀衆，你很厲害哦，一下抓住了重點，接下來，咱們就講講在單應用頁面中怎麼使用 tagmanager。

2、單應用頁面中使用 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');

3、是時候看看具體的操做了

一、咱們從代碼（tags）開始，選擇新建代碼，依次：

選擇產品-》Google Analysis；

選擇代碼類型-》Universal Analytsis；

配置代碼-》跟蹤ID 填入你的 Analysis.Google 的 ID，在管理下的媒體資源設置下能夠找到，我這裏填入的是 ga-property 是引用了本身設置的一個變量（變量在下面介紹）。

-》跟蹤類型：網頁瀏覽（就是平時所說的 pv）

​ -》字段名稱填入 page，值填入本頁面的 page 值（這裏我有使用了一個自定義的變量 ga-page 值，後邊講解怎麼設置）

觸發條件-》新建一個觸發器，歷史記錄更改；如圖，還有一個【窗口已經加載】觸發器，是由於頁面第一次加載時，咱們須要發送 pv，【歷史記錄更改】在第一次加載時，是不會觸發的。

二、變量的建立，

1）ga-property 變量，在左邊欄選擇變量（variables），選擇新建

選擇類型-》常理

配置變量-》填入你的跟蹤 ID 便可

2）ga-page 值

主要說下自定義的 JavaScript，你須要建立一個匿名函數，返回你須要的值便可

拿 www.smartisan.com/t2/#/overvi… 這個網址作例，我這裏返回的就是 t2/overview，你能夠根據本身的須要返回任何值

4、 可能的問題

tagmanager 解決單頁面 pv 的問題大體就如上，下面記錄一些已知問題

一、發送的 pv 標題錯誤：因爲觸發條件爲【歷史記錄更改】，會致使單頁面標題還未改變，就已經發送了 pv，因此每每本次 pv 的標題仍是上個頁面的。

目前我想到的解決方法比較傻，就是每次發送 pv 的代碼（tags）都選擇【自定義 javascript】，在代碼了 setTimeout 延遲大概 200ms 而後發送 pv，這時候標題已經切換爲新的了。可是這樣有個問題，【自定義 javascript】每次觸發都會忘頁面的 body 後邊加入一個想 標籤，目前看來雖然沒有什麼大的傷害，但老是不夠優雅。

個人我的網站