目录

  • 采用gtag.js对浏览器web端的支持

  • 对electron客户端的支持

  • 桌面客户端与web端的结合

  • userId的启用

  • GTM收集点击事件

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

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

探秘Google Analytics_java

  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管理页面中的媒体资源一栏有  如何使用新建，具体可以参考官方文档设置自定义维度，这里不多赘述。  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'
  });
复制代码

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

userId的启用

  1. 为什么要使用

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

  1. 怎么操作

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

探秘Google Analytics_java_03

  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。 探秘Google Analytics_java_04 如上图，我在页面上点击了5次，有三次点击了带有data-ga的Button按钮，结果也就是命中了三次，说明你的GTM操作没有问题。 探秘Google Analytics_java_05 我们在回到ga的页面上，就会发现刚刚的点击事件已经传递到了ga上  到此，这个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点击',
    });
  }
})
复制代码

参考资料

  • 官方文档

  • Google Analytics on site that uses file://

  • 如何通过在页面元素添加ga-data跟踪用户行为