Advanced: Tracking variables and events

Advanced Javascript coders who intend to create or customize a tracking code for a Shopgate mobile shop should refer to this article. For basic information on how to convert and embed an existing tracking code, read Embedding a custom tracking code.

Get started

The Shopgate custom tracking code system is a Javascript-based system with 150+ pre-defined variables for tracking various customer behaviors of a Shopgate mobile app and website.

Here is a tracking code example customized with Shopgate Variables (highlighted in yellow):

// Facebook Tracking Code for Conversion Rate

var cart_items_amount_net = sgData.order.amount.net - sgData.order.shipping.amount.net - sgData.order.payment.amount.net;

(function() {
 var _fbq = window._fbq || (window._fbq = []);
 if (!_fbq.loaded) {
 var fbds = document.createElement('script');
 fbds.async = true;
 fbds.src = '//connect.facebook.net/en_US/fbds.js';
 var s = document.getElementsByTagName('script')[0];
 s.parentNode.insertBefore(fbds, s);
 _fbq.loaded = true;
 }
})();
window._fbq = window._fbq || [];
window._fbq.push(['track', 'xxxx_your_id_xxxx', {'value':cart_items_amount_net,'currency': sgData.order.amount.currency}]);

In this example, the Shopgate variables used are:

Click here for a complete list of available variables with details.

Available platforms and pages

Some of the Shopgate variables are made available on all pages, while more of our variables are designed for a specific page only. All variables can be used on both the mobile website and native apps.

For example:

• sgData.device: available on every page of your apps and mobile site.
• sgData.cart.products[].uid: available only on the Shopping cart page of your apps and mobile site.

In the table below, you can see all the available platforms and pages. Refer to this table for a list of variables that are available for a page.

How to embed a custom tracking code at Shopgate

1. Log in to your Shopgate Admin and navigate to Settings → Tracking Tools.
2. Locate the Tracking codes section, select a platform and a page to display the code, and click +Add.
   
   
   
   
3. An empty script editor will open. Simply type or paste your tracking code here and click Save.
   
   Use keyboard shortcut CTRL+Space to show a list of variables available on this page.
   
   That's it! Now you know how to embed a custom tracking code. Repeat the steps to enter another code.

The Tracking Variables

In this chapter, you will find all the details about the pre-defined tracking variables.

Tracking Events

Apart from the tracking variables mentioned above, we have also pre-defined four tracking events for you.

An example written in jQuery

$(document).on('sgAddToCart', function(e) {
console.log(e.originalEvent.detail);
});

An example written in Vanilla JS

document.addEventListener('sgAddToCart', function(e) {
console.log(e.detail);
});

In the examples, event "sgAddToCart" is used to monitor useful information after the Add To Cart button from a specific product has been clicked.

To see the details of all the available events, refer to the table below:

Frequently Asked Questions

Why isn't code in <noscript> tags necessary?

Your code snippet inside the <noscript>...</noscript> tags is used as a fallback in case Javascript is not available. However, Javascript is required in ALL Shopgate systems. Therefore, you do not need to provide any <noscript> fallback code.

How do I avoid using a duplicate tracking code?

Your Shopgate tracking code system is designed to execute all tracking codes, including those that are entered more than once on the same page of a platform. Tracking codes set up for "all pages" will be processed in addition to any page-specific tracking codes. Therefore it is recommended to check your tracking codes carefully by asking yourself the following questions:

• Did I enter or paste a code snippet more than once?
• If I have more than one entry for a page on the same platform, did I enter or paste the same tracking function in more than one entry?
• If I have a tracking code set up for "All pages," did I remove this tracking code from all other entries?

How do I create a tracking pixel?

To create or modify a tracking pixel, refer to the example below. To append parameters such as user email, phone number, etc. to your pixel, use "?" and the available variables (highlighted in yellow):

var image = document.createElement('img');
image.height = '1';
image.width = '1';
image.style = 'border-style:none;';
imgtag.alt = '';
image.src = 'http://yourdomain.com/pixel.png?email='+sgData.user.email+'&phone='+sgData.user.phone;
document.getElementsByTagName('body')[0].appendChild(image);

Click here for a complete list of available variables.

*Only available for Connect when a Classic Checkout is used.