Google Tag Manager

Sending events with Google Tag Manager

1. Setup Insights with Google Tag Manager

• Download our official template and import it via Google Tag Manager Dashboard: Templates > New > import.

• In User-Defined Variables, create the following variables: userToken, index, queryID, objectIDs, and positions.
  • Click New in the Variables panel
  • Name the variable (e.g. “ItemClicked”, “UserToken”, etc.)
  • Set the variable type:
    • Custom JavaScript if coming from data attributes (e.g. objectIDs, positions, queryID, etc.)
    • Data Layer Variable if coming from a Data Layer (e.g. userToken)
• Setup your tags:
  • Click New in the Tags panel
  • Select the tag type “Algolia Search Insights”
  • Choose the event type and provide the “Search Insights” options
  • Select the trigger for this event

2. Expose the userToken to Google Tag Manager

1
2
3
4
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  userToken: '42',
});

3. Expose Insights event data to Google Tag Manager

1
2
3
4
5
6
7
8
9
10
11
12
13
14
instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: `
      <article
       data-insights-object-id="{{objectID}}"
       data-insights-position="{{__position}}"
       data-insights-query-id="{{__queryID}}"
      >
        <!-- ... -->
      </article>
    `,
  },
}); 

__queryID and __position are available in hits and infiniteHits since InstantSearch.js 3.4.0.