UI libraries / InstantSearch.js / Widgets

analytics

Signature 
analytics({
  pushFunction: function,
  // Optional parameters
  delay: number,
  triggerOnUIInteraction: boolean,
  pushInitialSearch: boolean,
  pushPagination: boolean,
});
Import
Copy 
1

import { analytics } from 'instantsearch.js/es/widgets';
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.

This widget is deprecated and is only supported on InstantSearch.js versions 1.9 - 4.8. We recommend using the the insights middleware instead. Please refer to the upgrade guide for details.

Examples

Plug with Google Analytics

Copy 
1
2
3
4
5
6

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

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

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

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

Parameter Description
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

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

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 users leaves the current page, even if the delay wasn’t reached.
Copy 
1
2
3
4

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

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

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

analytics({
  // ...
  pushPagination: false,
});
Did you find this page helpful?
InstantSearch.js v4