How to dataLayer.push using GTM Custom Templates?

Question

I have GTM Custom HTML tag that intercepts dataLayer.push called on the page, checks it for Ecommerce and if it is detected send Ecommerce data to remarketing pixels.

Now I'm trying to wrap this tag in a GTM Custom Template. To do this I need to make a dataLayer.push from my GTM Custom Template.

I studied the official documentation:
https://developers.google.com/tag-manager/templates/api#createqueue

There is an example of dataLayer.push method using GTM Sandbox JavaScript:

const dataLayerPush = createQueue('dataLayer');
dataLayerPush({'event': 'test_push'});

But if I run the code from the example, I get this result:

dataLayer
(6) [{…}, {…}, lj, {…}, {…}, {…}, push: ƒ]
0: {pageType: "main"}
1: {gtm.start: 1570440507302, event: "gtm.js", gtm.uniqueEventId: 2172}
2: lj
fi:
event: "test_push"
gtm.uniqueEventId: 7689
__proto__: Object
__proto__: Object
3: {event: "gtm.dom", gtm.uniqueEventId: 13084}
4: {event: "productImpression", ecommerce: {…}, gtm.uniqueEventId: 18479}
5: {event: "gtm.load", gtm.uniqueEventId: 24517}
push: ƒ ()
length: 6
__proto__: Array(0)

As you can see dataLayer[2] is not my push.

What is 'lj'?
What is 'fi'?

If I try to create another global array with a different name (not 'dataLayer') everything works correctly:

const newDataLayerPush = createQueue('newDataLayer');
newDataLayerPush ({'event': 'test_push'});

Output:

[{…}]
0: {event: "test_push"}
length: 1
__proto__: Array(0)

How can I send push to dataLayer using GTM Custom Templates?

Answer 1

For a dataLayer push you can use a custom HTML template and trigger it via page view then add the below code

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

Answer 2

Tl;dr:

You'll see this occur in most templates in the Template Gallery. The official Google Documentation has nothing to say about it. However, in my tests, this small change in structure (nesting your pushes in randomly-named sub-objects) does not affect GTM's ability to pick up on the event names. So you should be able to use them as they are.

Detailed response

Even though you see nesting within the dataLayer object, this doesn't translate to nesting within GTM's data model.

To test this, consider the following setup:

1. A custom HTML tag that pushes a nested object to the dataLayer

 <script> var dataLayer = window.dataLayer || []; dataLayer.push({lv:{bl:{event:'test'}}}); </script>

2. A Tag Template that pushes a simple event to the dataLayer

 const dataLayerPush = require('createQueue')('dataLayer'); dataLayerPush({event:'test'}); data.gtmOnSuccess();

These 2, when fired, will produce seemingly identical results. Check the linked image for details. Test Events pushed by the Tag Template (1) and Custom HTML Tag (2)

However, if you set up a Custom Event Trigger that listens for 'test' event names, only the one created by the Tag Template will fire. You can also see that the one created by the Tag Template also has a gtm.uniqueEventId key-value pair. The objects are not the same, and they are not treated the same way.

You can try to debug further by using the dataLayer helper , if that's doable for you.

Hope this helps the next person to stumble upon this. I know I needed it.