🎉 Try the public beta of the new docs site at algolia.com/doc-beta! 🎉
UI libraries / InstantSearch.js / Widgets

analytics

A
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 # A

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 # A

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 # A

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 the user 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 the user 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