Created
September 29, 2018 01:35
-
-
Save hayes0724/949b9780db50f0bbe61e3347e7f3ef58 to your computer and use it in GitHub Desktop.
BigCommerce - GA Enhanced Ecommerce Tracking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script type="text/javascript"> | |
window.dataLayer = window.dataLayer||[]; | |
function trackGTMEcommerce() { | |
this._addTrans = addTrans; | |
this._addItem = addItems; | |
this._trackTrans = trackTrans; | |
} | |
var transaction = {}; | |
transaction.transactionProducts = []; | |
function addTrans(orderID, store, total, tax, shipping, city, state, country) { | |
transaction.transactionId = orderID; | |
transaction.transactionAffiliation = store; | |
transaction.transactionTotal = total; | |
transaction.transactionTax = tax; | |
transaction.transactionShipping = shipping; | |
} | |
function addItems(orderID, sku, product, variation, price, quantity) { | |
transaction.transactionProducts.push({ | |
'id': orderID, | |
'sku': sku, | |
'name': product, | |
'category': variation, | |
'price': price, | |
'quantity': quantity | |
}); | |
} | |
function trackTrans() { | |
transaction.event = 'transactionSuccess'; | |
dataLayer.push(transaction); | |
} | |
var pageTracker = new trackGTMEcommerce(); | |
</script> | |
<script> | |
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ | |
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), | |
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) | |
})(window,document,'script','//www.google-analytics.com/analytics.js','ga'); | |
/* Check for product page - change to reflect current class/id */ | |
var productPage = document.querySelectorAll('body.page-type-product').length > 0; | |
var checkout = window.location.pathname === '/checkout'; | |
/* Replace with tracker info */ | |
ga('create', 'UA-XXXXXXXX-1', 'mywebsite.com'); | |
ga('require', 'ec'); | |
if (!checkout && !productPage) { | |
ga('send', 'pageview'); | |
} | |
/* Checkout */ | |
if (checkout) { | |
/* get the current cart contents */ | |
const Http = new XMLHttpRequest(); | |
const url='/api/storefront/carts'; | |
Http.open("GET", url); | |
Http.send(); | |
Http.onreadystatechange=(e)=>{ | |
if (Http.readyState === 4) { | |
var response = JSON.parse(Http.responseText); | |
var cart = response[0].lineItems.physicalItems; | |
for(var i = 0; i < cart.length; i++) { | |
var product = cart[i]; | |
ga('ec:addProduct', { | |
'id': product.productId, | |
'name': product.name, | |
'price': product.salePrice, | |
'quantity': product.quantity | |
}); | |
} | |
ga('ec:setAction','checkout', {'step': 1}); | |
ga('send', 'pageview'); | |
} | |
} | |
(e)=>{ | |
console.log(Http.responseText); | |
} | |
window.addEventListener("click", function(event){ | |
var id = event.target.id; | |
if (id === 'checkout-customer-continue' ) { | |
ga('ec:setAction','checkout', {'step': 2}); | |
ga('send', 'pageview'); | |
} | |
if (id === 'checkout-shipping-continue') { | |
ga('ec:setAction','checkout', {'step': 3}); | |
ga('send', 'pageview'); | |
} | |
if (id === 'checkout-billing-continue') { | |
ga('ec:setAction','checkout', {'step': 4}); | |
ga('send', 'pageview'); | |
} | |
if (id === 'checkout-payment-continue') { | |
ga('ec:setAction','checkout', {'step': 5}); | |
ga('send', 'pageview'); | |
} | |
}); | |
} | |
/* product Page */ | |
if (productPage) { | |
ga('ec:addProduct', { | |
'id': juitem_pid, | |
'name': juitem_nm | |
}); | |
ga('ec:setAction', 'detail'); | |
ga('send', 'pageview'); | |
/* add to cart event - form-action-addToCart */ | |
document.getElementById("form-action-addToCart").addEventListener("click", function(){ | |
ga('ec:addProduct', { | |
'id': juitem_pid, | |
'name': juitem_nm, | |
'price': juitem_pr, | |
'quantity': document.getElementById('qty[]').value | |
}); | |
ga('ec:setAction', 'add'); | |
ga('send', 'event', 'Product', 'click', 'add to cart'); | |
}); | |
} | |
function trackEcommerce() { | |
this._addTrans = addTrans; | |
this._addItem = addItems; | |
this._trackTrans = trackTrans; | |
} | |
function addTrans(orderID,store,total,tax,shipping,city,state,country) { | |
ga('ec:setAction', 'purchase', { | |
'id': orderID, | |
'affiliation': store, | |
'revenue': total, | |
'tax': tax, | |
'shipping': shipping, | |
'city': city, | |
'state': state, | |
'country': country | |
}); | |
} | |
function addItems(orderID,sku,product,variation,price,qty) { | |
ga('ec:addProduct', { | |
'id': orderID, | |
'sku': sku, | |
'name': product, | |
'category': variation, | |
'price': price, | |
'quantity': qty | |
}); | |
} | |
function trackTrans() { | |
ga('send', 'pageview'); | |
} | |
var pageTracker = new trackEcommerce(); | |
</script> |
Anyone guide me how can I implmented it?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
How to impement it ??