React + Vite の構築したサイトに、PostHogを導入する

PostHogの導入手順を解説していきます。

PostHogは、アクセス解析のほか、ABテストやFeature flagsという新機能を安全にデプロイおよびロールバックするような機能も提供しています。
Googleオプティマイズが終了しているので、ABテストツールの代替案としても使えると思います。

環境

React 18 (TypeScript)
Vite 5

手順

1. PostHogのパッケージをインストール

yarn add posthog-js

1. 環境変数に設定を保存
   設定する値は、settingから確認できます。

.env.local

VITE_PUBLIC_POSTHOG_KEY=phc_xxxxxxxx
VITE_PUBLIC_POSTHOG_HOST=https://us.i.posthog.com

1. コードにPostHogの設定を書いていく

src/main.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { PostHogProvider } from 'posthog-js/react'
const options = {
  api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <PostHogProvider
      apiKey={import.meta.env.VITE_PUBLIC_POSTHOG_KEY}
      options={options}
    >
      <App />
    </PostHogProvider>
  </React.StrictMode>
)

コードの設定は以上で、完了です。

これで、PostHogにアクセスデータが送信されるようになりました。

PostHogのツールバーを表示する

PostHogには、開発中のサイトにツールバーを表示して、ヒートマップの表示や要素のInspect機能などを使うことができます。
表示するには、Toolbarにアクセスし、「Add authorized URL」をクリックして、開発環境のURLを登録するとツールバーが表示されるようになります。

例えば、ツールバーでInspectを実行するとこのようになる。

ツールバーを使うと、ヒートマップの表示なども可能です。