Concepts / Getting insights and analytics / Send Personalization Events with Vue InstantSearch
Nov. 19, 2019

Send Personalization Events with Vue InstantSearch

InstantSearch allows developers to collect personalization events.

Click and conversion events sent can be used for personalization purposes as well. Some events however can only be used for personalization purposes.

This guide describes how to use Algolia Insights with Vue InstantSearch.

Install the Search-Insights Library

To make use of analytics, the search-insights library has to be added to your application.

The Insights library can either be loaded via jsDelivr CDN or from your own static fileserver. If you choose the latter, you have to update the ALGOLIA_INSIGHTS_SRC variable to point to the URL of the file on your own fileserver. We recommend loading the library by adding this snippet in the <head> of your HTML file.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script>
  var ALGOLIA_INSIGHTS_SRC = "https://cdn.jsdelivr.net/npm/search-insights@1.3.0";

  !function(e,a,t,n,s,i,c){e.AlgoliaAnalyticsObject=s,e.aa=e.aa||function(){
  (e.aa.queue=e.aa.queue||[]).push(arguments)},i=a.createElement(t),c=a.getElementsByTagName(t)[0],
  i.async=1,i.src=ALGOLIA_INSIGHTS_SRC,c.parentNode.insertBefore(i,c)
  }(window,document,"script",0,"aa");


  // Initialize library
  aa('init', {
    appId: 'YourApplicationID',
    apiKey: 'YourSearchOnlyAPIKey'
  });
</script>

jsDelivr is a third-party CDN. We are not able to provide support regarding third party services.

Using insights with Node.js

Since version 1.3.0, you can use search-insights with NodeJS.

With NPM:

$
npm install search-insights

with Yarn:

$
yarn add search-insights

You can now use require to import the package in your code.

1
2
const aa = require('search-insights');
// The rest is the same.

Sending Events

Insights events (click, conversion, view) used for analytics and/or personalization do not take immediate effect. The delay can range from 10 to 60 minutes depending on how long after the search they are sent. For precise times, see our page on when Insights events take effect.

userToken

By default, InstantSearch sends a default userToken when sending personalization events. This default is based on the users’ IP address and will work for most cases.

However, if you have to identify a user across different devices, you can send a custom userToken along with the eventName, index and objectIDs parameters when sending personalization events.

To get the default userToken provided by InstantSearch, you can call the getUserToken method on the Insights library.

1
2
3
4
5
6
7
8
9
10
// Starting from v1.3.0 of the search-insights.js library
let userToken = '';
window.aa('getUserToken', null, (err, algoliaUserToken) => {
  if (err) {
    console.error(err);
    return;
  }

  userToken = algoliaUserToken;
});

Send Click Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <ais-state-results>
    <template slot-scope="{ page, hitsPerPage, queryID }">
      <ais-hits>
        <template slot="item" slot-scope="{ item, index }">
          <button
            @click="
              clickedObjectIDs({
                eventName: 'Add to Cart',
                index: 'instant_search',
                objectIDs: [item.objectID]
              })
            "
          >
            Click
          </button>
          <h1><ais-highlight :hit="item" attribute="name" /></h1>
          <p><ais-highlight :hit="item" attribute="description" /></p>
        </template>
      </ais-hits>
    </template>
  </ais-state-results>
</template>

<script>
export default {
  methods: {
    clickedObjectIDs(params) {
      window.aa('clickedObjectIDs', params);
    },
  },
};
</script>

Send Conversion Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <ais-state-results>
    <template slot-scope="{ queryID }">
      <ais-hits>
        <template slot="item" slot-scope="{ item }">
          <button
            @click="
              convertedObjectIDs({
                eventName: 'Add to favorite',
                index: 'INDEX_NAME',
                objectIDs: [item.objectID]
              })
            "
          >
            Convert
          </button>
          <h1><ais-highlight :hit="item" attribute="name" /></h1>
          <p><ais-highlight :hit="item" attribute="description" /></p>
        </template>
      </ais-hits>
    </template>
  </ais-state-results>
</template>

<script>
export default {
  methods: {
    convertedObjectIDs(params) {
      window.aa('convertedObjectIDs', params);
    },
  },
};
</script>

Send View Events

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<template>
  <ais-state-results>
    <template slot-scope="{ queryID }">
      <ais-hits>
        <template slot="item" slot-scope="{ item }">
          <button
            @click="
              viewedObjectIDs({
                eventName: 'Add to favorite',
                index: 'INDEX_NAME',
                objectIDs: [item.objectID]
              })
            "
          >
            View
          </button>
          <h1><ais-highlight :hit="item" attribute="name" /></h1>
          <p><ais-highlight :hit="item" attribute="description" /></p>
        </template>
      </ais-hits>
    </template>
  </ais-state-results>
</template>

<script>
export default {
  methods: {
    viewedObjectIDs(params) {
      window.aa('viewedObjectIDs', params);
    },
  },
};
</script>

</section>

Did you find this page helpful?