Angular项目中如何向Google Tag Manager发送页面浏览事件

步骤1：替换页面埋点脚本 #

移除之前index.html中直接引入的Google Analytics原生gtag脚本，替换为你Google Tag Manager后台提供的安装脚本，分别对应粘贴到index.html的<head>标签顶部、<body>标签起始位置即可。

步骤2：修改app.component.ts中的触发逻辑 #

不再直接调用gtag接口，改为将页面浏览事件推送到GTM监听的dataLayer队列，修改后代码如下：

declare var dataLayer: any[];
...
constructor(private router: Router) {
  const navEndEvents = this.router.events.pipe(
    filter((event) => event instanceof NavigationEnd)
  );
  navEndEvents.subscribe((event: NavigationEnd) => {
    dataLayer.push({
      event: 'spa_page_view', // 自定义事件名，后续GTM配置会用到
      page_path: event.urlAfterRedirects,
      page_title: event.urlAfterRedirects
    });
  })
}

步骤3：GTM后台配置 #

• 首先创建两个「数据层变量」，分别提取page_path、page_title两个参数的值
• 创建GA4配置标签，填写你的GA4媒体资源ID，字段设置中关联刚才创建的page_path、page_title变量
• 创建自定义触发规则，触发条件为事件名等于你代码中定义的spa_page_view，将该触发规则绑定到刚才的GA4配置标签/GA4页面浏览标签上
• 注意关闭GTM默认的「所有页面」页面浏览触发规则，避免首屏重复上报页面浏览事件
• 配置完成后先用GTM预览模式验证事件上报正常，再发布GTM容器版本生效

内容的提问来源于stack exchange，提问作者NeNaD