Google Tag Manager Integration - Tagging
Overview
Instructions to use Google Tag Manager Integration.
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 Tagging.
For detailed instructions about this, go to: https://support.google.com/tagmanager/answer/6103696
Guide
Step-by-step guide
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 event to dataLayer. This is and example.
Overlay Code<script> dataLayer.push({ 'eventTrackUrl': 'https://api-staging.empathybroker.com/tagging/v1/track/clientname/query?q=query&catalog=default&scope=default&store=default&lang=en&totalHits=74&page=1', 'eventCallback': callback, 'event': 'sendTrackEvent' }); </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. To do it:
- Go to Triggers
- Click on New
- Name: sendTrackEvent
- Choose Event: Custom Event
- Fire On:
- Event name: sendTrackEvent
- 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: eventQuery, eventStart, eventRows, eventOptions, eventCallback). 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 (eventTrackUrl, eventCallback)
- 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 Tag Manager tag must be created. To do it:
- Go to Tags
- Click on New
- Name: sendTrackEvent
- Choose Product: HTML
Configure Tag:
eventTrackUrl: {{trackUrl}} //Variable created on point 5
eventCallback: {{callback}} //Variable created on point 5
<script src="https://assets.empathybroker.com/apijs/1.3/empathy.resources.min.js" type="text/javascript"></script> <script> var empathyTAG = new EmpathyBrokerTAG(INSTANCE_ID, ENVIRONMENT).init(); empathyTAG.sendTrack({{trackUrl}}, {{callback}}); </script>
Fire On: More > Choose from existing Triggers: sendTrackEvent
Create Tag
Related articles
-
Javascript Tagging Library: Track Conversion Clicks (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Wishlist Clicks (Empathy Knowledge Base)
-
Using Javascript Tagging Library - Deprecated (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Add2Cart Clicks (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Clicks (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Queries (Empathy Knowledge Base)
-
Using Javascript Tagging Library - 1.3 - Deprecated (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Checkout (Empathy Knowledge Base)
-
Javascript Tagging Library - Track Search (Empathy Knowledge Base)
-
Javascript Tagging Library - Track Browse (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Browse Add2Cart (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Browse Category (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Query (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Browse Product (Empathy Knowledge Base)
-
Javascript Tagging Library: Track Wishlist (Empathy Knowledge Base)