Event listener for dataLayer push events on Tag Manager JS

I want to add a custom script that integrates into an existing Tag Manager dataLayer on a page. I need this script to be notified about new dataLayer pushes. So whenever something on the page uses window.dataLayer.push, my script should be informed about this.

Is there a way to add a custom dataLayer event listener to the Google Script API?

I am looking for something like

google_tag_manager.dataLayer.onPush(callback);

google_tag_manager.dataLayer.subscribers seems to list how many dataLayer subscribers there are - but how can I add my own?

JavaScript has a Proxy object with which you can set traps whenever an operation is executed on an object. Arrays are also objects and can be used with proxies.

When calling the push method on an array, a new value will be set to the array. So setting a trap for the set method should allow us to add behavior to the push method.

In the trap, create a CustomEvent event and dispatch it. You can name this event anything you want. Whenever a value has been added to the dataLayer array, an event will be emitted. You can listen from every file to this event to act on whenever a value is added to the dataLayer array.

With Reflect we can make sure that the original behavior of the push method is restored while keeping the added behavior.

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'
});