When does data get sent to google after dataLayer.push

Question

I have a single page ecommerce application and need to setup the google ecommerce funnel. My application sets the funnel steps in the Tag Manager dataLayer

Nothing in the documentation indicates when the datalayer is actually sent to Google Tag Manager.

window.dataLayer starts the page with:

  event: 'checkout',
  ecommerce: {
    checkout: { actionField: {step: 1, option: 'Checkout Options'}}
  }

on the first button click

$(document).one('click','#button-payment-address', function () {
        window.dataLayer.push({
            'event': 'checkout',
            'ecommerce': {
                'checkout': {
                    'actionField': {
                        'step': 2,
                        'option': 'Billing Details'
                    }
                }
            }
        });
}); 

The dataLayer becomes:

event: 'checkout',
ecommerce: {
    checkout: { actionField: {step: 2, option: 'Billing Details'}}
}

On the second button

$(document).one('click', "#button-shipping-address",  function(){
        window.dataLayer.push({
            'event': 'checkout',
            'ecommerce': {
                 'checkout': {
                    'actionField': {
                       'step': 3,
                       'option': 'Delivery Details'
                    }
                }
            }
        }); 
        console.log(window.dataLayer);
}); 

The dataLayer becomes:

  event: 'checkout',
  ecommerce: {
    checkout: { actionField: {step: 3, option: 'Delivery Details'}}
  }

And so on...

When does the dataLayer get sent or is there a way to force a send, reinitialize the dataLayer and then push the next step?

UPDATE: I was looking under Firefox DevTools/network/XHR for the traffic and could not find any. Looking under DevTools/network/images shows the data being posted on each click.

Answer 1

Adding data to the dataLayer does not send it anywhere. It just makes the data available in a structured fashion from within GTM. Whenever you push a key named "event" to the dataLayer, GTM scans the dataLayer structure and updates its internal data model with the changed or added values.

This creates basically a namespace for your variables. Variables can be overwritten, so you need to make sure that you do not re-use an existing name and accidentally assign a new value to a variable, and so on, every time you create a new JS variable. If instead you add data to the dataLayer, then you have just to take care that you do not have a second dataLayer variable.

Having said that, your case is somewhat different. What you have is a special data structure for Google Universal Analytics Enhanced E-Commerce. At least one of of your Google Analytics pageview or event tags should be configured to have enhanced e-commerce enabled, with the setting that pulls the data from the datalayer.

If you don't have tags in GTM, then the data will not be sent at all.