Search code examples
javascriptgoogle-tag-managergoogle-datalayer

GTM dataLayer.push isn't working if sent straight before or after gtm initialisation

I want to send some data to GTM as soon as possible. I tried to call the dataLayer.push before the tag initialisation, after it and inside an initialisation script. All the 3 ways failed.

<head>
...

// Version 1
<script defer>
    if (!navigator.isServer) {
        var MIXPANEL_PROXY_DOMAIN = 'https://#mixpanelProxyDomain#.crexi.com';
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l !== 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.type = 'text/javascript';
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '#gtmAccountId#');

        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'partyTownEnabled': true,
            event: 'Partytown_ready'
        });
    }
</script>

// Version 2
<script defer>
    if (!navigator.isServer) {
        window.dataLayer = window.dataLayer || [];
        window.dataLayer.push({
            'partyTownEnabled': true,
            event: 'Partytown_ready'
        });
        var MIXPANEL_PROXY_DOMAIN = 'https://#mixpanelProxyDomain#.crexi.com';
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l !== 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.type = 'text/javascript';
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '#gtmAccountId#');

    }
</script>

// Version 3
<script defer>
    if (!navigator.isServer) {
        var MIXPANEL_PROXY_DOMAIN = 'https://#mixpanelProxyDomain#.crexi.com';
        (function (w, d, s, l, i) {
            w[l] = w[l] || [];
            w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' });
            w[l].push({
              'partyTownEnabled': true,
              event: 'Partytown_ready'
            });
            var f = d.getElementsByTagName(s)[0],
                j = d.createElement(s),
                dl = l !== 'dataLayer' ? '&l=' + l : '';
            j.async = true;
            j.type = 'text/javascript';
            j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
            f.parentNode.insertBefore(j, f);
        })(window, document, 'script', 'dataLayer', '#gtmAccountId#');
    }
</script>

...
</head>

The partyTownEnabled variable exists. The custom event trigger for Partytown_ready exists. The tag is bound to the Partytown_ready trigger. Removing defer/async does nothing.

When I am running it from the Google dev tools console like this dataLayer.push({ 'partyTownEnabled': true, event: 'Partytown_ready' }); it is working as expected. I thought gtm is designed so to pick up all the predefined dataLayer elements before monkey patching it but it seems not working

Solution

  • It seems there is an issue with a partytown library and GTM integration. https://github.com/BuilderIO/partytown/issues/596

    Closing this question as a partytown bug.