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.
The workflow is:
- Run the Overlay
- When anything is done in the Overlay (Search, Click or Conversion) the workflow will execute the executed action callback. This callback will run two tasks:
- It adds Overlay data to the dataLayer. This lets Google Tag Manager access the data.
It triggers an event that lets Google Tag Manager run the action Google Analytics code.
Google Tag Manager Setup 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
Guide
- 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
Conversion on Product Page for v1.1
Option 1: One Google Analytics Tag (Recommended)
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:
Initialize dataLayer<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 in the HTML head tag
Add this code just before the Google Tag Manager code:
Body option<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:
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:
- Go to Triggers
- Click on New
- Name: gaEvent
- Choose Event: Custom Event
- Fire On:
- Event name: gaEvent
- 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:
- Go to Variables
- At the bottom of the page, in the User-Defined Variables section, click New
- Name: One of the dataLayer key names (eventCategory, eventAction, eventLabel and eventValue)
- Choose Type: Data Layer Variable
- Configure Variable:
- Data Layer Variable Name: Same name as the one in point c.
- Data Layer Version: Version 2
- Create Variable
- Finally, a Google Analytics tag must be created. To do it:
- Go to Tags
- Click on New
- Name: gaEvent
- Choose Product: Google Analytics
- Choose a Tag Type: Google Analytics option you are using
- Configure Tag:
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
Option 2: Different Google Analytics Tags
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:
Initialize dataLayer<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 in the HTML head tag
Add this code just before the Google Tag Manager code:
Body option<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:
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:
- Go to Triggers
- Click on New
- Name: Event Name (ebClickCallback, ebSearchCallback or ebConversionCallback)
- Choose Event: Custom Event
- Fire On:
- Event name: The same name of c step.
- 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:
- Data Layer Variable Name: One of the Data column values of available data table.
- 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:
- Go to Tags
- Click on New
- Name: GA Overlay Product Click
- Choose Product: Google Analytics
- Choose a Tag Type: Google Analytics option you are using
- Configure Tag:
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
- Event Label: Clicked products' name
Conversion on Product Page for v1.2 and v1.3
Option 1: One Google Analytics Tag (Recommended)
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:
Initialize dataLayer<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 in the HTML head tag
Add this code just before the Google Tag Manager code:
Body option<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:
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:
- Go to Triggers
- Click on New
- Name: gaEvent
- Choose Event: Custom Event
- Fire On:
- Event name: gaEvent
- 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:
- Go to Variables
- At the bottom of the page, in the User-Defined Variables section, click New
- Name: One of the dataLayer key names (eventCategory, eventAction, eventLabel and eventValue)
- Choose Type: Data Layer Variable
- Configure Variable:
- Data Layer Variable Name: Same name as the one in point c.
- Data Layer Version: Version 2
- Create Variable
- Finally, a Google Analytics tag must be created. To do it:
- Go to Tags
- Click on New
- Name: gaEvent
- Choose Product: Google Analytics
- Choose a Tag Type: Google Analytics option you are using
- Configure Tag:
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
Option 2: Different Google Analytics Tags
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:
Initialize dataLayer<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 in the HTML head tag
Add this code just before the Google Tag Manager code:
Body option<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:
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:
- Go to Triggers
- Click on New
- Name: Event Name (ebClickCallback, ebSearchCallback or ebConversionCallback)
- Choose Event: Custom Event
- Fire On:
- Event name: The same name of c step.
- 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:
- Data Layer Variable Name: One of the Data column values of available data table.
- 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:
- Go to Tags
- Click on New
- Name: GA Overlay Product Click
- Choose Product: Google Analytics
- Choose a Tag Type: Google Analytics option you are using
- Configure Tag:
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
- Event Label: Clicked products' name
Related articles