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.