メインコンテンツへスキップ
Zenovaydocs
4分で読めます

Next.js クイックスタート

Next.js アプリケーションに Zenovay Analytics を統合します。App Router（Next.js 13+）と Pages Router の両方に対応しています。

インストール

npm パッケージは不要です。Zenovay は軽量なトラッキングスクリプトを使用し、レイアウトに追加するだけです。

トラッキングコードは Zenovay アプリから取得します。ドメインを開いてサイトをクリックし、一般設定ページに移動します。トラッキングスクリプトカードにスニペットとインストール確認ボタンが表示されます。

HTML、React、Next.js、First-Party タブとインストール確認ボタンを表示するトラッキングスクリプトカード
ドメインの一般設定ページからトラッキングコードをコピーします。

App Router（Next.js 13+）でのセットアップ

トラッキングスクリプトの追加

Next.js の Script コンポーネントを使用して、ルートレイアウトに Zenovay トラッキングスクリプトを追加します。

app/layout.tsxTypeScript
import Script from 'next/script';

export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
  <html lang="en">
    <body>
      {children}
      <Script
        defer
        data-tracking-code="YOUR_TRACKING_CODE"
        src="https://api.zenovay.com/z.js"
        strategy="afterInteractive"
      />
    </body>
  </html>
);
}

以上です！Zenovay が Next.js アプリのページビューを自動的にトラッキングするようになります。

Pages Router でのセットアップ

カスタムアプリにスクリプトを追加

_app.tsx ファイルを更新します。

pages/_app.tsxTypeScript
import Script from 'next/script';
import type { AppProps } from 'next/app';

export default function App({ Component, pageProps }: AppProps) {
return (
  <>
    <Component {...pageProps} />
    <Script
      defer
      data-tracking-code="YOUR_TRACKING_CODE"
      src="https://api.zenovay.com/z.js"
      strategy="afterInteractive"
    />
  </>
);
}

カスタムイベントのトラッキング

window.zenovay を使用してコンポーネント内でカスタムイベントをトラッキングします。

components/SignupButton.tsxTypeScript
'use client';

export function SignupButton() {
const handleSignup = async () => {
  // Your signup logic here
  const user = await signup();

  // Track the event
  if (window.zenovay) {
    window.zenovay('track', 'user_signup', {
      plan: 'free',
      source: 'homepage',
    });
  }
};

return (
  <button onClick={handleSignup}>
    Sign Up
  </button>
);
}

サーバーサイドトラッキング

サーバーサイドのイベントトラッキングでは、Zenovay トラッキングエンドポイントに直接イベントを送信します。これは API キーを必要としない公開エンドポイントです。

app/api/checkout/route.tsTypeScript
import { NextResponse } from 'next/server';

export async function POST(request: Request) {
const { amount } = await request.json();

// Process payment...

// Track conversion server-side via the public tracking endpoint
await fetch('https://api.zenovay.com/e/YOUR_TRACKING_CODE', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'User-Agent': request.headers.get('user-agent') || '',
    'X-Forwarded-For': request.headers.get('x-forwarded-for') || '',
  },
  body: JSON.stringify({
    type: 'event',
    payload: {
      name: 'purchase_complete',
      url: 'https://yoursite.com/checkout',
      props: { amount, currency: 'USD' },
    },
  }),
});

return NextResponse.json({ success: true });
}

トラッキングエンドポイント（/e/:trackingCode）は公開されており、API キーは不要です。正確な訪問者帰属のため、元のユーザーの User-Agent と IP アドレスを転送してください。

ユーザーの識別

認証されたユーザーとイベントを関連付けます。

app/dashboard/page.tsxTypeScript
'use client';

import { useEffect } from 'react';
import { useUser } from '@/hooks/useUser';

export default function Dashboard() {
const { user } = useUser();

useEffect(() => {
  if (user && window.zenovay) {
    window.zenovay('identify',user.id, {
      email: user.email,
      name: user.name,
      plan: user.subscription?.plan,
    });
  }
}, [user]);

return <div>Dashboard</div>;
}

リンククリックのトラッキング

外部リンククリックをトラッキングします。

components/ExternalLink.tsxTypeScript
'use client';

export function ExternalLink({ href, children }: { href: string; children: React.ReactNode }) {
const handleClick = () => {
  if (window.zenovay) {
    window.zenovay('track', 'external_link_click', {
      url: href,
      text: children?.toString(),
    });
  }
};

return (
  <a
    href={href}
    onClick={handleClick}
    target="_blank"
    rel="noopener noreferrer"
  >
    {children}
  </a>
);
}

SPA ページビュートラッキング

App Router でクライアントサイドナビゲーションのトラッキングを行います。

app/analytics.tsxTypeScript
'use client';

import { usePathname, useSearchParams } from 'next/navigation';
import { useEffect } from 'react';

export function Analytics() {
const pathname = usePathname();
const searchParams = useSearchParams();

useEffect(() => {
  if (window.zenovay) {
    window.zenovay('track', 'pageview', {
      path: pathname,
      title: document.title,
    });
  }
}, [pathname, searchParams]);

return null;
}

// Add to your root layout:
// <Analytics />

TypeScript サポート

グローバルな zenovay オブジェクトの型宣言を追加します。

types/zenovay.d.tsTypeScript
declare global {
interface Window {
  zenovay: (...args: any[]) => void;
}
}

export {};

開発環境での検証

開発環境では、ブラウザコンソールを開き、api.zenovay.com へのネットワークリクエストを監視することで、イベントが送信されていることを確認できます。Zenovay ダッシュボードもリアルタイムのイベントデータを表示します。

hooks/useZenovay.tsTypeScript
// Optional: Create a helper hook for cleaner tracking calls
export function useZenovay() {
const track = (eventName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('track',eventName, data);
  }
};

const identify = (userId: string, traits?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('identify', userId, traits);
  }
};

const trackGoal = (goalName: string, data?: Record<string, any>) => {
  if (window.zenovay) {
    window.zenovay('goal', goalName, data);
  }
};

return { track, identify, trackGoal };
}

次のステップ

Next.js アプリは Zenovay でアナリティクストラッキングを開始しました。ダッシュボードをチェックしてリアルタイムデータを確認してください。

さらに詳しく学びましょう。

このページは役に立ちましたか？