widgets analytics

Description

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 will push the data.

This is a headless widget, which means that it does not have a rendered output in the UI.

Live example

You can find an example at the end of the page or a live example in our widget showcase.

Usage

const search = instantsearch( /* parameters */ );

const widget = instantsearch.widgets.analytics({ 
  pushFunction: (qs, state, results) => undefined, 
  delay: [number], 
  triggerOnUIInteraction: [boolean], 
  pushInitialSearch: [boolean], 
  pushPagination: [boolean], 
}: AnalyticsWidgetOptions);

search.addWidget(widget);

Options

AnalyticsWidgetOptions

• pushFunction(qs, state, results) => undefined

  Function called when data are ready to be pushed. It should push the data to your analytics platform. The qs parameter contains the parameters serialized as a query string. The state contains the whole search state, and the results the last results received.

• delay[number]
  Default value: 3000

  Number of milliseconds between last search key stroke and calling pushFunction.

• triggerOnUIInteraction[boolean]
  Default value: false

  Trigger pushFunction after click on page or redirecting the page

• pushInitialSearch[boolean]
  Default value: true

  Trigger pushFunction after the initial search

• pushPagination[boolean]
  Default value: false

  Trigger pushFunction on pagination

Widget

• render[function]

  Called after each search response has been received

• getConfiguration[function]

  Let the widget update the configuration of the search with new parameters

• init[function]

  Called once before the first search

Example

search.addWidget(
  instantsearch.widgets.analytics({
    pushFunction: function(formattedParameters, state, results) {
      // Google Analytics
      // window.ga('set', 'page', window.location.pathname + window.location.search);
      // window.ga('send', 'pageView');

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

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

      // Kissmetrics
      // var objParams = JSON.parse('{"' + decodeURI(formattedParameters.replace(/&/g, "\",\"").replace(/=/g,"\":\"")) + '"}');
      // var arrParams = $.map(objParams, function(value, index) {
      //   return [value];
      // });
      //
      // _kmq.push(['record', '[KM] Viewed Result page', {
      //   'Query': state.query ,
      //   'Number of Hits': results.nbHits,
      //   'Search Params': arrParams
      // }]);

      // any other analytics service
    }
  })
);

Can't find what you are looking for? Open an issue, we'll get back to you.