Guide on how to configured BOLD Cashier to work with Google Tag Manager for Shopify by Niddocks, this integration supports the enhanced ecommerce data layer and cross domain tracking.
The configuration requires the Google Tag Manager for Shopify app by Niddocks to be installed along with enhanced ecommerce tracking (Niddocks will provide this configuration free of charge for all users of the app)
In BOLD Cashier:-
Enter your GTM Container ID in the section below
Leave the Google Analytics Tracking ID Scripts box empty
Enable Custom Script and paste in the code below
var orderId = BOLD.order.id; var lastChargedLineItems = BOLD.order.line_items; window.dataLayer = window.dataLayer || []; var transactionProducts = []; var taxPrice = BOLD.order.total_tax / 100; var subtotalPrice = BOLD.order.subtotal / 100; var totalPrice = BOLD.order.total / 100; var shippingTotal = BOLD.order.total_shipping / 100; for (var i = 0; i < lastChargedLineItems.length; i++) { var item = lastChargedLineItems[i]; var itempriceactual = item.price / 100 transactionProducts.push({ 'id': item.sku, 'name': item.title, 'price': item.price / 100, 'quantity': item.quantity, }); } if (transactionProducts.length > 0) { window.dataLayer.push({ 'event': 'TransactionComplete', 'transactionTotal': parseFloat(totalPrice), 'ecommerce': { 'purchase': { 'actionField': { 'id': orderId, // Transaction ID. Required for purchases and refunds. 'affiliation': 'Online Store', 'revenue': parseFloat(totalPrice), // Total transaction value (incl. tax and shipping) 'tax': parseFloat(taxPrice), 'shipping': parseFloat(shippingTotal), 'coupon': '' }, 'products': transactionProducts } } }); }
Once the above is complete, click on "Save"
In Google Tag Manager:-
Create a new Custom JavaScript variable with the name gaClientId, insert the code below into the Custom JavaScript box and click "Save"
function (){ var checkoutURL = document.location.host.includes("checkout"); if (checkoutURL) { var x = document.referrer; var splitArray = x.split("-"); var splitArrayLength = splitArray.length - 1; var endPart = splitArray[splitArrayLength]; var finalClientId = endPart.split('&'); return finalClientId[0]; } }
Edit the Google Analytics Settings variable
In the "Fields to Set" section, add Field Names clientId and allowLinker and set the value of clientId to {{gaClientId}} and allowLinker to true as shown below
In the "Cross Domain Tracking" > "Auto Link Domains" add a comma separated list of all of the domains that you wish to track (normally this will be your main store domain and the domain of the checkout system) - once all of those fields have been set, click on "Save"
Publish your Google Tag Manager container and carry out a test order to check that all is working correctly, we recommend that you use UTM tracking parameters to test this by adding ?utm_source=test&utm_medium=test&utm_campaign=test to the end of your store URL in your browser for the test so that you can check that correct source attribution is working.