Overview

This page contains a guide to integrate Add to Cart on product page.

• Add to Cart on Product Page for version 1.4
• Add to Cart on Product Page for version 1.3
• Add to Cart on Product Page for version 1.2
• Add to Cart on Product Page for version 1.1

Step-by-step guide

Add to Cart on Product Page for version 1.4

Tracking the Add to Cart event is crucial to determine the performance of an instance and take business decisions based on data.

There are two situations where the Add to Cart should be attributed to the Search:

• Add to Cart button in the Search Results Page (SRP): this is fully handled by the Overlay.

• Add to Cart button in the Product Details Page (PDP): the Overlay only tracks an Add to Cart event if the user has clicked on the product in the SRP in the last 60 seconds (60 seconds is the default time and can be modified). In order to get this to work, you will need to provide some additional information to the Overlay: the selector of your Add to Cart button (ebConfig.domA2CTrigger). This way the Overlay will know how to handle this event.

Note: We used to have a separate library to perform this task (EmpathyTAG), but it made the integration process more complex, so we decided to include this behavior into this Overlay version.

Add to Cart on Product Page for versions 1.1, 1.2 and 1.3

Note: Add to Cart used to be named Conversion in the Overlay, so most documentation for older versions will still be referencing this name.

The workflow is:

1. Run the Overlay
2. When a click is done in the Overlay, it adds the needed information to the local storage, and a hash to the url to know that there is something in the local storage that must be read.
3. When the product page is loaded, a piece of code that reads this information is executed. This snippet also adds onClick event to the Add to Cart button. This event executes a function that does two different things:
   1. EmpathyBroker Tracking: It sends information to EmpathyBroker, so this conversion will be available from EmpathyBroker statistics.
   2. TrackConversionCallback: When the EmpathyBroker Tracking is executed, it executes another callback with custom code that lets you add the Google Analytics Tracking.

Overlay Initialization

If you have the Overlay initialization piece of code, you have to modify it to tell it that it has to execute product page tracking steps, using the parameter "conversionOnProduct":

<script>
  function clickCallback(data) {
    // GA Code
  }

  function searchCallback(data) {
    // GA Code
  }

  EmpathyOverlay.config('YOUR_EB_SEARCH_URL', {
    lang: 'en',
    displayLang: 'en',
    scope: 'default',
    defaultCurrency: 'EUR',
    customTrackSearch: searchCallback,
    customTrackClick: clickCallback,
    conversionOnProduct: true
  }, document.getElementById('eb-root'));
</script>

Add Library

First of all, you have to know that this process uses EmpathyTag library, so this library must be included inside your product page code before using the API. This piece of code should be inserted at the bottom of the page.

STAGING environment resources import

<script src="https://URL_EMPATHYBROKER/js/api/empathyutils.js" type="text/javascript"></script>
<script src="https://URL_EMPATHYBROKER/js/api/empathytag.js" type="text/javascript"></script>

Or use the minified version:

<script src="https://URL_EMPATHYBROKER/js/empathy.resources.min.js" type="text/javascript"></script>

LIVE environment resources import

<script src="https://static.empathybroker.com/{EB_INSTANCE_NAME}/js/api/empathyutils.js" type="text/javascript"></script>
<script src="https://static.empathybroker.com/{EB_INSTANCE_NAME}/js/api/empathytag.js" type="text/javascript"></script>

Or use the minified version:

<script src="https://static.empathybroker.com/{EB_INSTANCE_NAME}/js/empathy.resources.min.js" type="text/javascript"></script>

• EB_INSTANCE_NAME -> i.e. sb-demo-guide
• Make sure you are using https://static.empathybroker.com in your LIVE environment.
• Do not use your URL_EMPATHYBROKER in your LIVE environment.
• The URL https://static.empathybroker.com it's ONLY FOR STATIC RESOURCES (JS and CSS). Not use this for tagging or search functions https://static.empathybroker.com/sb-name/services/trackQuery?q=query&lang=en.....

For more information, read the following wiki: https://bitbucket.org/empathybroker/empathybroker-api-guide/wiki/tag/JavascriptLibraries

Add Snippet

To make all the process work, you have to add a snippet at the bottom of your product page code, just after the resources import. This snippet executes the following steps:

1. Check if the url contains a hash
2. If it contains a hash, it reads it
3. Read the information from the local storage with the key "eb-{hash}"
4. Add onClick event to "Add to Cart" button. This event executes a function that executes the EmpathyBroker Tracking, and the callback that lets you execute Google Analytics Tracking.
5. It removes the read information from local storage, and the hash.
   
   

var overlayProduct;

window.onload = function () {

    if (window.location.hash != "") {
        var hash = window.location.hash;
        hash = hash.replace('#', '');

        overlayProduct = JSON.parse(localStorage.getItem('eb-' + hash));
        document.getElementById("ADD_TO_CART_BUTTON_ID").onclick = empathyTrackConversion;


        //remove hash and localStorage entry
        localStorage.removeItem('eb-' + hash);
        window.location.hash = '';
    }
}

function empathyTrackConversion() {
    var empathyTAG = new EmpathyBrokerTAG('URL_EMPATHYBROKER').init();
    empathyTAG.trackConversion(overlayProduct.query, overlayProduct.page, overlayProduct.name,
            DESTINATION_URL, overlayProduct.scope, JSON.parse(overlayProduct.options), trackConversionCallback);
	//If DESTINATION_URL is the product page, use overlayProduct.url
}
function trackConversionCallback(data) {
    //GA Code
}

Note: This snippet is using Javascript, but It can be modified to use a library like jQuery.

trackConversionCallback Available Data

The available fields in "data" are:

For more data contact us.

overlayProduct Default Available Data

The available fields in "overlayProduct" are:

For more data contact us.

Google Tag Manager

If you want to use Google Analytics with Google Tag Manager, you have to follow the steps for the chosen option (See Google Tag Manager Detailed Instructions), and do a few things more into the product page. The steps you have to follow for this page are:

• Add dataLayer and Google Tag Manager initialization
• Create triggers (Option 2)
• Create variables (Option 2)
• Create Google Analytics Tag (Option 2)

Finally, you have to modify the "trackConversionCallback" of the product page for the chosen option.

Option 1: One Google Analytics Tag (Recommended)

The trackConversionCallback for this option should be something like this:

function trackConversionCallback(data) {
    dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'conversionOnProductPage',  'eventLabel':data.title, 'eventValue':1, 'event': 'gaEvent'});
	//The chosen keys and values can be different. The keys must have the same name in the code and in Google Tag Manager      
}

Option 2: Different Google Analytics Tags

The trackConversionCallback for this option should be something like this:

function trackConversionCallback(data) {
    dataLayer.push({'data': data});
    dataLayer.push({'event': 'ebConversionCallback'});      
}

Related articles

Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.