Skip to content
Advertisement

What is the pattern used by Google Tag Manager in order to observe de `dataLayer` Array?

I observed the dataLayer array and I don’t see any changes to push. No custom methods at all, actually. How is GTM observing the changes to the array? As far as I know, changes to an Array don’t throw any events, do they?

Edit:

I did some more research and found Google’s library for interacting with the dataLayer: https://github.com/google/data-layer-helper#listening-for-messages
I’ll take a look at the code and maybe even answer my own question if I understand the inner workings.

Advertisement

Answer

Pattern used by GTM is publish / subscriber

Some details in code that helps to recognize it: line 76 and 181 of the https://github.com/google/data-layer-helper/blob/master/src/helper/helper.js

And finally line 114 and 119

// Add listener for future state changes.
  var oldPush = dataLayer.push;
  var that = this;
  dataLayer.push = function() {
    var states = [].slice.call(arguments, 0);
    var result = oldPush.apply(dataLayer, states);
    that.processStates_(states);
    return result;
  };

Take a look into states variable and how it is passed to this.processStates_()

Advertisement