1.5k Views inGoogle Analytic 教學

探秘Google Analytics

blank

探秘Google Analytics

作者：徐海強

目錄

  • 採用gtag.js對瀏覽器web端的支持
  • 對electron客戶端的支持
  • 桌面客戶端與web端的結合
  • userId的啟用
  • GTM收集點擊事件

曉黑板pc客戶端是一個集web端與桌面客戶端端一體的項目，客戶端採用了electron技術棧，兩者是同一份代碼。為採集一些數據，我們採取使用了google analytics（簡稱ga）的埋點方案。下面就是我們項目對於ga的一些使用方案的研究。

首先查看官網，提供了三種方案，調研發現，第三種应用和网站結合在一起不滿足我們的需求，所以我們選擇前兩種，首先對比一下這兩個方案:

blank

  1. 簡而言之，gtag.js 是analytics.js 的升級版。
  2. 官網上面說： analytics.js 使用跟踪器將數據發送給GA，並使用匹配類型指定數據的類型。而gtag.js不使用跟踪器向GA發送數據，是用config這個指令設置的的trackingID去標示GA的資源。舉個代碼例子來更清晰的說明：比如發送頁面瀏覽數據
// analytics.js ga ( 'create' , 'UA-12345678-1' , 'auto' ); ga ( 'send' , 'pageview' ); // gtag.js gtag ( 'config' , 'UA-12345678-1' );

因此我們採取了gtag.js的方案來進行埋點收集按照官網我們將js進行注入

<!--Globalsitetag(gtag.js)-GoogleAnalytics--><scriptasyncsrc="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script><script>window.dataLayer=window.dataLayer||[];functiongtag(){dataLayer.push(arguments);}gtag('js',newDate());gtag('config','GA_MEASUREMENT_ID');</script>

那當然我們也可以動態js來創建script標籤，最後進行insert dom即可。

採用gtag.js對瀏覽器web端的支持

我們是單頁面應用，用的是hash路由，由此在hashchange中調用此方法

window.gtag('config',GA_MEASUREMENT_ID,{page_path:path,});

對electron客戶端的支持

  1. ga默認是對瀏覽器做了一下限制
  2. 向ga發送請求的主機需要http或https協議
  3. 主機必須支持在瀏覽器的cookies中存儲client ID
  4. 主機必須能夠傳遞url給ga解釋：electron客戶端採取的是file:///協議，cookie無法使用，傳遞的url路徑不正確，而且我們發現gtag.js並沒有提供禁用cookie的api，而analytics. js是提供的。而且採用gtag的方案默認在window上不僅僅掛載了gtag對象，也將ga對象掛載了上去。為此我們確定了我們的方案就是
  5. 在桌面端採取ga的方案來進行埋點
  6. 在瀏覽器web端採取了gtag的方案來進行埋點

下面就是具體的一些操作：

//將cookie中存儲的的clientId轉移到了localStorage中constgaKey=window.localStorage.getItem(GA_LOCAL_STORAGE_KEY);if(!gaKey){window.localStorage.setItem(GA_LOCAL_STORAGE_KEY,window.ga?.getAll()?.[0].get('clientId'));}window.ga('create',GA_MEASUREMENT_ID,{storage:'none',clientId:gaKey});//設置path，並發送正確路徑window.ga('set','checkProtocolTask',null);// newpath是路徑，我們這裡是hash值window.ga('set','page',newPath);constre=/(.*)/entry/;// ps：location這步按需要是否進行替換，並不影響埋點constlocation=document.location.href.replace(re,'https://xxx.xiaoheiban.cn/entry');window.ga('send','pageview',{location});

桌面客戶端與web端的結合

之前我們這邊採取了web端一套GAID，客戶端一套GAID，但是這其實對統計並不太友好。為此我們調研之後將兩者結合在了一起，採用同一個GAID。方案採用google analytics的自定義維度。在ga管理頁面中的媒體資源一欄有

blank

如何使用新建，具體可以參考官方文檔設置自定義維度，這裡不多贅述。

blank

ga這邊維度是以索引來進行命中的

// 客户端window . ga ( 'set' , 'dimension1' , 'eb' ); // dimension1 中的1 代表这上图的索引，eb也就是你传入的值// web端window . gtag ( 'set' , { custom_map : { dimension1 : 'type_os' // 这里的type_os 和图片是无关的，只是为了和下面的config中的type_os 相对应。 } }); window . gtag ( 'config' , ID , { page_path : newPath , type_os : 'web' });

