react-instantsearch-dom + search-insightsでAlgoliaの検索結果をトラッキングする

Algoliaには「検索結果をクリックされた・カートに追加された」などをトラッキングするAnalytics機能が用意されています。これをReact Instantsearchで導入したアプリに追加したので、その時の方法をまとめました。

search-insightsをインストール

すでにReact Instantsearchで検索フォームが作られている前提とします。この場合search-insightsを追加するだけでOKです。

$ yarn add search-insights 

Clientをセットアップ

AlgoliaのアプリケーションIDとAPIキーをセットします。

import aa from 'search-insights'
aa('init', {
  appId: 'AppID',
  apiKey: 'API_KEY_OR_SEARCH_ONLY_API_KEY'
})

// Exportする場合
export const searchInsightClient = aa

Configureコンポーネントを配置

ドキュメントの指示に従い、Configureコンポーネントを配置します。

import { 
    InstantSearch, Configure
} from 'react-instantsearch-dom';

export default () => (
    <InstantSearch indexName="wp_posts_post" searchClient={searchClient}>
      <Configure clickAnalytics />
...

HitのhitComponentにconnectHitInsightsを追加する

トラッキング用APIを手に入れるために、Hit Componentを少し弄ります。

import { 
 Hits
} from 'react-instantsearch-dom';
import Link from 'next/link'
import { searchInsightClient } from '../algolia';
// eslint-disable-next-line  @typescript-eslint/no-var-requires
const { connectHitInsights } = require('react-instantsearch-dom');

export default () => (
     <Hits hitComponent={connectHitInsights(searchInsightClient)(({hit, insights}) => {
        return (
          <Link href={slug} key={`search-${hit.objectID}`}>
                <div onClick={() => insights('clickedObjectIDsAfterSearch')}>
                   {hit.post_title}
                </div>
          </Link>
        )
      })} />
)

connectHitInsightsの@typesでの型定義がドキュメントと少し違うらしく、TypeScriptで使う場合はとりあえずrequireでimportしています。

connectすると、insights関数がhitと一緒に取得できます。これをonClickイベントで発火してやればよいとのことでした。