Versions Compared

Old Version 5

changes.mady.by.user Raquel Vidal Sigler

Saved on

compared with

New Version Current

changes.mady.by.user Raquel Vidal Sigler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. The first thing to do is initialize dataLayer variable. The piece of code that initializes the variable is:

    Code Block
    languagexml
    titleInitialize 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
      languagexml
      titleBody option
      <body>
  <script>
    dataLayer = [];
  </script>
  <!-- Google Tag Manager -->
  ...
  <!-- End Google Tag Manager -->


  2. The second thing to do is to add the event to dataLayer. This is and example.

    Code Block
    languagexml
    titleOverlay Code
    <script>
    dataLayer.push({
        'eventTrackUrl': 'https://api-staging.empathybroker.com/tagging/v1/track/adoremeclientname/query?q=pushquery&catalog=default&scope=default&store=default&lang=en&totalHits=74&page=1',
		'eventCallback': callback,
        'event': 'sendTrackEvent'
    });
</script>


  3. Go to Google Tag Manager to continue with the integration process. No more code changes are needed.
  4. In Google Tag Manager you have to add triggers. To do it:
    1. Go to Triggers
    2. Click on New
    3. Name: sendTrackEvent
    4. Choose Event: Custom Event
    5. Fire On:
      1. Event name: sendTrackEvent
    6. Create Trigger
  5. 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:
    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 (eventTrackUrl, eventCallback)
    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

  6. Finally, a Google Tag Manager tag must be created. To do it:
    1. Go to Tags
    2. Click on New
    3. Name: sendTrackEvent
    4. Choose Product: HTML 

    5. Configure Tag:

      1. eventTrackUrl: {{trackUrl}} //Variable created on point 5

      2. eventCallback: {{callback}} //Variable created on point 5

        Code Block
        <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>


    6. Fire On: More > Choose from existing Triggers: sendTrackEvent

    7. Create Tag

...