Vue-instantsearch: Setting userToken & enabling InsightsClient is vague in the documentation

[jonathan-bird]

The insights client & setting userToken is very vague in the documentation marked here

You will see it describes:

<ais-instant-search 
  [...] 
  :insights-client="window.aa"
>
  <ais-configure :clickAnalytics="true" />
  <!-- widgets -->
</ais-instant-search>

But you clearly can't actually use window.aa there because window is not available like that with Vue.

Is there actual documentation on how to do this? When I set it via data object, I get the error:

[InstantSearch.js]: `insightsClient` property has been deprecated. It is still supported in 4.x releases, but not further. It is replaced by the `insights` middleware.

For more information, visit 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/

I can't see any documentation on how to set the userToken in Vue InstantSearch either.

Any help appreciated.

[jonathan-bird]

FYI I have tried this method too: https://codesandbox.io/s/affectionate-elgamal-4hbd9?file=/src/Insights.js

But the problem is that window.aa is not defined. So if I add the search-insights library, then import aa from 'search-insights'; and use:

const insightsMiddleware = createInsightsMiddleware({
  insightsClient: aa,
});

This just throws more errors (note that my app was working fine before, this looks to be coming from the Insights component):

Error in created hook: "Error: apiKey is missing, please provide it so we can authenticate the application"

[jonathan-bird]

Hmm I think this is because I'm using a custom searchClient rather than the algoliasearch() which sets the API key. I'm not sure how I can get this custom searchClient working with AlgoliaAnalytics and set the API key

[jonathan-bird]

For anyone reading this, I solved the API Key & Application ID problem by adding it to my searchClient object:

