Page Comparison

Overview

This page contains a guide on how to integrate the Overlay with analytics platforms such as GA or GTM.

...

function searchCallback(data) {(data) {
  ga('set', 'page', 'http://site.com/overlay?q=' + data.q);
  ga('send', 'pageview');
  ga('send', 'event', 'EmpathyOverlay', 'search', data.q, data.totalHits);
  // it's just a sample, you can define the GA metric with other parameters
}

...

function clickCallback(data) {
  ga('send', 'event', 'EmpathyOverlay', 'click', data.titleq);
  // it's just a sample, you can define the GA metric with other parameters
}

...

function clickCallback(data) {
  dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'click', 'eventLabel':data.titleq, '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 
}

...

1. Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
2. In Google Tag Manager you have to add triggers. To do it:
   1. Go to Triggers
   2. Click on New
   3. Name: gaEvent
   4. Choose Event: Custom Event
   5. Fire On:
      1. Event name: gaEvent
   6. Create Trigger
3. Then, you have to create variables for received data in each event. The variables will always be the same, and they must have the dataLayer key names (In this case: eventCategory, eventAction, eventLabel and eventValue). For each of those variables repeat this process:
   1. Go to Variables
   2. At the bottom of the page, in the User-Defined Variables section, click New
   3. Name: One of the dataLayer key names (eventCategory, eventAction, eventLabel and eventValue)
   4. Choose Type: Data Layer Variable
   5. Configure Variable:
      1. Data Layer Variable Name: Same name as the one in point c.
      2. Data Layer Version: Version 2
   6. Create Variable
4. Finally, a Google Analytics tag must be created. To do it:
   1. Go to Tags
   2. Click on New
   3. Name: gaEvent
   4. Choose Product: Google Analytics
   5. Choose a Tag Type: Google Analytics option you are using
   6. Configure Tag:

   1. Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)

   2. Track Type: Event

   3. Category:  {{eventCategory}} //Variable created on point 5

   4. Action: {{eventAction}} //Variable created on point 5

   5. Label: {{eventLabel}} //Variable created on point 5

   6. Value: {{eventValue}} //Variable created on point 5

   7. Fire On: More > Choose from existing Triggers: gaEvent

   8. Create Tag

...

1. Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
2. In Google Tag Manager you have to add triggers. The next process has to be done for each event:
   1. Go to Triggers
   2. Click on New
   3. Name: Event Name (ebClickCallback, ebSearchCallback or ebConversionCallback)
   4. Choose Event: Custom Event
   5. Fire On:
      1. Event name: The same name of c step.
   6. Create Trigger
3. Then, you have to create variables for received data in each event. The next process has to be done for each data:
   1. Go to Variables
   2. At the bottom of the page, in the User-Defined Variables section, click New
   3. Name: It should identify the data it represents. For example: Product Name
   4. Choose Type: Data Layer Variable
   5. Configure Variable:
      1. Data Layer Variable Name: One of the Data column values of available data table.
      2. Data Layer Version: Version 2
   6. Create Variable
4. Finally, Google Analytics tags must be created. These tags depends on the chosen Google Analytics metrics, so the next process describes a general example to track a product click:
   1. Go to Tags
   2. Click on New
   3. Name: GA Overlay Product Click
   4. Choose Product: Google Analytics
   5. Choose a Tag Type: Google Analytics option you are using
   6. Configure Tag:

   1. Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)

   2. Track Type: Event

   3. Category: Overlay

   4. Action: {{Event}}

   5. Label: {{Product Name}} (Variable created in Variables section. It represents the product name)

   6. Value: Empty

   7. Fire On: More > Choose from existing Triggers: ebClickCallback

   8. Create Tag

   9. With this tag, when a user clicks in a product, an event in Google Analytics is created with these values:

   1. Event Category: Overlay

   2. Event Action: ebClickCallback

   3. Event Label: Clicked products' name

...

function searchCallback(data) { searchCallback(data) {
  // ga('set', 'page', 'http://site.com/overlay?q=' + data.q);
  // ga('send', 'pageview');
  // ga('send', 'event', 'Search-Overlay', 'search', data.q, data.totalHits);
  // it's just a sample, you can define the GA metric with other parameters
}

...

function productClickCallback(data) {
  // ga('send', 'event', 'Search-Overlay', 'click', data.nameq);
  // it's just a sample, you can define the GA metric with other parameters
}

...

<link rel="stylesheet" href="https://assets.empathybroker.com/overlay/1.2/css/eb.resources.min.css" />
<script type="text/javascript" src="https://assets.empathybroker.com/overlay/1.2/js/eb.libs.min.js"></script>
<script type="text/javascript" src="https:/assets.empathybroker.com/overlay/1.2/js/eb.resources.min.js"></script>
  
<script type="text/javascript">
	function clickCallback(data) {
		//GA Code
	}
	function searchCallback(data) {
		//GA Code
	}
	function conversionCallback(data) {
		//GA Code
	}

	EmpathyBrokerUI.config('https://{EB_URL}/{EB_INSTANCE_NAME}', {
		lang: 'en',
		displayLang: 'en',
		defaultCurrency: 'EUR',
		scope: 'default',
		pageRows: 12,
		customTrackSearch: searchCallback,
		customTrackClick: clickCallback,
		customTrackConversion: conversionCallback
	}, document.getElementById('EmpathyBrokerUI'));
</script>

Anchor
1.1 1.1

Instructions for version 1.1

Note: GTM instructions for these versions live in this separate page.

By default, the Overlay provides callbacks to measure queries and clicks using the GA API in addition to EmpathyBroker Tagging. Simply you should define two functions, one for sending query information to GA and another one for sending clicks information.

...

function searchCallback(data) {
  // ga('set', 'page', 'http://site.com/overlay?q=' + data.term);
  // ga('send', 'pageview');
  // ga('send', 'event', 'Search-Overlay', 'search', data.term, data.numFound);
  // it's just a sample, you can define the GA metric with other parameters
}

...

function productClickCallback(data) {
  // ga('send', 'event', 'Search-Overlay', 'click', data.nameterm);
  // it's just a sample, you can define the GA metric with other parameters
}

...