Understanding traffic of your commerce channel is extremely important in unifying you branding strategy, marketing strategy and personalised content strategy.
In this article we will go through step by step instructions to integrate Google analytics and Google tag manager in order to enable these insights in SaaS default themes.
Prerequisites:
<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 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 |