定義了上面的方法之後，我們怎麼使用呢？這里以受众群体菜單中的概览為例，點擊概覽，默認是只有一個細分維度為所有用戶，我們點擊添加細分即可。

blank

如上，保存即可，再次添加type_os === 'eb'的客戶端。

blank

勾選上面兩個複選框，那頁面就已經展現出來你想要的效果

blank

你會發現為什麼web端人數+客戶端人數會大於100%呢，其實我們測試時，有些用戶是web端和客戶端都在使用。

userId的啟用

  1. 為什麼要使用ga給我們提供了userId的識別，ga默認是用clientId來進行計算上報，但是這也就意味著用戶換瀏覽器，換電腦，系統會記錄多次會話。為此，為了可以達到跨多台設備或多次會話識別唯一身份用戶的功能，可以獲得更準確的用戶數據，從而更好地反映真實情況。
  2. 怎麼操作進入ga中的管理頁面，新增視圖中將顯示UserId報告開啟即可

blank

  1. 代碼操作
// 客户端
window.ga('set','userId',userId);// web端
window.gtag('set',{user_id:userId});

GTM收集點擊事件

  1. 什麼是GTM Google Tag Manager中文名叫谷歌代碼管理系統，簡稱GTM，是一個幫助我們簡單快速的在網站和APP上添加代碼的工具
  2. 為什麼要使用GTM
  3. 使用這個工具可以非常簡單的添加代碼，不需要每次再找技術去做，可以極大的簡化我們的工作和提高工作效率。
  4. 使用GTM在一定程度上也可以提高我們的網站速度。因為GTM是一步加載的，可以加載更快。
  5. 方便我們管理多種代碼和多個網站，除了部署代碼簡單外，看起來也很清晰，方便修改。
  6. 案例這邊我們使用dom綁定data-ga來收集點擊事件例如： <div data-ga="1001">测试</div>具體可以先參考這篇文章一步一步來即可以上案例中的代碼我們將其更改為
//其中的{{element}}其實就是你點擊上的dom元素function(){varelem={{element}},i=0,result=null;while(elem&&i<3){if(!(elem.dataset&&elem.dataset.ga)){elem=elem.parentNode;++i;}else{result=elem.dataset&&elem.dataset.gabreak;}}returnresult;}

可以看到上面的代碼用個最大三次的循環查找，這是為了應對antd的一些組件，以Button為例，可以發現我如果點擊测试字上，其只是一個span，並沒有綁定data-ga 。

<Button data-ga='1001'>测试</Button> // 渲染在页面上的dom节点为<button data-ga="1001" type="button" class="ant-btn" ant-click-animating-without-extra-node="false"> <span>测试</span> </button>

如果你已經將上述操作完成，並且將初始代碼埋入你的頁面，接下來就行運用GTM的debug進行調試。點擊預覽進入頁面，輸入需要debug的地址，點擊start。

blank

如上圖，我在頁面上點擊了5次，有三次點擊了帶有data-ga的Button按鈕，結果也就是命中了三次，說明你的GTM操作沒有問題。

blank

我們在回到ga的頁面上，就會發現剛剛的點擊事件已經傳遞到了ga上

blank

到此，這個demo就已經結束了。但是GTM的功能遠不只於此，非常強大的功能，各位有興趣的可以探索。

  1. 模擬

上面的GTM綁定dom的事件接收，用ga的api也是可以代替的，我這邊模擬一下。

constisEB=window.navigator.userAgent.match(/electron/i);window.addEventListener('click',(event)=>{letnode=event.targetasHTMLElement;leti=0;//想上找三層while(node&&i<3){if(!(node.dataset&&node.dataset.ga)){node=node.parentNodeasHTMLElement;++i;}else{break;}}constid=node?.dataset?.ga;if(isEB){window.ga('send','event','測試ga點擊','測試ga');}else{window.gtag('event','測試ga',{event_category:'測試ga點擊',});}})

參考資料

What do you think?

0 Points
Upvote Downvote

Browse and manage your votes from your Member Profile Page

Written by marketer

blank

新版Google Analytics 4 (GA4) 的4 大核心優勢（含如何更新GA4教學）
blank

獨立站運營必備神器——Google Analytics設置過程詳解