Vue-instantsearch: ais-instant-search doesn't support insightsMiddleware?

Created on 1 Dec 2020 · 20Comments · Source: algolia/vue-instantsearch

Bug 🐞

What is the current behavior?

ais-instant-search doesn't support insightsMiddleware

https://www.algolia.com/doc/guides/getting-insights-and-analytics/search-analytics/click-through-and-conversions/how-to/send-click-and-conversion-events-with-instantsearch/js/#connect-instantsearch-with-the-insights-middleware

What is the expected behavior?

Support middlewares.

Does this happen only in specific situations?

What is the proposed solution?

Create a new props:
insightsMiddleware

What is the version you are using?

3.4.2

new feature

Source

profhouse

👍1

All 20 comments

That's right, today we haven't yet made an api in Vue InstantSearch for making this happen, however what you can do is the following for now: https://codesandbox.io/s/unruffled-solomon-ycuxr?file=/src/Insights.js

make a custom widget using createWidgetMixin
use this.instantSearchInstance for adding the middleware

Haroenv on 1 Dec 2020

👍1

@profhouse Did you end up getting this working? The sandbox link I couldn't get running successfully with insights.

jonathan-bird on 10 Feb 2021

@jonathan-bird One detail that I forgot to put in that sandbox is loading the insights client, I've now done that and it works for me (I see insights events): https://codesandbox.io/s/unruffled-solomon-ycuxr?file=/public/index.html

I've added this script to the public html before the vue scripts are loaded:

    <script>
      var ALGOLIA_INSIGHTS_SRC =
        'https://cdn.jsdelivr.net/npm/[email protected]';

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

Haroenv on 10 Feb 2021

That sandbox was great help thanks. I was just having a play with your sandbox and copied a lot, including api ID / key and still the same issue.

I decided to try the CURL command manually and got the response: {"status":422,"message":"Cannot process more than 20 objects in an event"}

I finally got a 200 response when I changed "perPage" to 20 from my default 40. Hmmm...

I think I'm on to something here! Although it's an automated insight "view" event type API call so I'm not sure how I can do both. I would've thought it'd just split automatically since it's not manually sent.

jonathan-bird on 10 Feb 2021

👍1

I ended up getting it completely working now with my per page = 40. I just catch the event and modify the payload to split into chunks of 20.

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

aa('init', {
    appId: 'xxx',
    apiKey: 'xxx',
    userToken: window.gaDefaultConfig.user_id.toString()
});

function splitArrayByCount(array, chunk = 20) {
    let i,
        j,
        tempArray = [];

    for (i = 0,j = array.length; i < j; i+=chunk) {
        tempArray.push(array.slice(i, i + chunk));
    }

    return tempArray;
}

export default {
    mixins: [
        createWidgetMixin({ connector: true })
    ],
    created() {
        const insightsMiddleware = createInsightsMiddleware({
            insightsClient: aa,
            onEvent: (event, aa) => {
                const { insightsMethod, payload, widgetType, eventType } = event;
                const newObjectIDPayload = splitArrayByCount(payload.objectIDs);

                // Send the event to Algolia in chunks of 20
                for (var i = 0; i < newObjectIDPayload.length; i++) {
                    let tempPayLoad = payload;
                    tempPayLoad.objectIDs = newObjectIDPayload[i];

                    aa(insightsMethod, tempPayLoad);
                }
            }
        });

        this.instantSearchInstance.use(insightsMiddleware);
    },
    render() {
        return null;
    },
};

jonathan-bird on 11 Feb 2021

@Haroenv are you able to add a click event into your demo? I keep finding that I get the error saying that it should be added "insightsClient" but as I recall this is the old way of doing things and now you use middleware which is what we've done.

Error in v-on handler: "Error: The `insightsClient` option has not been provided to `instantsearch`.

And that's with:

@click="insights('clickedObjectIDsAfterSearch', {
  eventName: 'Add to cart',
  objectIDs: [item.objectID]
})"

I can pass the window.aa to the <ais-instant-search> and it works to send them, but it just says this approach is deprecated.

jonathan-bird on 11 Feb 2021

Thanks for your workaround with splitting the events, I didn't know the insights api added that restriction.

