Thanks to Claudia Kosny & Carmen Mardiros for help with this script!
Note: GTM currently does not support custom dataLayer naming conventions for ecommerce.
If the client is unwilling to replace the Qubit universal dataLayer with a GTM dataLayer then the following options can be used:
https://qubit.auth0.com/login?state=O7YwZHPyozofEhRXsFRkcnIsOMhu5sX4&client=LuJX5yJ7dmknlbW6LXoPhBn3R1dqPaKn&protocol=oauth2&response_type=code&redirect_uri=http%3A%2F%2Fdocs.qubit.com%2Fcallback%3Fret%3D%252Fuv%252Fparameters%252Ftransaction.html%26sig%3D8otjJ8y8tPkL%252FVn8CTqLKcmyDbKu%252FV5yMoqoiRVpVUk%253D
<!– Qubit universal variable with GTM ecommerce –>
<script type=”text/javascript”>
//<!–
window.universal_variable = window.universal_variable ? window.universal_variable : {};
window.universal_variable = {
“version”: “1.1.1”,
“page”: {
“type”: “confirmation“, // Use this one for trigger
“category”: “Checkout Confirmation” // Do not use this field
},
“transaction”: {
“order_id”: “HSS012546“,
“date”: “2014-01-01T23:59:59.999Z“,
“currency”: “GBP“,
“subtotal”: 110.00,
“subtotal_include_tax”: true,
“tax”: 18.33, // 110 * (1-(100%/120%))
“shipping_cost”: 10.00,
“total”: 110.00,
“shipping_method”: “1st Class Royal Mail”,
“voucher”: “MYVOUCHER1“, // Same as dataLayer.transactionCoupon
“voucher_discount”: 100.00, // (£100 * -50%) * 2 items
“payment_type”: “Visa“,
“line_items”: [{
“product”: {
“name”: “Sparkly Shoes“,
“sku_code”: “0987654321“,
“manufacturer”: “The Shoe Co”,
“category”: “Shoe“,
“subcategory”: “Heels”,
“color”: “Black”,
“stock”: 3,
“size”: “6”,
“unit_price”: 100,
“unit_sale_price”: 50,// includes tax
“voucher”: “MYVOUCHER50”
},
“quantity”: 1
}, {
“product”: {
“name”: “Red Dress“,
“sku_code”: “0987654321“,
“manufacturer”: “The Dress Co”,
“category”: “Dresses“,
“subcategory”: “Red dresses”,
“color”: “Red”,
“stock”: 3,
“size”: “6”,
“unit_price”: 100,
“unit_sale_price”: 50,// includes tax
“voucher”: “MYVOUCHER50”
},
“quantity”: 1
}],
“user”: {
“user.id”: “12134124”,
“returning”: true
}
}
}
//–>
</script>
<!– customHTML on {{js_window.universal_variable.page.type}}=(confirmation| Checkout Confirmation) AND event=gtm.dom ready –>
<script>
// ——— Map Qubit >> ENHANCED gtm ecommerce ——- //
var eCommProductsENHANCED = [],
currProductENHANCED, i, ii;
for (i = 0, ii = window.universal_variable.transaction.line_items.length; i < ii; i += 1) {
currProductENHANCED = window.universal_variable.transaction.line_items[i];
eCommProductsENHANCED.push({
‘id’: currProductENHANCED.product.sku_code, // SKU
‘sku’: currProductENHANCED.product.sku_code, // SKU
‘name’: currProductENHANCED.product.name,
‘category’: currProductENHANCED.product.category,
‘brand’: currProductENHANCED.product.manufacturer,
‘variant’: currProductENHANCED.product.size, // also color or subcategory possible
‘coupon’: currProductENHANCED.product.promo_code,
‘price’: currProductENHANCED.product.unit_sale_price,
‘quantity’: currProductENHANCED.quantity
});
}
// Now declare Ecommerce payment dataLayer variables
window.dataLayer = window.dataLayer || [];
dataLayer.push({
‘ecommerce’: {
‘currencyCode’: window.universal_variable.transaction.currency,
‘purchase’: { // detail > add > checkout >>> purchase | refund
‘actionField’: {
‘step’: ‘6’, // 1-6
‘option’: ‘complete’, // checkout > login > delivery > billing > payments > complete
‘id’: window.universal_variable.transaction.order_id,
‘affiliation’: window.universal_variable.transaction.promo_code,
‘revenue’: window.universal_variable.transaction.total,
‘tax’: window.universal_variable.transaction.tax,
‘shipping’: window.universal_variable.transaction.shipping_cost,
‘shippingMethod’: window.universal_variable.transaction.shipping_method,
‘date’: window.universal_variable.transaction.date, // optional
‘coupon’: window.universal_variable.transaction.promo_code,
‘couponDiscount’: window.universal_variable.transaction.promo_discount,
‘paymentType’: window.universal_variable.transaction.payment_type,
‘subTotalIncludeTax’: window.universal_variable.transaction.subtotal_include_tax
},
‘products’: eCommProductsENHANCED // Trigger Transaction Loop array above
}
}
});
// ——— Map Qubit >> LEGACY gtm ecommerce ——- //
var eCommProducts = [],
currProduct, i, ii;
for (i = 0, ii = window.universal_variable.transaction.line_items.length; i < ii; i += 1) {
currProduct = window.universal_variable.transaction.line_items[i];
eCommProducts.push({
‘id’ : window.universal_variable.transaction.order_id,
‘name’ : currProduct.product.name,
‘sku’ : currProduct.product.sku_code,
‘category’ : currProduct.product.category,
‘price’ : currProduct.product.unit_sale_price,
‘quantity’ : currProduct.quantity
});
}
// Now declare Ecommerce payment dataLayer variables
window.dataLayer = window.dataLayer || []; // PP – Safeguard ADDED
dataLayer.push({
‘transactionId’: window.universal_variable.transaction.order_id,
‘transactionAffiliation’: window.universal_variable.transaction.promo_code,
‘transactionTotal’: window.universal_variable.transaction.total,
‘transactionTax’: window.universal_variable.transaction.tax,
‘transactionShipping’: window.universal_variable.transaction.shipping_cost,
‘transaction_currency’: window.universal_variable.transaction.currency,
‘transactionProducts’: eCommProducts // Trigger Transaction Loop array above
});
// Send Transaction
dataLayer.push({‘event’: ‘donewith_qubitmapped_enhanced_transaction’});
</script>
Then add this JS variable macro:
Which is called in this rule here:
Which is called here in the above customHTML tag:
Help files:
- https://productforums.google.com/forum/#!msg/tag-manager/_pcSeOzWJsw/JwTiM6Ij1NUJ
- https://developers.google.com/tag-manager/devguide#renaming
- https://github.com/qubitproducts/UniversalVariable#transaction
Notes:
- GTM is much better for Adwords remarketing than Qubit
- GTM now supports write and a hack can be used for Tag dependencies using event daisy-chaining.
- JS variables can be used to turn Qubit variables into {{macros}} in GTM.
- For Qubit ecommerce arrays I am hoping that GTM ecommerce template adds macro support in 2014-Q3. Then the mapping can be done natively without using customHTML 🙂