data() {
  searchClient: {
    apiKey: "xyz",
    applicationID: "zvcx",
    search(requests) { // }
  }
}

Then my insights component worked:

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

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

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

[jonathan-bird]

Man I'm just having one issue after another.

The insights API started sending and then 422 errors started happening:

https://insights.algolia.io/1/events?X-Algolia-Application-Id=XXX&X-Algolia-API-Key=XXX&X-Algolia-Agent=insights-js%20(1.7.1)

But there's no response. It's just an empty 422 response. Any help appreciated? I try GET but doesn't work, just random responses about Algolia agent not allowed, start date required etc.

[jonathan-bird]

I can see things like timestamp, queryID etc aren't included in the event. I imagine they should be. I've set <ais-configure :clickAnalytics="true" /> however I'm not on a premium plan as I'm just testing. I wonder if that's the issue as to why it's not including it in the request. It has the objectIds, userToken, index, eventType and eventName though.

[Haroenv]

do you have an exact network request that failed with 422?

[jonathan-bird]

@Haroenv Yes correct, it sends 4x requests and all fail with 422, but when I look further, they're all empty.

I noticed here: https://www.algolia.com/doc/rest-api/insights/ that the queryID is sent too and 422 means the event is malformed. Although in the code it says they're optional.

So I'm a bit lost as to what it could be, especially since the response is empty.

I have this set:

<ais-configure
  :click-analytics.camel="true"
/>

[Haroenv]

do you have an example we could look at somewhere? When I try it, I don't see 422, so something must be different than in the example.

What's the exact network request (copy as curl) that you get now?

[jonathan-bird]

This is the CURL request:

I can't really create an example as I have Algolia searchclient as a custom one, so it basically goes through my API which calls Algolia, changes the response, and then brings to frontend.

My best guess is that the queryID is missing is the cause? But I'm not sure why this is the case since clickAnalytics is set to true. This should be as part of the request

curl 'https://insights.algolia.io/1/events?X-Algolia-Application-Id=xxx&X-Algolia-API-Key=xxx&X-Algolia-Agent=insights-js%20(1.7.1)' \
  -H 'authority: insights.algolia.io' \
  -H 'user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_2_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/88.0.4324.146 Safari/537.36' \
  -H 'content-type: text/plain;charset=UTF-8' \
  -H 'accept: */*' \
  -H 'origin: http://iosportal.test' \
  -H 'sec-fetch-site: cross-site' \
  -H 'sec-fetch-mode: no-cors' \
  -H 'sec-fetch-dest: empty' \
  -H 'referer: http://iosportal.test/' \
  -H 'accept-language: en-US,en;q=0.9,ms;q=0.8,es;q=0.7' \
  --data-raw '{"events":[{"eventType":"view","eventName":"Hits Viewed","userToken":2,"index":"sync_stock_products","objectIDs":["App\\Models\\Sync\\StockProduct::0bff5d92-9c9a-49d5-a78f-354363ae72ba","App\\Models\\Sync\\StockProduct::b233df15-a3cf-4476-82cb-83b6ddbbd2d4","App\\Models\\Sync\\StockProduct::d83725c5-55f9-4e0c-a026-b5ef7217d5fa","App\\Models\\Sync\\StockProduct::2d6e667b-c8b3-42bd-99b2-407de915dc82","App\\Models\\Sync\\StockProduct::a851f6a4-41b0-45d1-a8de-3a69915e5d93","App\\Models\\Sync\\StockProduct::aa803dae-8713-40bb-853e-ec3472d4d829","App\\Models\\Sync\\StockProduct::61af38f0-70cc-4255-9010-3a219d9aca2e","App\\Models\\Sync\\StockProduct::d04ab53e-c9da-4154-8300-6c0dc31e32f6","App\\Models\\Sync\\StockProduct::ed486623-c4ea-4162-93db-1cf9984b7f75","App\\Models\\Sync\\StockProduct::de8720aa-3396-4bd0-814a-3c8f9043c6a7","App\\Models\\Sync\\StockProduct::b4ad9e85-a2f9-42a3-bed7-4eb5f4543168","App\\Models\\Sync\\StockProduct::72e96d1f-9510-4cd7-8790-a28c07c8365e","App\\Models\\Sync\\StockProduct::e33da23e-5191-4d5d-8a06-1127a1adf2be","App\\Models\\Sync\\StockProduct::385ec722-498a-4a9b-9ccc-be043ae49c99","App\\Models\\Sync\\StockProduct::dba1b542-8f67-4181-8bae-6df32fd6d180","App\\Models\\Sync\\StockProduct::ab6c4af3-9010-4357-96fa-5f2d9483cb61","App\\Models\\Sync\\StockProduct::4dc80e16-1f0c-4779-b6f8-d147321fac89","App\\Models\\Sync\\StockProduct::def2a8d7-43c9-4737-a10d-33c040405c6e","App\\Models\\Sync\\StockProduct::4f3e2b5b-044c-4d9b-b445-d4ca5e7e366a","App\\Models\\Sync\\StockProduct::2a69e1c8-30d6-4554-851f-2a923b05bc30","App\\Models\\Sync\\StockProduct::4fcbbe36-16cb-459e-9692-24ceac8ffb4a","App\\Models\\Sync\\StockProduct::0b821be2-ac0e-4a2d-9875-453795c2c87f","App\\Models\\Sync\\StockProduct::8be0b70c-146e-4232-b1f0-c7526045e772","App\\Models\\Sync\\StockProduct::23c194a1-2bc8-41d0-b137-5cdd5d7e76a1","App\\Models\\Sync\\StockProduct::63ec35f6-f8d7-4b96-86a3-4529698f9bb7","App\\Models\\Sync\\StockProduct::ebe61a37-ae92-4936-8fff-139dcef53d56","App\\Models\\Sync\\StockProduct::e8317abb-ced1-4f70-8227-8ef0c4bfccb9","App\\Models\\Sync\\StockProduct::58a046cf-daf7-4797-909f-b04a1ccb3a23","App\\Models\\Sync\\StockProduct::2f664f6c-55e7-4e71-982e-8efadefa215b","App\\Models\\Sync\\StockProduct::23fde83c-2712-42f5-847d-b1b5860da6be","App\\Models\\Sync\\StockProduct::d2da8883-d033-4172-ba60-7c846859bd2b","App\\Models\\Sync\\StockProduct::25777505-cd57-4ad6-8f09-88b6d361d32f","App\\Models\\Sync\\StockProduct::9454adb6-a18e-4107-855d-61a0b5e3aaa0","App\\Models\\Sync\\StockProduct::1fa1d57a-185a-41c2-85a9-1e49be3f20e8","App\\Models\\Sync\\StockProduct::ec611433-f9f5-483a-93ec-bb781a1c0c69","App\\Models\\Sync\\StockProduct::847218d0-b0b7-46a1-bbc3-c1415a0b76ab","App\\Models\\Sync\\StockProduct::57f7f22a-8c59-43c6-9c54-d0f139309dda","App\\Models\\Sync\\StockProduct::4d152f38-3330-470d-baf5-9f9dfe341d72","App\\Models\\Sync\\StockProduct::1f34c27c-fb86-4655-8369-689ebc48f8ec","App\\Models\\Sync\\StockProduct::3455107a-a0e9-4942-b245-051e642c34fa"]}]}' \
  --compressed

[jonathan-bird]

I noticed the queryID is in the hits though:

<ais-hits>
    <div slot-scope="{ items, insights }">
        <div v-for="item in items">
            {{ item.__queryID}}
        </div>
    </div>
</ais-hits>

This does return the QueryID.

FYI I haven't setup any custom insight events. The insight events that fire are automatic "Hit" ones.

[Haroenv]

Ah, I think I see it! userToken in your case is a number, but the insights api only accepts strings: https://www.algolia.com/doc/api-reference/api-parameters/userToken/#how-to-use

[jonathan-bird]

@Haroenv Just changed it over to use string so it's now "2", but same 422 issue :(
My app ID is Z9R9I0E84P if that helps debug.

[jonathan-bird]

I've tried as much as I can think of. Is there anything I can see from the Algolia dashboard to see the logs? I tried calling the Algolia error logs via API but they were empty

[jonathan-bird]

Solved this, final solution in #888