Page Comparison

Overview

The Google Tag Manager and Overlay integration lets you use Google Analytics from Google Tag Manager, instead of adding the Google Analytics code in the callbacks.

...

Google Tag Manager Setup (GTM) and Installation

Google Tag Manager needs a piece of code inside the body to work properly. At this point, let’s assume that it’s added, and we only need to add the code for the Overlay.

For detailed instructions about this, go to: https://support.google.com/tagmanager/answer/6103696

Anchor

...

1.3

...

1.3
Anchor

...

1.2

...

1.2

...

Instructions for versions 1.2 and

...

1.3

Option 1: One Google Analytics Tag (Recommended)

...

The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
Code Block
language xml
title Initialize dataLayer
<script> dataLayer = []; </script>
This piece of code must be in all the pages that contain the search bar. There are two options:
1. Add this code in the HTML head tag
2. Add this code just before the Google Tag Manager code:
  Code Block
  language xml
  title Body option
  <body> <script> dataLayer = []; </script>  ...

The second thing to do is to add the Overlay code. If you have a previous Overlay code, you only have to modify the callbacks:

Code Block

language	xml
title	Overlay Code

<link href="https://preassets.empathybroker.com/overlay/{VERSION}/css/eb.resources.css" type="text/css" />
<script src="https://preassets.empathybroker.com/overlay/{VERSION}/js/eb.libs.js" type="text/javascript" />
<script src="https://preassets.empathybroker.com/overlay/{VERSION}/js/eb.resources.js" type="text/javascript"/>


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

		function searchCallback(data){
			dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'search',  'eventLabel':data.q, '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

		}

		function conversionCallback(data){
			dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'conversion',  '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		
}

EmpathyOverlay.config('YOUR_EB_SEARCH_URL', {
        	lang: 'en',
        	displayLang: 'en',
        	scope: 'default',
        	defaultCurrency: 'EUR',
			customTrackSearch: searchCallback,
			customTrackClick: clickCallback,
			customTrackConversion: conversionCallback
});
    </script>

The available data fields are:

Event	Data	Description
ebSearchCallback	data.q	The query typed by the user
ebSearchCallback	data.page	Page number for grabbing pagination data
ebSearchCallback	data.totalHits	Number of results returned by the query
ebClickCallback	data.title	Document name/title
These are default data fields. Let us know what data you want to receive in your custom function

Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
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
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
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:
7. Fire On: More > Choose from existing Triggers: gaEvent
8. Create Tag

...

The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
Code Block
language xml
title Initialize dataLayer
<script> dataLayer = []; </script>
This piece of code must be in all the pages that contain the search bar. There are two options:
1. Add this code in the HTML head tag
2. Add this code just before the Google Tag Manager code:
  Code Block
  language xml
  title Body option
  <body> <script> dataLayer = []; </script>  ...

The second thing to do is to add the Overlay code. If you have a previous Overlay code, you only have to modify the callbacks:

Code Block

language	xml
title	Overlay Code

    <script src="js/eb.libs.js"></script>
    <script src="js/eb.resources.js"></script>

<script>
		function clickCallback(data){
			dataLayer.push({'data': data});
            dataLayer.push({'event': 'ebClickCallback'});
		}

		function searchCallback(data){
			dataLayer.push({'data': data});
            dataLayer.push({'event': 'ebSearchCallback'});
		}

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

		EmpathyOverlay.config('YOUR_EB_SEARCH_URL', {
        	lang: 'en',
        	displayLang: 'en',
        	scope: 'default',
        	defaultCurrency: 'EUR',
			customTrackSearch: searchCallback,
			customTrackClick: clickCallback,
			customTrackConversion: conversionCallback
      	});
    </script>

Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
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
The events are:
Callback Description
ebSearchCallback Callback for search
ebClickCallback Callback for clicks
ebConversionCallback Callback for add to cart

Then, you have to create variables for received data in each event. The next process has to be done for each data:

Go to Variables
At the bottom of the page, in the User-Defined Variables section, click New
Name: It should identify the data it represents. For example: Product Name
Choose Type: Data Layer Variable
Configure Variable:
1. Data Layer Variable Name: One of the Data column values of available data table.
2. Data Layer Version: Version 2
Create Variable

The available data fields are:

Event	Data	Description
ebSearchCallback	data.q	The query typed by the user
ebSearchCallback	data.page	Page number for grabbing pagination data
ebSearchCallback	data.totalHits	Number of results returned by the query
ebClickCallback	data.title	Document name/title
These are default data fields. Let us know what data you want to receive in your custom function

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

Step-by-step guide

Anchor

...

1.1

...

1.1

...

Instructions for version 1.1

Option 1: One Google Analytics Tag (Recommended)

