跟踪代码管理器 JS 上数据层推送事件的事件侦听器

Question

我想添加一个集成到页面上现有跟踪代码管理器数据层的自定义脚本。我需要这个脚本来通知新的数据层推送。因此，每当页面上的某些内容使用 时window.dataLayer.push，我的脚本都应该被告知这一点。

有没有办法将自定义 dataLayer 事件侦听器添加到 Google Script API？

我正在寻找类似的东西

google_tag_manager.dataLayer.onPush(callback);

google_tag_manager.dataLayer.subscribers似乎列出了有多少个 dataLayer 订阅者 - 但我如何添加自己的订阅者？

Answer 1

JavaScript 有一个Proxy对象，每当对对象执行操作时，您都可以使用该对象设置陷阱。数组也是对象，可以与代理一起使用。

当对push数组调用该方法时，一个新值将被添加set到该数组中。因此，为该方法设置陷阱set应该允许我们向该方法添加行为push。

在陷阱中，创建一个CustomEvent事件并调度它。您可以将此事件命名为任何您想要的名称。每当一个值被添加到dataLayer数组中时，就会发出一个事件。您可以从每个文件监听此事件，以便在将值添加到数组时执行操作dataLayer。

我们Reflect可以确保push在保留添加的行为的同时恢复该方法的原始行为。

window.dataLayer = window.dataLayer || new Proxy([], {
  set: (obj, prop, value) => {  
    if (prop !== 'length') {
      const pushEvent = new CustomEvent('datalayerpush', {
        detail: value
      });

      window.dispatchEvent(pushEvent);
    }
    
    return Reflect.set(obj, prop, value);
  }
});

window.addEventListener('datalayerpush', event => {
  console.log(`Value pushed to dataLayer: ${JSON.stringify(event.detail, null, 2)}`);
});

window.dataLayer.push({
  event: 'test'
});