3分で読めます

React インテグレーション

シンプルなフック実装を使用して、React アプリケーションに Zenovay アナリティクスを追加します。

クイックセットアップ

ダッシュボードの Domains → your site → General でトラッキングコードを見つけます。

React タブに useEffect スニペットと追跡コードを表示するトラッキングスクリプトカード — トラッキングコードは各ドメインの General ページにあります。スニペットは React タブを使用してください。

ルートコンポーネントでトラッキングスクリプトを追加します。

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

export default App;

YOUR_TRACKING_CODE を Zenovay ダッシュボードからあなたのトラッキングコードで置き換えます。

カスタムフック（推奨）

より良い再利用性のために、カスタムフックを作成します。

hooks/useZenovay.jsJSX

import { useEffect } from 'react';

export function useZenovay(trackingCode) {
useEffect(() => {
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);

  return () => {
    // Cleanup if needed
    const existingScript = document.querySelector(`script[data-tracking-code="${trackingCode}"]`);
    if (existingScript) {
      existingScript.remove();
    }
  };
}, [trackingCode]);
}

その後、App で使用します。

App.jsxJSX

import { useZenovay } from './hooks/useZenovay';

function App() {
useZenovay('YOUR_TRACKING_CODE');

return <div>Your App</div>;
}

export default App;

TypeScript サポート

hooks/useZenovay.tsTSX

import { useEffect } from 'react';

export function useZenovay(trackingCode: string): void {
useEffect(() => {
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);

  return () => {
    const existingScript = document.querySelector(`script[data-tracking-code="${trackingCode}"]`);
    if (existingScript) {
      existingScript.remove();
    }
  };
}, [trackingCode]);
}

ファーストパーティトラッキング（広告ブロッカーをバイパス）

より高い精度のために、カスタムサブドメインを使用したファーストパーティトラッキングを使用します。

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const script = document.createElement('script');
  script.src = 'https://metrics.yourdomain.com/z.js'; // Your CNAME subdomain
  script.defer = true;
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

export default App;

ファーストパーティトラッキングには CNAME DNS レコードが必要です。セットアップ手順はファーストパーティトラッキングガイドを参照してください。

環境変数

環境変数でトラッキングコードを保存します。

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const trackingCode = process.env.REACT_APP_ZENOVAY_ID;
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

.envBash

REACT_APP_ZENOVAY_ID=ZV_ABC123XYZ

Vite アプリケーション

Vite プロジェクトの場合、import.meta.env を使用します。

App.jsxJSX

import { useEffect } from 'react';

function App() {
useEffect(() => {
  const trackingCode = import.meta.env.VITE_ZENOVAY_ID;
  if (!trackingCode) return;

  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.defer = true;
  script.setAttribute('data-tracking-code', trackingCode);
  document.head.appendChild(script);
}, []);

return <div>Your App</div>;
}

確認

インストール後、トラッキングが機能していることを確認します。

ブラウザでサイトを開きます
DevTools → Network タブを開きます
api.zenovay.com またはファーストパーティドメインへのリクエストを探します
Zenovay ダッシュボードで受信データを確認します

トラブルシューティング

スクリプトが読み込まれない場合

トラッキングコードが正しいことを確認します
Content Security Policy（CSP）の問題をチェックします
スクリプトが広告ブロッカーでブロックされていないことを確認します

データが表示されない場合

データが処理されるまで数分待ちます
Network タブで成功したリクエストを確認します
localhost を使用していないことを確認します（デバッグモードが有効になっている場合を除く）