How To Handle Multiple dataLayers for Google Tag Manager

Why You Might Have Multiple Data Layers

The main reason you might have multiple data layers is that you have multiple Google Tag Managers on your website that are using separate dataLayers in the GTM code. This is normally due to one of the Tag Managers attempting to set up a custom dataLayer where they have set up custom logic. This would most likely be something like a website provider who runs multiple domains for different business in the same industry.

Signs You Might Have Multiple Data Layers

If you are finding that some native GTM Triggers are not populating (like only Link Clicks populate, but regular clicks are not populating or vice-versa), you should inspect the GTMs on the website and see if any of them have renamed the dataLayer. If this is the case, you can follow the solution below to overwrite this situation.

How To Handle Multiple DataLayers

The easiest way that I’ve found to handle multiple data layers is to overwrite the .push() for the extra dataLayer, where you will map it to your regular dataLayer. This will take any events that come in to the target dataLayer, it will then pass it over to the dataLayer of your choosing.

Mapping Multiple Data Layers To The Same Data Layer

If you find there are multiple data Layers being used, and you’d like to consolidate them into a single dataLayer, you can follow the logic below:

1. Copy The Following Code

<script>
    var arguments = (arguments||[]); 
    var DataLayer = (window.DataLayer||[]); 
    Object.defineProperty(DataLayer, "push", { 
        configurable: true, 
        enumerable: false, 
        writable: true, 
        // Previous values based on Object.getOwnPropertyDescriptor(Array.prototype, "push") 
        value: function (args) { 
            var result = Array.prototype.push.apply(this, args); 
            // Original push() implementation based on https://github.com/vuejs/vue/blob/f2b476d4f4f685d84b4957e6c805740597945cde/src/core/observer/array.js and https://github.com/vuejs/vue/blob/daed1e73557d57df244ad8d46c9afff7208c9a2d/src/core/util/lang.js 
            window.dataLayer = (window.dataLayer||[]); 
            var newVals = []; 
            Object.keys(args).forEach(function(key, ind) { 
                if(key === 'event'){ 
                args[key] = args[key]; 
                } 
            }) 
            window.dataLayer.push(args); 
            return result; 
            // Original push() implementation 
        } 
    }) 
</script>

2. Create A Custom HTML With An Initialization Trigger

You will want to create a custom HTML Tag where you will paste the code above. You can also add a trigger for All Pages or Initialization

3. Update Your Target DataLayer

You will update the “var DataLayer” where your window.DataLayer will be the DataLayer you are copying from

Example, if you wanted to push events from a custom dataLayer called “companyDataLayer”, you’d update the code to say:

var DataLayer = (window.companyDataLayer||[])

4. Update Your Receiving DataLayer

If you are not pushing to the regular dataLayer, update the window.dataLayer to your dataLayer name.

Summary

Realistically, you should attempt to resolve this issue of different dataLayers by consolidating Google Tag Managers or by updating all dataLayers to use the same name. If you cannot do that for whatever reason, you can attempt the above at your own risk and any usage should be heavily tested to make sure it isn’t affecting anything it should not.