探秘Google Analytics

·  阅读 1731

作者:徐海强

目录

  • 采用gtag.js对浏览器web端的支持
  • 对electron客户端的支持
  • 桌面客户端与web端的结合
  • userId的启用
  • GTM收集点击事件

晓黑板pc客户端是一个集web端与桌面客户端端一体的项目,客户端采用了electron技术栈,两者是同一份代码。为采集一些数据,我们采取使用了google analytics(简称ga)的埋点方案。下面就是我们项目对于ga的一些使用方案的研究。

首先查看官网,提供了三种方案,调研发现,第三种应用和网站结合在一起不满足我们的需求,所以我们选择前两种,首先对比一下这两个方案:

1.png

  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进行注入

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  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默认是对浏览器做了一下限制
  • 向ga发送请求的主机需要http或https协议
  • 主机必须支持在浏览器的cookies中存储client ID
  • 主机必须能够传递url给ga

解释:electron客户端采取的是file:///协议,cookie无法使用,传递的url路径不正确,而且我们发现gtag.js 并没有提供禁用cookie的api,而analytics.js是提供的。而且采用gtag的方案默认在window上不仅仅挂载了gtag对象,也将ga对象挂载了上去。为此我们确定了我们的方案就是

  • 在桌面端采取ga的方案来进行埋点
  • 在浏览器web端采取了gtag的方案来进行埋点

下面就是具体的一些操作:

  // 将cookie中存储的的clientId转移到了localStorage中
  const gaKey = 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);
  const re = /(.*)\/entry/;
  // ps:location这步按需要是否进行替换,并不影响埋点
  const location = document.location.href.replace(re, 'https://xxx.xiaoheiban.cn/entry');
  window.ga('send', 'pageview', {
    location
  });
复制代码

桌面客户端与web端的结合

之前我们这边采取了web端一套GAID,客户端一套GAID,但是这其实对统计并不太友好。为此我们调研之后将两者结合在了一起,采用同一个GAID。方案采用google analytics的自定义维度。 在ga管理页面中的媒体资源一栏有 2.png 如何使用新建,具体可以参考官方文档设置自定义维度,这里不多赘述。 3.png 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'
  });
复制代码

定义了上面的方法之后,我们怎么使用呢?这里以受众群体菜单中的概览为例,点击概览,默认是只有一个细分维度为所有用户,我们点击添加细分即可。 4.png 如上,保存即可,再次添加type_os === 'eb'的客户端。 5.png 勾选上面两个复选框,那页面就已经展现出来你想要的效果 6.png 你会发现为什么web端人数+客户端人数会大于100%呢,其实我们测试时,有些用户是web端和客户端都在使用。

userId的启用

  1. 为什么要使用

ga给我们提供了userId的识别,ga默认是用clientId来进行计算上报,但是这也就意味着用户换浏览器,换电脑,系统会记录多次会话。为此,为了可以达到跨多台设备或多次会话识别唯一身份用户的功能,可以获得更准确的用户数据,从而更好地反映真实情况。

  1. 怎么操作

进入ga中的管理页面,新增视图中将显示UserId报告开启即可

7.png

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

GTM收集点击事件

  1. 什么是GTM

Google Tag Manager中文名叫谷歌代码管理系统,简称GTM,是一个帮助我们简单快速的在网站和APP上添加代码的工具

  1. 为什么要使用GTM
  • 使用这个工具可以非常简单的添加代码,不需要每次再找技术去做,可以极大的简化我们的工作和提高工作效率。
  • 使用GTM在一定程度上也可以提高我们的网站速度。因为GTM是一步加载的,可以加载更快。
  • 方便我们管理多种代码和多个网站,除了部署代码简单外,看起来也很清晰,方便修改。
  1. 案例

这边我们使用dom绑定data-ga来收集点击事件 例如:<div data-ga="1001">测试</div> 具体可以先参考这篇文章一步一步来即可 以上案例中的代码我们将其更改为

// 其中的{{element}} 其实就是你点击上的dom元素
function() {
	var elem = {{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.ga
      break;
    }
  }
  return result;
}
复制代码

可以看到上面的代码用个最大三次的循环查找,这是为了应对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。 8.png 如上图,我在页面上点击了5次,有三次点击了带有data-ga的Button按钮,结果也就是命中了三次,说明你的GTM操作没有问题。 9.png 我们在回到ga的页面上,就会发现刚刚的点击事件已经传递到了ga上 10.png 到此,这个demo就已经结束了。但是GTM的功能远不只于此,非常强大的功能,各位有兴趣的可以探索。

  1. 模拟

上面的GTM绑定dom的事件接收,用ga的api也是可以代替的,我这边模拟一下。

const isEB = window.navigator.userAgent.match(/electron/i);
window.addEventListener('click', (event) => {
let node = event.target as HTMLElement;
  let i = 0;
  // 想上找三层
  while (node && i < 3) {
    if (!(node.dataset && node.dataset.ga)) {
      node = node.parentNode as HTMLElement;
      ++i;
    } else {
      break;
    }
  }
  const id = node?.dataset?.ga;
  if(isEB) {
    window.ga('send', 'event', '测试ga点击', '测试ga');
  } else {
    window.gtag('event', '测试ga', {
      event_category: '测试ga点击',
    });
  }
})
复制代码

参考资料

分类:
前端
标签: