Instructions to use Google Tag Manager Integration.
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 Search.
For detailed instructions about this, go to: https://support.google.com/tagmanager/answer/6103696
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 searchbox and add the event to dataLayer. This is and example.
<input id="searchbox" type="text" placeholder="Search..." /> <script> $( "#searchbox" ).keyup(function() { var start = 0, rows = 10, options = {lang: 'en'}, callback = fuction(data){ alert(data); }; dataLayer.push({ 'eventQuery': $( this ).val(), 'eventStart': start, 'eventRows': rows, 'eventOptions': options, 'eventCallback': callback, 'event': 'searchBoxEvent' }); }); </script> |
Configure Tag:
eventQuery: {{query}} //Variable created on point 5
eventStart: {{start}} //Variable created on point 5
eventRows: {{rows}} //Variable created on point 5
eventOptions: {{options}} //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 empathySearch = new EmpathyBrokerSearch(INSTANCE_ID, ENVIRONMENT).init(); empathySearch.search({{query}}, {{start}}, {{rows}}, {{options}}, {{callback}}); </script> |
Fire On: More > Choose from existing Triggers: searchBoxEvent
Create Tag
Related articles