add documentation on how to use insights middleware in Nuxt

[bootsmann1995]

Bug 🐞

What is the current behavior?

Currenly i'm using ais-instantsearch-ssr and i want to add algolia analytics to this.
But right now i get some errors regarding the server side rendering and etc.

What is the expected behavior?

Track searchs, clicks, and conversions with insights.

RIght now i get a window is not defined when i add insights to data like this:

data() {
        // Created in `data` to access the Vue Router
        const mixin = createServerRootMixin({
            searchClient: getSearchClient(),
            indexName: process.env.indice,
            clickAnalytics: true,
            replicas: [
                `SortByDESC ${process.env.commerceCulture}`,
                `SortByASC ${process.env.commerceCulture}`,
                `SortByLaunch ${process.env.commerceCulture}`,
                `SortByDiscountDESC ${process.env.commerceCulture}`
            ],
            routing: {
                router: nuxtRouter(this.$router),
                stateMapping:  singleIndex(process.env.indice),
            },
        });
        return {
            ...mixin.data(),
            insightsClient: window.aa,
        };
    },

is there a fix to this?
if i add it in beforeMount i get this error on clicks:

Do you have a working example with insights enabled in nuxt?

[francoischalifour]

Hey! I guess Nuxt doesn't have access to the window object when rendering on the server. Can you try to install search-insights in your project, and to import Search Insights in your file?

import insightsClient from 'search-insights';

// ...

export default {
  data() {
    // ...
    return {
      ...mixin.data(),
      insightsClient,
    };
  },
};

[bootsmann1995]

And would you make events like this then? this.insights("clickedObjectIDsAfterSearch", item, "Go to product page") and this.insights("convertedObjectIDsAfterSearch", { eventName: "Add to cart", objectIDs: [item.objectID + ""] });

[Haroenv]

it would be this.insightsClient, but yes

[bootsmann1995]

Should I add it to ais-instant-search-ssr ?

if I just import it into my hits component and use it like above i get this error:

Otherwise if I use it like this:

Method: 
  prodClicked(insights: (key: string, item: object) => void, item: IAlgoliaProduct) {
        insights('clickedObjectIDsAfterSearch', { eventName: 'Go to product', objectIDs: [item.objectID + ""] })
        this.$root.$emit("prodClicked");
    }
    
    Template: 
    <div slot-scope="{ items, insights }" class="products flex">
      <div v-for="(item, index) in items" :key="'item' + index" >
        <div
          class="products__spacing flex--vertical-direction flex--vertical-center"
          @click="prodClicked(insights, item)"
        >

I get this error:

[bootsmann1995]

Otherwise, do you have any docs on implementing this in nuxt? :)

[bootsmann1995]

@francoischalifour @Haroenv ? :)