...
- Login to Google Analytics account
- Open property > Property view > Ecommerce settings and click enable Ecommerce and save changes
- Login to Admin app and navigate to CMS section
- Search for "footer_include" and add the below code (click expand button to view) to all CMS body element for all languages. If the include does not exists create one using
URI patternTextbox Body SHOPCODE_footer_include - Save the content and clear cache
- Visit your site
- Open "Tag Assistant" extension, click "enable" and click "start recording"
- Go to the page and try to go through the checkout process
Note that it may take up to 24h for the event to appear in google analytics- Check tags in the extension, click "Check contained tags" to load data layer, click data layer tab
For versions up to
| Label | ||
|---|---|---|
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<script>
/* https://developers.google.com/analytics/devguides/collection/gtagjs/enhanced-ecommerce */
/* Home page includes browsing, search and product viewing */
if (ctx.page.indexOf('HomePage') != -1) {
try {
var _href = window.location.pathname;
if (_href.indexOf('?') != -1) {
_href = _href.substring(0, _href.indexOf('?')); // cut away query string
}
var _parts = _href.substr(ctx.root.length).split('/');
_loc = ctx.root;
var _view = 'category';
var _cat = 'x';
var _uri = '';
var _list = 'Browse';
var _dim = '';
for (var i = 0; i < _parts.length; i++) {
var _part = _parts[i];
if (_part == 'product' && (i+1 < _parts.length)) {
_view = 'product';
_uri = _parts[i+1];
i++;
break;
}
if (_part == 'sku' && (i+1 < _parts.length)) {
_view = 'sku';
_uri = _parts[i+1];
i++;
break;
}
if (_part == 'category' && (i+1 < _parts.length)) {
_uri = _parts[i+1];
_cat = _uri;
_dim = _uri;
i++;
}
if (_part == 'query' && (i+1 < _parts.length)) {
_list = 'Search';
_dim += 'query:' + decodeURIComponent(_parts[i+1]);
i++;
}
if (_part == 'tag' && (i+1 < _parts.length)) {
_list = 'Search';
_dim += 'tag:' + decodeURIComponent(_parts[i+1]);
i++;
}
if (_part == 'brand' && (i+1 < _parts.length)) {
_list = 'Search';
_dim += 'brand:' + decodeURIComponent(_parts[i+1]);
i++;
}
}
/* Record page views on page render */
if (_view == 'product' || _view == 'sku') {
var _elp = jQuery('.js-ga-ecommerce-product');
var _code = _elp.data('sku');
var _name = _elp.data('name');
var _brand = _elp.data('brand');
var _fc = _elp.data('fc');
var _elpp = _elp.find('.js-buy-panel .js-ga-ecommerce-price');
var _price = _elpp.length > 0 ? _elpp.data('price') : '0.00';
gtag('event', 'view_item', { // Provide product details
'items': [
{
'id': _code,
'name': _name,
'list_name': _list,
'brand': _brand,
'category': _cat + (_dim != '' ? ':' + _dim : ''),
'variant': _fc,
'list_position': 1,
'quantity': 1,
'price': _price
}
],
'event_label': 'pdp: View'
});
/* Bind buy buttons */
_elp.find('.js-buy').click(function() {
var _el = jQuery(this);
var _sku = _el.data('sku');
var _qty = _el.data('qty');
var _fc = _el.data('fc');
var _elpp = _elp.closest('.js-buy-panel').find('.js-ga-ecommerce-price');
var _price = _elpp.length > 0 ? _elpp.data('price') : '0.00';
gtag('event', 'add_to_cart', {
"items": [
{
'id': _sku,
'name': _name,
'list_name': _list,
'brand': _brand,
'category': _cat + (_dim != '' ? ':' + _dim : ''),
'variant': _fc,
'list_position': 1,
'quantity': _qty ? _qty : 1,
'price': _price
}
],
'event_label': 'pdp: Add x'
});
});
} else {
var _itemsImpr = [];
jQuery('.js-ga-ecommerce-product-pod').each(function(_cnt, _value) {
var _item = jQuery(_value);
var _sku = _item.data('sku');
var _name = _item.data('name');
var _price = _item.find('.js-ga-ecommerce-price').data('price');
var _qty = '1';
var _fc = _item.data('fc');
var _brand = _item.data('brand');
_itemsImpr.push({
'id': _sku,
'name': _name,
'list_name': _list,
'brand': _brand,
'category': _cat + (_dim != '' ? ':' + _dim : ''),
'variant': _fc,
'list_position': _cnt + 1,
'quantity': _qty,
'price': _price
});
_item.find('.js-buy').data('pos', _cnt + 1).click(function() {
var _el = jQuery(this);
var _sku = _el.data('sku');
var _qty = _el.data('qty');
var _fc = _el.data('fc');
var _pos = _el.data('pos');
gtag('event', 'add_to_cart', {
'items': [
{
'id': _sku,
'name': _name,
'list_name': _list,
'brand': _brand,
'category': _cat + (_dim != '' ? ':' + _dim : ''),
'variant': _fc,
'list_position': _pos,
'quantity': _qty ? _qty : 1,
'price': _price
}
],
'event_label': 'list: Add x'
});
});
});
// Product impressions
if (_itemsImpr.length > 0) {
gtag('event', 'view_item_list', {
"items": _itemsImpr,
'event_label': 'list: View'
});
}
}
} catch(e) {
log('Error initialising GA for HomePage', e);
}
}
/* Cart page, checkout step 0 */
if (ctx.page.indexOf('ShoppingCartPage') != -1) {
try {
var _cart = jQuery('.js-ga-ecommerce-cart-total .js-ga-ecommerce-price').data('price');
if (!_cart) {
_cart = '0.00';
}
var _items = [];
jQuery('.js-ga-ecommerce-cart-item').each(function(_cnt, _value) {
var _item = jQuery(_value);
var _sku = _item.data('sku');
var _name = _item.data('name');
var _price = _item.data('price');
var _qty = _item.data('qty');
var _fc = _item.data('fc');
var _brand = _item.data('brand');
_items.push({
'id': _sku,
'name': _name,
'list_name': 'Cart',
'brand': _brand,
//'category': 'zzzz',
'variant': _fc,
'list_position': _cnt + 1,
'quantity': _qty,
'price': _price
});
_item.find('.js-qty-update').data('pos', _cnt + 1).click(function() {
var _newQty = _item.find('.js-qty-value').val();
var _newQtyN = Number(_newQty);
var _qtyN = Number(_qty);
var _pos = jQuery(this).data('pos');
if (_newQtyN > _qtyN) {
gtag('event', 'add_to_cart', {
'items': [
{
'id': _sku,
'name': _name,
'list_name': 'Cart',
'brand': _brand,
//'category': 'zzzz',
'variant': _fc,
'list_position': _pos,
'quantity': _newQtyN - _qtyN,
'price': _price
}
],
'event_label': 'cart: Add X'
});
} else if (_newQtyN < _qtyN) {
gtag('event', 'remove_from_cart', {
'items': [
{
'id': _sku,
'name': _name,
'list_name': 'Cart',
'brand': _brand,
//'category': 'zzzz',
'variant': _fc,
'list_position': _pos,
'quantity': _qtyN - _newQtyN,
'price': _price
}
],
'event_label': 'cart: Remove X'
});
}
});
_item.find('.js-cart-remove').data('pos', _cnt + 1).click(function() {
try {
var _pos = jQuery(this).data('pos');
gtag('event', 'remove_from_cart', {
'items': [
{
'id': _sku,
'name': _name,
'list_name': 'Cart',
'brand': _brand,
// 'category': 'zzzzz',
'variant': _fc,
'list_position': _pos,
'quantity': _qty,
'price': _price
}
],
'event_label': 'cart: Remove all'
});
} catch(e) {
log('Error executing GA event', e);
}
});
});
var _coupons = jQuery('.js-ga-ecommerce-applied-coupon').data('coupon');
gtag('event', 'begin_checkout', { // track checkout steps
'items': _items,
'coupon': _coupons,
'event_label': 'cart'
});
} catch(e) {
log('Error initialising GA for ShoppingCartPage', e);
}
}
/* Checkout pages */
if (ctx.page.indexOf('CheckoutPage') != -1) {
try {
function getStepParameterByName( name ){
var regexS = "[\\?&]"+name+"=([^&#]*)",
regex = new RegExp( regexS ),
results = regex.exec( window.location.search );
if( results == null ){
return 'address';
} else{
return decodeURIComponent(results[1].replace(/\+/g, " "));
}
}
var _stepnum = 0;
var _stepopt = '';
var _step = getStepParameterByName('step');
var _loginf = jQuery('form.js-login-form');
if (_loginf.length > 0) {
_stepnum = 0;
_step = 'login';
// Login button
var _loginf = jQuery('.js-login-submit');
if (_loginf.length > 0) {
_loginf.click(function() {
try {
gtag('event', 'login', {
'method' : 'customer'
});
gtag('event', 'checkout_progress', { // track checkout steps
'checkout_step': _stepnum,
'event_label': _step + ': customer'
});
} catch(e) {
log('Error executing GA event', e);
}
})
}
// Guest registration button
var _guestf = jQuery('.js-guest-submit');
if (_guestf.length > 0) {
_guestf.click(function () {
try {
gtag('event', 'login', {
'method' : 'guest'
});
gtag('event', 'checkout_progress', { // track checkout steps
'checkout_step': _stepnum,
'event_label': _step + ': guest'
});
} catch(e) {
log('Error executing GA event', e);
}
});
}
// Registration button
var _regf = jQuery('.js-register-submit');
if (_regf.length > 0) {
_regf.click(function () {
try {
gtag('event', 'login', { method : 'registration' });
} catch(e) {
log('Error executing GA event', e);
}
form.submit();
});
}
} else if (_step == 'address') {
_stepnum = 1;
} else if (_step == 'ship') {
_stepnum = 2;
_stepopt = jQuery('.js-checkout-shipping').find('input[name=\'shippingmethod\']:checked').parent().find('span:first').html();
} else if (_step == 'payment') {
_stepnum = 3;
_stepopt = jQuery('.js-checkout-pg').find('input[name=\'pg\']:checked').parent().find('span:first').html();
var _elp = jQuery('#paymentDiv');
if (_elp.length > 0) {
_elp.closest('form').submit(function() {
try {
var _el = jQuery('.js-ga-ecommerce-order');
var _tx = _el.data('ordernum');
var _rev = _el.data('orderrev');
var _shp = _el.data('ordershp');
var _tax = _el.data('ordertax');
var _curr = _el.data('currency');
var _items = [];
var _itemsCnt = 1;
jQuery('.js-ga-ecommerce-cart-item').each(function() {
var _item = jQuery(this);
var _sku = _item.data('sku');
var _name = _item.data('name');
var _price = _item.data('price');
var _qty = _item.data('qty');
var _fc = _item.data('fc');
var _brand = _item.data('brand');
_items.push({
'id': _sku,
'name': _name,
'list_name': 'Cart',
'brand': _brand,
//'category': 'zzzz',
'variant': _fc,
'list_position': _itemsCnt++,
'quantity': _qty,
'price': _price
});
});
gtag('event', 'purchase', {
'transaction_id': _tx,
'affiliation': null,
'value': _rev,
'currency': _curr,
'tax': _tax,
'shipping': _shp,
'items': _items,
'event_label': 'confirm'
});
} catch(e) {
log('Error executing GA event', e);
}
});
}
}
if ((_stepnum == 2 || _stepnum == 3) && _stepopt) {
gtag('event', 'checkout_progress', { // track checkout steps
'checkout_step': _stepnum,
'event_label': _step + ': ' + _stepopt
});
gtag('event', 'set_checkout_option', { // track checkout steps options for shipping and payment
'checkout_step': _stepnum,
'checkout_option': _step,
'value': _stepopt,
'event_label': _step + ': ' + _stepopt
});
} else {
gtag('event', 'checkout_progress', { // track checkout steps
'checkout_step': _stepnum,
'event_label': _step
});
}
} catch(e) {
log('Error initialising GA for CheckoutPage', e);
}
}
/* Login/Registration pages */
if (ctx.page.indexOf('LoginPage') != -1) {
try {
// Login button
var _loginf = jQuery('.js-login-submit');
if (_loginf.length > 0) {
_loginf.click(function() {
try {
gtag('event', 'login', { method : 'customer' });
} catch(e) {
log('Error executing GA event', e);
}
})
}
// Registration button
var _regf = jQuery('.js-register-submit');
if (_regf.length > 0) {
_regf.click(function () {
try {
gtag('event', 'login', { method : 'registration' });
} catch(e) {
log('Error executing GA event', e);
}
form.submit();
});
}
} catch(e) {
log('Error initialising GA for LoginPage', e);
}
}
</script> |
Provided script support In version
| Label | ||
|---|---|---|
|
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<script>
ctx.objects.gtag.initialize();
</script> |
Provided script supports the following events:
| Page | Event | Event label | Event structure | Comments | |||||
|---|---|---|---|---|---|---|---|---|---|
| Login page | login |
| tracks clicks of '.js-login-submit' | ||||||
| login |
| tracks clicks of '.js-register-submit' | |||||||
| Category and Search pages | view_item_list | list: View |
| tracks product impressions | |||||
| add_to_cart | list: Add x |
| add to cart events triggered by '.js-buy' buttons | ||||||
| Product details page | view_item | pdp: View |
| tracks product views | |||||
| add_to_cart | pdp: Add x |
| add to cart events triggered by '.js-buy' buttons | ||||||
| Cart page | add_to_cart | cart: Add X |
| add to cart events triggered by quantity updates | |||||
| remove_from_cart | cart: Remove X / cart: Remove all |
| remove from cart event triggered by quantity updates | ||||||
| begin_checkout | cart |
| tracks beginning of the checkout process | ||||||
| Checkout page | login + checkout_progress | login: customer |
| tracks clicks of '.js-login-submit' | |||||
| login + checkout_progress | login: registration |
| tracks clicks of '.js-register-submit' | ||||||
| login + checkout_progress | login: guest |
| tracks clicks of '.js-guest-submit' | ||||||
| checkout_progress + set_checkout_option | ship: "shipping method name" | tracks shipping method selections | |||||||
| checkout_progress + set_checkout_option | payment: "payment method name" | tracks payment method selections | |||||||
| purchase | confirm |
| tracks clicking payment button |