...

The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
Code Block
language xml
title Initialize dataLayer
<script> dataLayer = []; </script>
This piece of code must be in all the pages that contain the search bar. There are two options:
1. Add this code in the HTML head tag
2. Add this code just before the Google Tag Manager code:
  Code Block
  language xml
  title Body option
  <body> <script> dataLayer = []; </script>  ...

The second thing to do is to add the Overlay code. If you have a previous Overlay code, you only have to modify the callbacks:

Code Block

language	xml
title	Overlay Code

<div id="eb-root" class="eb-root" data-ng-jq="jQueryEB">
	<div data-ui-view></div>
</div>
    <script src="js/eb.libs.js"></script>
    <script src="js/eb.resources.js"></script>

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

		function searchCallback(data){
			dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'search',  'eventLabel':data.q, '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

		}

		function conversionCallback(data){
			dataLayer.push({'eventCategory':'EmpathyOverlay', 'eventAction':'conversion',  '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		
}

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

The available data fields are:

Data	Description
Search
data.q	The query typed by the user
data.page	Page number for grabbing pagination data
data.totalHits	Number of results returned by the query
data.scope	The scope (desktop, mobile...)
data.lang	Language
data.userId	User id
Click
data.lang	Language
data.page	Result page
data.q	Query
data.scope	The scope (desktop, mobile...)
data.title	Product title
data.url	Product url
data.userId	User id
Conversion
The same as Click
These are default data fields. Let us know what data you want to receive in your custom function

Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
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
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
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:
7. Fire On: More > Choose from existing Triggers: gaEvent
8. Create Tag

...

The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
Code Block
language xml
title Initialize dataLayer
<script> dataLayer = []; </script>
This piece of code must be in all the pages that contain the search bar. There are two options:
1. Add this code in the HTML head tag
2. Add this code just before the Google Tag Manager code:
  Code Block
  language xml
  title Body option
  <body> <script> dataLayer = []; </script>  ...

The second thing to do is to add the Overlay code. If you have a previous Overlay code, you only have to modify the callbacks:

Code Block

language	xml
title	Overlay Code

<div id="eb-root" class="eb-root" data-ng-jq="jQueryEB">
	<div data-ui-view></div>
</div>
    <script src="js/eb.libs.js"></script>
    <script src="js/eb.resources.js"></script>

<script>
		function clickCallback(data){
			dataLayer.push({'data': data});
            dataLayer.push({'event': 'ebClickCallback'});
		}

		function searchCallback(data){
			dataLayer.push({'data': data});
            dataLayer.push({'event': 'ebSearchCallback'});
		}

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

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

Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
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
The events are:
Callback Description
ebSearchCallback Callback for search
ebClickCallback Callback for clicks
ebConversionCallback Callback for add to cart

Then, you have to create variables for received data in each event. The next process has to be done for each data:

Go to Variables
At the bottom of the page, in the User-Defined Variables section, click New
Name: It should identify the data it represents. For example: Product Name
Choose Type: Data Layer Variable
Configure Variable:
1. Data Layer Variable Name: One of the Data column values of available data table.
2. Data Layer Version: Version 2
Create Variable

The available data fields are:

Data	Description
Search
data.q	The query typed by the user
data.page	Page number for grabbing pagination data
data.totalHits	Number of results returned by the query
data.scope	The scope (desktop, mobile...)
data.lang	Language
data.userId	User id
Click
data.lang	Language
data.page	Result page
data.q	Query
data.scope	The scope (desktop, mobile...)
data.title	Product title
data.url	Product url
data.userId	User id
Conversion
The same as Click
These are default data fields. Let us know what data you want to receive in your custom function

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

...

Versions Compared

Old Version 6

New Version Current

Key

Overview

Google Tag Manager Setup (GTM) and Installation

Anchor

1.3

1.3
Anchor

1.2

1.2

Instructions for versions 1.2 and

1.3

Option 1: One Google Analytics Tag (Recommended)

Step-by-step guide

Anchor

1.1

1.1

Instructions for version 1.1

Option 1: One Google Analytics Tag (Recommended)

Callback	Description
ebSearchCallback	Callback for search
ebClickCallback	Callback for clicks
ebConversionCallback	Callback for add to cart

Page Comparison

Versions Compared

Old Version 6

New Version Current

Key

Google Tag Manager Setup (GTM) and Installation

Anchor

1.3

1.3 Anchor

1.2

1.2

Instructions for versions 1.2 and

1.3

Option 1: One Google Analytics Tag (Recommended)

Step-by-step guide

Anchor

1.1

1.1

Instructions for version 1.1

Option 1: One Google Analytics Tag (Recommended)

1.3
Anchor