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.
The workflow is:
It triggers an event that lets Google Tag Manager run the action Google Analytics code.
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
This option uses different pieces of code for each event, one Google Analytics trigger, multiple Google Analytics variables, and one Google Analytics tag. The piece of code in the callbacks will be different for different data tracking. If you want to track different data, Google Tag Manager configuration will be the same, and each change must be done in the code.
The steps for this option are:
The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
<script> dataLayer = []; </script> |
This piece of code must be in all the pages that contain the search bar. There are two options:
Add this code just before the Google Tag Manager code:
<body> <script> dataLayer = []; </script> <!-- Google Tag Manager --> ... <!-- End Google Tag Manager --> |
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:
<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 |
Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)
Track Type: Event
Category: {{eventCategory}} //Variable created on point 5
Action: {{eventAction}} //Variable created on point 5
Label: {{eventLabel}} //Variable created on point 5
Value: {{eventValue}} //Variable created on point 5
Fire On: More > Choose from existing Triggers: gaEvent
Create Tag
This option uses different pieces of code for each event, different Google Analytics events and different Google Analytics tags. The piece of code in the callbacks will always be the same. If you want to change the data for Google Analytics tracking, each change must be done from Google Tag Manager.
The steps for this option are:
The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
<script> dataLayer = []; </script> |
This piece of code must be in all the pages that contain the search bar. There are two options:
Add this code just before the Google Tag Manager code:
<body> <script> dataLayer = []; </script> <!-- Google Tag Manager --> ... <!-- End Google Tag Manager --> |
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:
<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> |
The events are:
Callback | Description |
---|---|
ebSearchCallback | Callback for search |
ebClickCallback | Callback for clicks |
ebConversionCallback | Callback for add to cart |
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 |
Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)
Track Type: Event
Category: Overlay
Action: {{Event}}
Label: {{Product Name}} (Variable created in Variables section. It represents the product name)
Value: Empty
Fire On: More > Choose from existing Triggers: ebClickCallback
Create Tag
With this tag, when a user clicks in a product, an event in Google Analytics is created with these values:
Event Category: Overlay
Event Action: ebClickCallback
This option uses different pieces of code for each event, one Google Analytics trigger, multiple Google Analytics variables, and one Google Analytics tag. The piece of code in the callbacks will be different for different data tracking. If you want to track different data, Google Tag Manager configuration will be the same, and each change must be done in the code.
The steps for this option are:
The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
<script> dataLayer = []; </script> |
This piece of code must be in all the pages that contain the search bar. There are two options:
Add this code just before the Google Tag Manager code:
<body> <script> dataLayer = []; </script> <!-- Google Tag Manager --> ... <!-- End Google Tag Manager --> |
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:
<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 |
Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)
Track Type: Event
Category: {{eventCategory}} //Variable created on point 5
Action: {{eventAction}} //Variable created on point 5
Label: {{eventLabel}} //Variable created on point 5
Value: {{eventValue}} //Variable created on point 5
Fire On: More > Choose from existing Triggers: gaEvent
Create Tag
This option uses different pieces of code for each event, different Google Analytics events and different Google Analytics tags. The piece of code in the callbacks will always be the same. If you want to change the data for Google Analytics tracking, each change must be done from Google Tag Manager.
The steps for this option are:
The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:
<script> dataLayer = []; </script> |
This piece of code must be in all the pages that contain the search bar. There are two options:
Add this code just before the Google Tag Manager code:
<body> <script> dataLayer = []; </script> <!-- Google Tag Manager --> ... <!-- End Google Tag Manager --> |
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:
<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> |
The events are:
Callback | Description |
---|---|
ebSearchCallback | Callback for search |
ebClickCallback | Callback for clicks |
ebConversionCallback | Callback for add to cart |
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 |
Tracking ID: Tracking ID de Google Analytics (UA-XXXXXXXX-X)
Track Type: Event
Category: Overlay
Action: {{Event}}
Label: {{Product Name}} (Variable created in Variables section. It represents the product name)
Value: Empty
Fire On: More > Choose from existing Triggers: ebClickCallback
Create Tag
With this tag, when a user clicks in a product, an event in Google Analytics is created with these values:
Event Category: Overlay
Event Action: ebClickCallback
Related articles appear here based on the labels you select. Click to edit the macro and add or change labels.