Send Personalization Events Angular InstantSearch
On this page
You are reading the documentation for Angular InstantSearch v3, which is in beta. You can find the v2 documentation here.
This guide describes how to use Algolia Insights with Angular 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.
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.1.1";
!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.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component } from "@angular/core";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent {
config = {
appId: "APPLICATION_ID",
apiKey: "SEARCH_API_KEY",
indexName: "demo_ecommerce"
};
clickedObjectIDs(props) {
(window as any).aa('clickedObjectIDs', props)
}
convertedObjectIDs(props) {
(window as any).aa('convertedObjectIDs', props)
}
viewedObjectIDs(props) {
(window as any).aa('viewedObjectIDs', props)
}
}
Events
userToken
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
let userToken = '';
window.aa('getUserToken', null, (err, algoliaUserToken) => {
if (err) {
console.error(err);
return;
}
userToken = algoliaUserToken;
});
objectID
This tutorial explains how to obtain the objectID
for sending personalization events.
This feature is not available with the built-in widgets, but you can compose the connectors to create a new component that will have access to these values. You’ll have to use the ais-hits
widget to access the hits
.
Sending Click Events
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ais-hits>
<ng-template let-hits="hits" let-results="results">
<div *ngFor="let hit of hits; index as i" class="ais-Hits-item">
<ais-highlight attribute="name" [hit]="hit"></ais-highlight>
<button
class="btn"
(click)="
clickedObjectIDs({
eventName: 'Add to Cart',
index: 'instant_search',
objectIDs: [hit.objectID]
})
"
> Favorite </button>
</div>
</ng-template>
</ais-hits>
Sending Conversion Events
1
2
3
4
5
6
7
8
9
10
<button
class="btn"
(click)="
convertedObjectIDs({
eventName: 'Add to Cart',
index: 'instant_search',
objectIDs: [hit.objectID]
})
"
> Add to cart </button>
Sending View Events
1
2
3
4
5
6
7
8
9
10
<button
class="btn"
(click)="
viewedObjectIDs({
eventName: 'Viewed Product',
index: 'instant_search',
objectIDs: [hit.objectID]
})
"
> Add to cart </button>
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.