Page Comparison

...

...

...

...

Overview

This page contains a guide to integrate conversions 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

Anchor
1.4 1.4

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.

Anchor
1.1 1.1

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 Empathy Broker, 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.
      

• Conversion on Product Page for v1.1
• Conversion on Product Page for v1.2
• Conversion on Product Page for v1.3

Step-by-step guide

...

1. 1. .

...

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   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>

...

<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>

...

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:

...

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:

...

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

...