API Reference / InstantSearch.js Widgets / analytics
Apr. 24, 2019

analytics

Widget signature 
instantsearch.widgets.analytics({
  pushFunction: function,
  // Optional parameters
  delay: number,
  triggerOnUIInteraction: boolean,
  pushInitialSearch: boolean,
  pushPagination: boolean,
});
See code examples
See Live example

About this widget

The analytics widget pushes the current state of the search to the analytics platform of your choice. It requires the implementation of a function that pushes the data.

This is a headless widget, which means it doesn’t render anything in the UI.

Examples

Plug with Google Analytics

Copy
1
2
3
4
5
6

instantsearch.widgets.analytics({
  pushFunction(formattedParameters, state, results) {
    window.ga('set', 'page', window.location.pathname + window.location.search);
    window.ga('send', 'pageView');
  },
});

Plug with Google Tag Manager (GTM)

Copy
1
2
3
4
5
6
7
8
9
10

instantsearch.widgets.analytics({
  pushFunction(formattedParameters, state, results) {
    dataLayer.push({
      'event': 'search',
      'Search Query': state.query,
      'Facet Parameters': formattedParameters,
      'Number of Hits': results.nbHits,
    });
  },
});

Plug with Segment.io

Copy
1
2
3
4
5
6
7
8
9
10

instantsearch.widgets.analytics({
  pushFunction(formattedParameters, state, results) {
    analytics.page(
      '[SEGMENT] instantsearch',
      {
        path: '/instantsearch/?query=' + state.query + '&' + formattedParameters
      }
    );
  },
});

Plug with Kissmetrics

Copy
1
2
3
4
5
6
7
8
9
10
11
12
13
14

instantsearch.widgets.analytics({
  pushFunction(formattedParameters, state, results) {
    const objParams = JSON.parse('{"' + decodeURI(formattedParameters.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
    const arrParams = $.map(objParams, (value, index) => {
      return [value];
    });

    _kmq.push(['record', '[KM] Viewed Result page', {
      'Query': state.query ,
      'Number of Hits': results.nbHits,
      'Search Params': arrParams
    }]);
  }
})

Options

pushFunction
type: function
Required

A function that is called every time the query or refinements changes. You need to add the logic to push the data to your analytics platform.

The function takes three parameters:

  • formattedParameters: contains the search parameters, serialized as a query string.
  • state: contains the whole search state.
  • results: the last received results.
Copy 
1
2
3
4
5

instantsearch.widgets.analytics({
  pushFunction(formattedParameters, state, results) {
    // send data to your analytics system
  }
});
delay
type: number
default: 3000
Optional

The number of milliseconds between the last search keystroke and calling pushFunction.
Copy 
1
2
3
4

instantsearch.widgets.analytics({
  // ...
  delay: 5000,
});
triggerOnUIInteraction
type: boolean
default: false
Optional

Triggers pushFunction after click on page or redirecting the page. This is useful if you want the pushFunction to be called for the last actions before the user leaves the current page, even if the delay wasn’t reached.
Copy 
1
2
3
4

instantsearch.widgets.analytics({
  // ...
  triggerOnUIInteraction: false,
});
pushInitialSearch
type: boolean
default: true
Optional

Triggers pushFunction when InstantSearch is initialized. This means the pushFunction might be called even though the user didn’t perfom any search-related action.
Copy 
1
2
3
4

instantsearch.widgets.analytics({
  // ...
  pushInitialSearch: true,
});
pushPagination
type: boolean
default: false
Optional

Triggers pushFunction when the page changes, either through the UI or programmatically.
Copy 
1
2
3
4

instantsearch.widgets.analytics({
  // ...
  pushPagination: false,
});

Did you find this page helpful?

InstantSearch.js v3