Enhanced eCommerce
This sandbox will let you test out your Google Tag Manager knowledge in a safe place, without having to constnatly set up your own testing environments. Or, worse, doing it live.We want to track completed purchases into Google Analytics using the Enhanced eCommerce structure.
In most cases a purchase occurs on a separate page rather than as an AJAX event, but both are possible options. One a completed purchase...
AJAX: If the URL stays the same, ask the developer to fire a dataLayer event using the success callback function. For demo purposes, this is what you'd wrap around your code on this sandbox website to do that:
document.addEventListener('dg.success', function() { ... });- Thank You Page: If the URL changes, we would ask the developer to fire a dataLayer event on page load on the thank you page.
| # | Product | Price |
|---|---|---|
| 3 | Pen, Blue | $1.50 |
| 1 | Banana | $0.50 |
| 2 | Jellybean | $0.10 |
| Coupon (COOLYYZ) | -$5.00 | |
| Delivery | $5.00 | |
| Subtotal | $5.20 | |
| Tax (13%) | $0.65 | |
| Total | $5.85 |
Client / Developer Task
We want to push transaction data into the dataLayer so that we can track it across various marketing platforms.
Refer to this document for addtional guidance around the dataLayer code: Simo Ahava's eCommerce Guide for Google Tag Manager
Acceptance Criteria:
- The dataLayer code provided below is fired on a successful purchase.
- The values must all be replaced with real values.
dataLayer.push({
'event': 'eec.purchase',
'ecommerce': {
'currencyCode': 'CAD',
'purchase': {
'actionField': {
'id': 'olkij-adsasd-asds',
'revenue': '11.53',
'tax':'1.33',
'shipping': '5.00',
'coupon': 'COOLYYZ'
},
'products': [
{
'name': 'Pen',
'id': 'DG-918974',
'price': '1.50',
'brand': 'Delta Growth',
'category': 'Stationery/Pens',
'variant': 'Blue',
'quantity': 3,
'coupon': 'COOLYYZ'
},
{
'name': 'Banana',
'id': 'DG-895726',
'price': '0.50',
'brand': 'Delta Growth',
'category': 'Grocery/Fruit',
'quantity': 1,
'coupon': 'COOLYYZ'
},
{
'name': 'Jellybean',
'id': 'DG-814346',
'price': '0.10',
'brand': 'Delta Growth',
'category': 'Grocery/Snacks',
'quantity': 2,
'coupon': 'COOLYYZ'
},
]
}
}
});
Explanation
WIP
Developers
AJAX and Thank You page style form submissions differ somewhat in tracking. AJAX forms don't change the URL on submission, while Thank You page style forms do. These are tracked differently and widely depend on your CMS and plugins.
AJAX: Almost all forms use Success Callbacks (or more accurately Success Events since they use new Event() and document.dispatchEvent()) these days. The first set of code below uses an example of this based on my custom code, but is reflective of what most modern success callbacks look like.
Any CRM or form tool worth using has this functionality built in and easy to implement.
- Thank You: There's a page on the site called "Thank You," and you need to add your code to that page. One consideration is that this code must appear below the Google Tag Manager initialization snippet, otherwise it will not work.
Note: When we're tracking form submissions what we really want to track is a successful action. If a user tries to submit a contact form, etc and it fails for some reason, we don't want to track it.
AJAX Style
document
.addEventListener('dg.success', function() {
dataLayer.push({
'event': 'eec.purchase',
'ecommerce': {
'currencyCode': 'CAD',
'purchase': {
'actionField': {
'id': 'olkij-adsasd-asds',
'revenue': '11.53',
'tax':'1.33',
'shipping': '5.00',
'coupon': 'COOLYYZ'
},
'products': [
{
'name': 'Pen',
'id': 'DG-918974',
'price': '1.50',
'brand': 'Delta Growth',
'category': 'Stationery/Pens',
'variant': 'Blue',
'quantity': 3,
'coupon': 'COOLYYZ'
},
{
'name': 'Banana',
'id': 'DG-895726',
'price': '0.50',
'brand': 'Delta Growth',
'category': 'Grocery/Fruit',
'quantity': 1,
'coupon': 'COOLYYZ'
},
{
'name': 'Jellybean',
'id': 'DG-814346',
'price': '0.10',
'brand': 'Delta Growth',
'category': 'Grocery/Snacks',
'quantity': 2,
'coupon': 'COOLYYZ'
},
]
}
}
});
});
Or, Code to Add to Thank You Page
dataLayer.push({
'event': 'eec.purchase',
'ecommerce': {
'currencyCode': 'CAD',
'purchase': {
'actionField': {
'id': 'olkij-adsasd-asds',
'revenue': '11.53',
'tax':'1.33',
'shipping': '5.00',
'coupon': 'COOLYYZ'
},
'products': [
{
'name': 'Pen',
'id': 'DG-918974',
'price': '1.50',
'brand': 'Delta Growth',
'category': 'Stationery/Pens',
'variant': 'Blue',
'quantity': 3,
'coupon': 'COOLYYZ'
},
{
'name': 'Banana',
'id': 'DG-895726',
'price': '0.50',
'brand': 'Delta Growth',
'category': 'Grocery/Fruit',
'quantity': 1,
'coupon': 'COOLYYZ'
},
{
'name': 'Jellybean',
'id': 'DG-814346',
'price': '0.10',
'brand': 'Delta Growth',
'category': 'Grocery/Snacks',
'quantity': 2,
'coupon': 'COOLYYZ'
},
]
}
}
});