For your last question, I think this is because the approach hasn't yet been updated in the documentation, sorry for that! It's meant to be using the sendEvent method, not the insights method. Unfortunately Vue InstantSearch hasn't been updated to take advantage of this. For the time being, a custom widget like this is the best approach before we make the sendEvent changes here:

<template>
  <div
    v-if="state"
    :class="suit()"
  >
    <slot
      :items="items"
      :send-event="state.sendEvent"
    >
      <ol :class="suit('list')">
        <li
          v-for="(item, itemIndex) in items"
          :key="item.objectID"
          :class="suit('item')"
        >
          <slot
            name="item"
            :item="item"
            :index="itemIndex"
            :send-event="state.sendEvent"
          >objectID: {{ item.objectID }}, index: {{ itemIndex }}</slot>
        </li>
      </ol>
    </slot>
  </div>
</template>

<script>
import { connectHitsWithInsights } from 'instantsearch.js/es/connectors';
import { createWidgetMixin, createSuitMixin } from 'vue-instantsearch';

export default {
  name: 'AisHits',
  mixins: [
    createWidgetMixin({ connector: connectHitsWithInsights }),
    createSuitMixin({ name: 'Hits' }),
  ],
  props: {
    escapeHTML: {
      type: Boolean,
      default: true,
    },
    transformItems: {
      type: Function,
      default(items) {
        return items;
      },
    },
  },
  computed: {
    items() {
      return this.state.hits;
    },
    widgetParams() {
      return {
        escapeHTML: this.escapeHTML,
        transformItems: this.transformItems,
      };
    },
  },
};
</script>

and then use sendEvent in the click handler sendEvent('click'/'convert', [item], "Add to cart")

Thanks again for digging here and noticing some flaws @jonathan-bird, we will improve this experience soon

Haroenv on 11 Feb 2021

👍1

Thanks heaps @Haroenv, I'll give that a go.

I ended up getting a workaround using a click event and then using the instance, so it ended up like this:

window.instantSearchInstance.sendEventToInsights({
    eventType: 'conversion',
    insightsMethod: 'convertedObjectIDs',
    payload: {
        eventName: 'Add to cart',
        index: 'sync_stock_products',
        objectIDs: [productItem.dataset.objectId],
        queryID: productItem.dataset.queryId
    }
});

Where all of the productItem is just a data attribute on the element and I just pull it in for the click event.

Your approach is obviously the proper solution so I'll give that a go next week. I've at least got it live and collecting data now, so I'm very excited to start testing the personalisation, reordering & rules.

jonathan-bird on 11 Feb 2021

❤1

@Haroenv Do you know if the insights middleware does anything to the query params upon first page load?

I've had everything working for a few days well but noticed that when this.instantSearchInstance.use(insightsMiddleware); is set, my ?page=X query param gets removed. When I comment that out, it works again. Other query params (like query, brand etc all work). I use this method for state & parsing/creating URL which has been working for a year now perfectly until insights got added and can get it working but only when commenting that use() line: https://www.algolia.com/doc/guides/building-search-ui/going-further/routing-urls/vue/

Interesting that it looks to affect this method:

stateToRoute(uiState) {
    const indexUiState = uiState[indexName] || {};

    return {
        query: indexUiState.query,
        page: indexUiState.page,
        brands: indexUiState.refinementList && indexUiState.refinementList.brand,
        hierarchicalMenu: indexUiState.hierarchicalMenu,
        range: indexUiState.range
    };
},

It seems to parse from the parseURL method correctly, but then when it comes through to this stateToRoute, there is no page params. Very strange, which is why I wonder if the middleware is removing it.

I can replicate the issue by adding (I've set insightsClient to null for the sake of this to show it's not the insightsClient):

export default {
    mixins: [
        createWidgetMixin({ connector: true })
    ],
    created() {
        const insightsMiddleware = createInsightsMiddleware({
            insightsClient: null
        });

        this.instantSearchInstance.use(insightsMiddleware);
    },
    render() {
        return null;
    },
};

The behaviour doesn't seem to happen when I don't set the insightsClient, but does when I set it to null or to the window.aa, or if I just comment out the instance using the middleware:

export default {
    mixins: [
        createWidgetMixin({ connector: true })
    ],
    created() {
        const insightsMiddleware = createInsightsMiddleware();

        // this.instantSearchInstance.use(insightsMiddleware);
    },
    render() {
        return null;
    },
};