Search code examples
javascriptarraysobserver-patternkey-value-observinggoogle-tag-manager

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.


Solution

  • 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_()