Not able to send insights events from Angular instantsearch

I am working on a project, that includes a search bar at the top wherein instant search is used to get the results from algolia, in the dropdown.

Currently for the search bar <ais-instantsearch> is used,

<ais-instantsearch [config]="config">
  <ais-configure [searchParameters]="{ clickAnalytics: true }"></ais-configure>
  <ais-search-box
    placeholder="Search for products"
    [searchAsYouType]="true
    (keyup.enter)="addInput(hits)"
  >
  </ais-search-box>
  <div *ngIf="display">
    <ais-hits id="ais-hits">
      <ng-template #hits let-hits="hits" let-insights="insights">
        <div *ngFor="let hit of hits" class="list">
          <ul style="list-style-type: none">
            <li
              class="cursor-pointer"
              (click)="
                navigate(hit);
                insights('clickedObjectIDs', {
                  eventName: 'Product Clicked',
                  objectIDs: [hit.objectID]
                })
              "
            >
              {{ hit.name }}
            </li>
          </ul>
        </div>
        <div class="list" *ngIf="!hits || !hits.length">No result found</div>
      </ng-template>
    </ais-hits>
  </div>
</ais-instantsearch>

Config in the ts file includes

config = {
    apiKey: algoliaAPIKEY,
    appId: algoliaAPPID,
    indexName: indexName,
    insightsClient: (window as any).aa,
  };

I have added the insights() function with the click of the product name. In the search bar results, when a product is clicked the click event should be triggered. But the click event is not triggering.

  • There is a product listing page, that includes all the products along with their name and image.
    But in its HTML component, there is no ais-hits component, so I am not able to call the insights function

  • There is also a product detail page, that includes all the information along with the “Add to Cart” option.
    But in its HTML component, there is no ais-hits component, so I am not able to call the insights function

I need to implement the recommendation system for the website (frequently bought together or related products), for that, I need to trigger click events from the front end side.
But the click events are not triggering. I am using Angular v9 and search-insights v2.1.0.

Can anyone please help me resolve this issue ?

Hi @bhavyagupta1203, ​Could you provide a minimal codesandbox to demonstrate the issue? We have a boilerplate here to help you get started.

Hi @bhavyagupta1203
Sorry but I’m not sure if I understand your question correctly.
It seems you have two pages where you need to send events from.

(A). Search result (product listing) page using Angular InstantSearch.
(B). Product detail page NOT using Angular InstantSearch.

How is it not working in (A)? Your code seems alright but I’d like to know at which point it fails to send events. Could you provide error log, and screenshot, etc? A code sandbox would be perfect.

In case of (B), since you don’t have Angular InstantSearch or ais-hits, you need to use search-insights directly to send events. In order to have some values like queryID, objectID, you need to pass them via URL params from the product listing page to product detail page.

Let us know how it goes and if you have any question.