Google Tag Manager

1
2
3
4
instantsearch.widgets.configure({
  clickAnalytics: true,
  userToken: 'user-1'
});

1
2
3
4
5
6
import { Configure } from 'react-instantsearch-hooks-web';

<Configure
  clickAnalytics={true}
  userToken={'user-1'}
/>

1
2
3
4
5
6
import { Configure } from 'react-instantsearch-dom';

<Configure
  clickAnalytics={true}
  userToken={'user-1'}
/>

1
2
3
4
<ais-configure
  :click-analytics.camel="true"
  user-token.camel="user-1"
/>

1
2
3
<ais-configure
  [searchParameters]="{ clickAnalytics: true, userToken: 'user-1' }"
></ais-configure>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*
  <div data-insights-index="<your-index-name>">
    <div id="filters"><!-- ... --></div>
    <div id="hits"></div>
  </div>
*/

instantsearch.widgets.hits({
  container: '#hits',
  templates: {
    item: (hit) => `
      <div
        data-insights-object-id="${hit.objectID}"
        data-insights-position="${hit.__position}"
        data-insights-query-id="${hit.__queryID}"
      >
        <!-- ... -->
      </div>
    `,
  },
}),

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import { Hits } from 'react-instantsearch-dom';

const indexName = <your-index-name>;

function Hit({ hit }) {
  return (
    <div
      data-insights-object-id={hit.objectID}
      data-insights-position={hit.__position}
      data-insights-query-id={hit.__queryID}
    >
      {/* ... */}
    </div>
  );
}

// ...

<div data-insights-index={indexName}>
  {/* ... */}
  <Hits hitComponent={Hit} />
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div :data-insights-index="indexName">
  <!-- .. -->
  <ais-hits>
    <ul slot-scope="{ items }">
      <li
        v-for="item in items"
        :key="item.objectID"
        :data-insights-object-id="item.objectID"
        :data-insights-position="item.__position"
        :data-insights-query-id="item.__queryID"
      >
      </li>
    </ul>
  </ais-hits>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div [attr.data-insights-index]="indexName">
  <!-- .. -->
  <ais-hits>
    <ng-template let-hits="hits">
      <ul>
        <li
          *ngFor="let hit of hits"
          [attr.data-insights-object-id]="hit.objectID"
          [attr.data-insights-position]="hit.__position"
          [attr.data-insights-query-id]="hit.__queryID"
        >
        </li>
      </ul>
    </ng-template>
  </ais-hits>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
instantsearch.widgets.refinementList({
  container: '#refinement-list',
  attribute: 'brand',
  templates: {
    item: `
      <a
        data-insights-filter="brand:{{value}}"
        href="{{url}}"
        style="{{#isRefined}}font-weight: bold{{/isRefined}}"
      >
        <span>{{label}} ({{count}})</span>
      </a>
    `,
  }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { connectRefinementList } from 'react-instantsearch-dom'

const attribute = 'brand';

const RefinementList = ({ items, refine }) => (
  <div>
    <ul>
      {items.map(item => (
        <li 
          key={item.label}
          data-insights-filter={`${brand}:${item.value}`}
        >
          <a
            href="#"
            style={{ fontWeight: item.isRefined ? 'bold' : '' }}
            onClick={event => {
              event.preventDefault();
              refine(item.value);
            }}
          >
            {item.label} ({item.count})
          </a>
        </li>
      ))}
    </ul>
  </div>
);

const CustomRefinementList = connectRefinementList(RefinementList);

// ...

<CustomRefinementList attribute={attribute} />

1
2
3
4
5
6
7
8
9
10
11
12
13
<ais-refinement-list attribute="brand">
  <template v-slot:item="{ item, refine, createURL }">
    <a
      :data-insights-filter="`brand:${item.value}`"
      :href="createURL(item.value)"
      :style="{ fontWeight: item.isRefined ? 'bold' : '' }"
      @click.prevent="refine(item.value)"
    >
      <ais-highlight attribute="item" :hit="item"/>
      ({{ item.count.toLocaleString() }})
    </a>
  </template>
</ais-refinement-list>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import { Component, Inject, forwardRef, Optional } from '@angular/core';
import { TypedBaseWidget, NgAisInstantSearch, NgAisIndex } from 'angular-instantsearch';

import connectRefinementList, {
  RefinementListWidgetDescription,
  RefinementListConnectorParams
} from 'instantsearch.js/es/connectors/refinement-list/connectRefinementList';

@Component({
  selector: 'app-refinement-list',
  template: `
  <li *ngFor="let item of state.items">
    <label [attr.data-insights-filter]="'brand:' + item.value">
      <input type="checkbox"
            (click)="state.refine(item.value)"
            [checked]="item.isRefined" > {{ item.label }} ({{ item.count }})
    </label>
  </li>
`
})
export class RefinementList extends TypedBaseWidget<RefinementListWidgetDescription, RefinementListConnectorParams> {
  public state: RefinementListWidgetDescription['renderState']; // Rendering options
  constructor(
    @Inject(forwardRef(() => NgAisIndex))
    @Optional()
    public parentIndex: NgAisIndex,
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchInstance: NgAisInstantSearch
  ) {
    super('RefinementList');
  }
  ngOnInit() {
    this.createWidget(connectRefinementList, {
      // instance options
      attribute: 'brands',
    });
    super.ngOnInit();
  }
}

1
2
3
4
5
6
7
8
9
10
11
const search = instantsearch({
  insights: {
    onEvent(event) {
      const { widgetType, eventType, payload, hits } = event;

      if (widgetType === 'ais.hits' && eventType === 'view') {
        dataLayer.push({ event: 'Hits Viewed' });
      }
    }
  },
});

1
2
3
4
5
6
7
8
9
import { connectHits } from 'react-instantsearch-dom';

const HitsViewed = connectHits(() => {
  dataLayer.push({ event: 'Hits Viewed' });
});

// ...

<HitsViewed />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- Required: Vue InstantSearch >= 3.7.0 -->
<template>
  <ais-instant-search
    :index-name="<index-name>"
    :search-client="searchClient"
    :middlewares="middlewares"
  >
    <!-- widgets -->
  </ais-instant-search>
</template>

<script>
import {
  createInsightsMiddleware,
} from 'instantsearch.js/es/middlewares';

const insightsMiddleware = createInsightsMiddleware({
  insightsClient: null, // or `window.aa`
  onEvent(event) {
    const { widgetType, eventType, payload, hits } = event;

    if (widgetType === 'ais.hits' && eventType === 'view') {
      dataLayer.push({ event: 'Hits Viewed' });
    }
  }
});

export default {
  data() {
    return {
      // ...
      middlewares: [insightsMiddleware]
    }
  },
}
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
import { Component, OnInit, forwardRef, Inject } from '@angular/core';
import { BaseWidget, NgAisInstantSearch } from 'angular-instantsearch';
import { connectHits } from 'instantsearch.js/es/connectors';

@Component({
  selector: 'hits-viewed',
  template: ``
})
export class HitsViewedComponent extends BaseWidget implements OnInit {
  public state: {
    hits: any[];
  };

  constructor(
    @Inject(forwardRef(() => NgAisInstantSearch))
    public instantSearchParent
  ) {
    super('HitsViewed');
  }

  public ngOnInit() {
    this.createWidget(connectHits, {});
    super.ngOnInit();
  }

  updateState = state => {
    dataLayer.push({ event: 'Hits Viewed' });
  };
}