Google Tag Manager Multiple Enhanced eCommerce Events

Question

I'm new to GTM and I'm having trouble trying to submit 2 enhanced ecommerce events in the dataLayer. Only the last event seems to be getting sent when I check on Google Analytics.

I've come across http://www.simoahava.com/analytics/ecommerce-tips-google-tag-manager/ which, just before the summary, seems to sum up what I've said regarding it only submitting the last one.

    dataLayer.push({
        'event': 'addToCart',
        'ecommerce': {
            'currencyCode': 'GBP',
            'add': {
                'products': dataLayerProducts
            }
        }
    });
    dataLayer.push({
        'event': 'checkout',
        'ecommerce': {
            'checkout': {
                'actionField': {'step': 1},
                'products': dataLayerProducts
            }
        }
    });

Only the checkout will be registered with Analytics. I've tried things like the following:

    dataLayer = [{
        'event': 'checkout',
        'event': 'addToCart',
        'ecommerce': {
            'add': {
                'products': dataLayerProducts
            },
            'checkout': {
                'actionField': {'step': 1},
                'products': dataLayerProducts
            }
        }
    }];

and

    dataLayer = [{
        'event': 'addToCart',
        'ecommerce': {
            'add': {
                'products': dataLayerProducts
            },
        }
    }, {
        'event': 'checkout',
        'ecommerce': {
            'checkout': {
                'actionField': {'step': 1},
                'products': dataLayerProducts
            }
        }
    }];

But I've had no luck doing it like that either. If it just isn't possible, any helpful workarounds would be much appreciated.

UPDATE WITH NEW CODE: Still only sending the last event (checkout). Code appears immediately after the opening <body> tag.

<script>
dataLayer = [];
dataLayerProducts = [];
dataLayerProducts.push({
    'name': 'Product Name',
    'id': 'SKU',
    'price': '29.95',
    'brand': 'Brand',
    'category': 'Some/Category',
    'quantity': 1
});
dataLayer.push({
    'event': 'addToCart',
    'ecommerce': {
        'add': {
            'products': dataLayerProducts
        },
    }
});
dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
        'checkout': {
            'actionField': {'step': 1},
            'products': dataLayerProducts
        }
    }
});
</script>
<!-- Google Tag Manager -->
// Code
<!-- End Google Tag Manager -->

nyuen nyuen · Accepted Answer · 2016-10-03T14:07:50

To trigger a tag to fire, you need to have an event, whether that event is either from a previous push or a current one, so that's why it's always a good practice to push an event along with the data points you want to send into GA. Simo's example illustrates this perfectly. But since the dataLayer also persists key:value pairs, it will always use the latest event it sees. If you have more than one event pushed at the same time, then the last one pushed in overwrites previous ones. That's why you can't have multiple events in a single dataLayer.push and expect all your associated tags to fire.

What you need to do it follow Simo's example and push each data set/object into the dataLayer, along with an event of its own. Pushing to the dataLayer (dataLayer.push), rather than declaring them as in your examples, allows the built-in listener to pick up on those specific data points.

Edit: modifying OP's code as an example:

dataLayer.push({
   'event': 'addToCart',
   'ecommerce': {
      'add': {
         'products': // dataLayerProducts, one object per product
      },
   }
});
dataLayer.push({
   'event': 'checkout',
   'ecommerce': {
      'checkout': {
         'actionField': {'step': 1},
         'products': // dataLayerProducts, one object per product
      }
   }
});

Google Tag Manager Multiple Enhanced eCommerce Events

1 Answers