Sending Insights Events

Hi, I have some questions regarding sending insight events.

I have custom instant search implementation with Shopify. I tend to create click and conversion events for hits. It seems to me that I’m missing something cause only default view events are visible within the monitoring insights API log (check my screenshot below).

Besides that, I have a few warnings in Chrome and Firefox console, which you can see below on my screenshots as well.


When it comes to implementation I have a custom hits widget:

import { connectHits } from 'instantsearch.js/es/connectors';
import lozad from 'lozad';
import { hitItem } from '../templates';

const customHits = connectHits(
  (renderOptions, isFirstRender) => {
    const {
      hits,
      widgetParams,
      bindEvent,
    } = renderOptions;

    const {
      container,
    } = widgetParams;

    const observer = lozad('.lozad', {
      loaded(el) {
        el.classList.add('loaded');
      },
    });

    if (isFirstRender) {
      observer.observe();

      container.addEventListener('click', (e) => {
        if (!e.target.classList.contains('fit-to-map')) {
          return;
        }

        document.querySelectorAll('.fit-to-map').forEach((item) => {
          item.classList.remove('show');
        });

        e.target.classList.add('show');

        document.dispatchEvent(new CustomEvent('fit', {
          detail: e.target.dataset.bounds,
        }));
      });
    }

    container.innerHTML = '';

    hits.forEach((item) => {
      container.insertAdjacentHTML('beforeend', hitItem(item, bindEvent));
    });

    observer.observe();
  },
);

export { customHits as default };

Insights middleware:

import aa from 'search-insights';
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares'

const insights = createInsightsMiddleware({
  insightsClient: aa,
  insightsInitParams: {
    useCookie: true,
  }
});

export { insights as default };

Which I initiate like this search.use(insights).

Also within hit templates, I set bindEvent like this:

<a href="/products/${item.handle}?queryID=${item.__queryID}" ${bindEvent('click', item, 'View product page')}>${item.title}</a>

and this:

<button type="submit" class="btn btn--secondary btn--small btn--add-to-cart add-to-cart-js" data-id=${item.objectID} data-completed="Go to checkout" ${bindEvent('conversion', item, 'Add product to cart')}>

Any thoughts on this one?

Thank you in advance.

Hi there, thanks for reaching out.

For the warnings, you can ignore them: if you look closely, they say the response to the query has been blocked by your browser. This is ok, as long as your events are effectively sent.

Now let’s check if your events are effectively sent : could tell us whether you see the events firing off your network console ?

If you can provide a codesandbox implementation showcasing your problem, I’ll be happy to help troubleshooting: here is a starter boilerplate: codesandbox.io/s/github/algolia/doc-code-samples/tree/master/InstantSearch.js/algolia-insights