Conversion on Product Page

Overview

This page contains a guide to integrate conversions on product page.

The workflow is:

Run the Overlay
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.
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.

Step-by-step guide

Conversion on Product Page for v1.1, v1.2 and v1.3

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

Overlay Code

<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

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:

STAGING environment minified resources import

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

LIVE environment resources import

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:

LIVE environment minified resources import

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

Check if the url contains a hash
If it contains a hash, it reads it
Read the information from the local storage with the key "eb-{hash}"
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.
It removes the read information from local storage, and the hash.

Tracking Snippet

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:

Data	Key
Language	data.options.lang
Page	data.page
Scope	data.scope
Search terms	data.terms
Product Name	data.title
Url	data.url

For more data contact us.

overlayProduct Default Available Data

The available fields in "overlayProduct" are:

Data	Key
name	overlayProduct.name
id	overlayProduct.id
url	overlayProduct.url
query	overlayProduct.query
page	overlayProduct.page
lang	overlayProduct.options.lang
scope	overlayProduct.scope

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:

Option 1: One Google Analytics Tag (Recommended)

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