使用 gtm 代理来配置事件

2024-07-10, 星期三|

这篇文章是写给我们自己的，用于配置 ga 代理的设置教程。

GA 代理

这里的 ga 指代 google analytics, 统计服务。

代理什么

大家知道 google gtm container 在配置好了以后，需要在网站中安装该服务的脚本。

<!-- Google Tag Manager -->

其脚本源地址形如

'https://www.googletagmanager.com/gtm.js?id='+i+dl;

而我们建立了自己的域名到 googletagmanager 的映射。因此域名替换为

'https://ga.stats.ijklh.com/t/gtm.js?id='+i+dl;

替换后，解决了 gtm 跟踪脚本有时会被屏蔽的问题。

为什么要使用代理

恐 gtm 和 ga 的脚本不能在某些地区被正常访问，且存在被某些广告或防追踪插件屏蔽的可能。

GTM 的配置

自定义事件

事件名在 ga 中由 gtm 的 Tag 来定义。

Tag_temp_login

定义 trigger

自定义事件，类型是 Custom Event。

gtm 的 trigger 定义了前端代码中的事件 login 与发送到 ga 的事件名 temp_login 之映射，其中的前端代码部分。

Trig_temp_login

前端代码

stats({ 'event': 'login' });

属性名是 'event'。stats() 即

export const stats = (obj) => {
  window.dataLayer && window.dataLayer.push(obj);
}

简单属性型

Trigger

TRIG_btn

Trig_btn

条件设置为 btnName 变量名匹配正则 .+ 时，即变量 VAR_dataset.btnName 的值不为空。

定义变量 VAR_dataset.btnName

是通过自定义的 JavaScript

function(){
  var el = {{Click Element}}.closest('[data-btn-name]');
  if (el) {
    return el.dataset['btnName'];
  }
  return '';
}

VAR_dataset.btnName

类型为 Custom JavaScript

在前端代码中配置变量

为 Button 设置 data-btn-name 属性

data-btn-name="download-zhihu"

通过为 Button 组件配置 data-btn-name 属性，就能指定点击该按钮时，所发出的事件名了，在本例中，事件名为 download-zhihu。

原因在于我们在 gtm 中配置了相应的 Tag TAG_btn_click, 发送给 ga 的事件名为变量 {{VAR_dataset.btnName}}，正好是所绑定在 Button 组件上的属性对应的值。如下图

定义 Tag

定义了 TAG_btn_click。

TAG_btn_click

以上，实现了 GTM 配置的自定义事件类型和简单属性自动配置类型，二者之区别在于自定义事件需要每次为对应的事件配置一个 Tag，而简单属性型则是使用变量加绑定前端属性来动态发送对应的事件名。后者只需要在 gtm 中管理配置一次，以后就只需要设置前端的代码，而不需要频繁地改动 gtm 配置。

关于本文如您有任何想法和意见，欢迎与我们联系，邮箱地址zhi@uqugu.com。