Angular 9项目中各页面跳转时无法向data layer推送数据如何解决

Angular属于单页应用(SPA)，常规路由跳转不会触发全局页面重载，因此GTM默认绑定的页面加载触发规则仅会在首次进入/强制刷新页面时生效，路由切换时不会自动执行数据推送。

方案1：全局路由事件监听（推荐，无需每个页面单独编码） #

• 第一步：在src/app/app.component.ts中添加全局路由监听逻辑，所有路由跳转完成后自动推送数据到dataLayer
  代码示例：

  import { Component, OnInit } from '@angular/core';
  import { Router, NavigationEnd } from '@angular/router';
  import { filter } from 'rxjs/operators';
  
  // 声明全局dataLayer变量避免TS报错
  declare global {
    interface Window {
      dataLayer: any[];
    }
  }
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit {
    constructor(private router: Router) {}
  
    ngOnInit(): void {
      // 兜底初始化dataLayer，避免GTM加载未完成时报错
      window.dataLayer = window.dataLayer || [];
      // 监听路由跳转完成事件
      this.router.events.pipe(
        filter(event => event instanceof NavigationEnd)
      ).subscribe((event: NavigationEnd) => {
        // 推送页面浏览事件到dataLayer，可根据业务需要自定义字段
        window.dataLayer.push({
          event: 'page_view',
          page_path: event.urlAfterRedirects,
          page_title: document.title
          // 可额外添加自定义维度，比如用户ID、页面分类等
        });
      });
    }
  }
  

• 第二步：在GTM后台配置对应触发规则，新增自定义事件触发，事件名称填page_view，绑定到你需要的统计标签即可。

方案2：单页面NgOnInit中单独推送（适合需要自定义每个页面特殊参数的场景） #

• 在需要推送数据的页面组件的ngOnInit生命周期中手动调用dataLayer推送
  代码示例：

  // 全局dataLayer类型声明建议统一放到typings.d.ts中，避免每个组件重复声明
  ngOnInit(): void {
    window.dataLayer = window.dataLayer || [];
    window.dataLayer.push({
      event: 'page_view',
      page_path: '/current-page-path',
      page_title: '当前页面标题',
      custom_param: '当前页面的自定义参数' // 仅当前页面需要的特殊参数
    });
  }
  

• 确保index.html中添加的GTM代码片段在<head>标签最顶部，避免dataLayer初始化晚于推送逻辑导致数据丢失
• 不要重复初始化dataLayer，避免清空之前已推送的缓存数据
• 可以用浏览器控制台输入dataLayer查看每次路由跳转后是否有新的事件被推入，验证配置是否生效

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