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

Nuxt に Zenovay Analytics を追加する

Zenovay Analytics は Nuxt と相性が良く、Vue 開発者がサーバーサイドレンダリング・静的生成・ハイブリッドの Nuxt アプリケーション全体で訪問者をトラッキングするための、高速でプライバシーに配慮した方法を提供します。インテグレーションにかかる時間は約 2 分です。nuxt.config.ts またはクライアントサイドのプラグインとしてトラッキングスクリプトを追加するだけで、Zenovay はすぐにページビュー・リファラー・ブラウザデータ・地理的情報のリアルタイム記録を開始します。トラッカーは 1 KB 未満で、Core Web Vitals を保護するために非同期で読み込まれ、Vue Router を通じてクライアントサイドのルート変更を自動的に検出します。このガイドでは、設定ベースのアプローチとプラグインアプローチの両方、コンポーザブルを使ったカスタムイベントトラッキング、ユーザー識別、クッキーレス GDPR 準拠モード、Nuxt 3 固有のサーバーサイドレンダリングに関する考慮事項について説明します。

クイックスタート（2 分）

Nuxt に Zenovay を追加する方法は 2 つあります。プロジェクトに合った方を選んでください。

ステップ 1：トラッキングコードを取得する

Zenovay ダッシュボードにサインインし、Settings → Tracking Code からトラッキングコードをコピーします。

オプション A：nuxt.config.ts（推奨）

最もシンプルなアプローチです。Nuxt の設定ファイルの app.head にスクリプトを追加します。

nuxt.config.tsTypeScript
export default defineNuxtConfig({
app: {
  head: {
    script: [
      {
        defer: true,
        'data-tracking-code': 'YOUR_TRACKING_CODE',
        src: 'https://api.zenovay.com/z.js',
      },
    ],
  },
},
})

以上です！Zenovay はクライアントサイドのナビゲーションを含む、すべての Nuxt ルートでページビューを自動的にトラッキングします。

オプション B：クライアントサイドプラグイン

より細かいコントロールが必要な場合は、クライアント上でスクリプトを読み込む Nuxt プラグインを作成します。

plugins/zenovay.client.tsTypeScript
export default defineNuxtPlugin(() => {
if (typeof document === 'undefined') return;

const script = document.createElement('script');
script.defer = true;
script.dataset.trackingCode = 'YOUR_TRACKING_CODE';
script.src = 'https://api.zenovay.com/z.js';
document.head.appendChild(script);
})

.client.ts というサフィックスにより、このプラグインはブラウザ上でのみ実行され、SSR 中には実行されません。

ステップ 2：インストールを確認する

npx nuxi dev で開発サーバーを起動し、ページにアクセスして Zenovay ダッシュボードを確認します。数秒以内にリアルタイムの訪問者が表示されるはずです。

SPA ナビゲーショントラッキング

Nuxt はクライアントサイドのルーティングに Vue Router を使用しています。Zenovay は History API（pushState / popstate）を通じてルートの変更を自動的に検出するため、すべてのナビゲーションで設定不要で新しいページビューが記録されます。

以下の操作に対応しています。

  • <NuxtLink> コンポーネント
  • navigateTo() によるプログラム的ナビゲーション
  • useRouter().push() の呼び出し
  • ブラウザの戻る/進むボタン

コンポーザブルを使ったカスタムイベント

アプリ全体でクリーンなアナリティクス呼び出しを行うための再利用可能なコンポーザブルを作成します。

composables/useZenovay.tsTypeScript
export function useZenovay() {
function track(event: string, data?: Record<string, any>) {
  if (import.meta.client && window.zenovay) {
    window.zenovay('track', event, data);
  }
}

function identify(userId: string, traits?: Record<string, any>) {
  if (import.meta.client && window.zenovay) {
    window.zenovay('identify', userId, traits);
  }
}

function trackGoal(goalName: string, data?: Record<string, any>) {
  if (import.meta.client && window.zenovay) {
    window.zenovay('goal', goalName, data);
  }
}

function trackRevenue(amount: number, currency = 'USD') {
  if (import.meta.client && window.zenovay) {
    window.zenovay('revenue', amount, currency);
  }
}

return { track, identify, trackGoal, trackRevenue };
}

Nuxt は composables/ ディレクトリからコンポーザブルを自動インポートするため、インポート文なしでどこでも使用できます。

pages/pricing.vueVUE
<script setup lang="ts">
const { track } = useZenovay();

function handleUpgrade(plan: string) {
track('upgrade_clicked', { plan, location: 'pricing_page' });
navigateTo('/checkout?plan=' + plan);
}
</script>

<template>
<div>
  <h1>Pricing</h1>
  <button @click="handleUpgrade('pro')">Upgrade to Pro</button>
  <button @click="handleUpgrade('scale')">Upgrade to Scale</button>
</div>
</template>

コンポーネントでのイベントトラッキング

components/ContactForm.vueVUE
<script setup lang="ts">
const { track } = useZenovay();

const form = reactive({ name: '', email: '', message: '' });

async function handleSubmit() {
track('form_submitted', {
  form: 'contact',
  has_message: form.message.length > 0,
});

await $fetch('/api/contact', { method: 'POST', body: form });
}
</script>

<template>
<form @submit.prevent="handleSubmit">
  <input v-model="form.name" placeholder="Name" required />
  <input v-model="form.email" type="email" placeholder="Email" required />
  <textarea v-model="form.message" placeholder="Message"></textarea>
  <button type="submit">Send</button>
</form>
</template>

サーバーサイドレンダリングに関する考慮事項

Nuxt 3 はデフォルトでページをサーバー上でレンダリングします。Zenovay スクリプトは完全にクライアント上で実行されるため、以下のルールを念頭に置いてください。

  • サーバーミドルウェア、API ルート、server/ ファイル内では window.zenovay を絶対に呼び出さないでください
  • クライアントサイドの呼び出しは常に import.meta.client または process.client でガードしてください
  • nuxt.config.ts のヘッドスクリプトはブラウザがスクリプトの読み込みを処理するため安全です
  • window オブジェクトが必要なプラグインには .client.ts サフィックスを使用してください
SSR の安全な書き方TypeScript
// ✅ 安全：import.meta.client でガードされている
if (import.meta.client && window.zenovay) {
window.zenovay('track', 'page_view');
}

// ✅ 安全：onMounted の中（クライアント専用のライフサイクルフック）
onMounted(() => {
if (window.zenovay) {
  window.zenovay('track', 'component_visible');
}
});

// ❌ 危険：SSR 中に実行される — エラーになります！
// window.zenovay('track', 'page_view');

ルートミドルウェアトラッキング

Nuxt のルートミドルウェアを使って特定のルート遷移をトラッキングします。

middleware/analytics.global.tsTypeScript
export default defineNuxtRouteMiddleware((to, from) => {
// クライアントサイドのナビゲーション時のみ実行される
if (import.meta.client && window.zenovay) {
  window.zenovay('track', 'route_change', {
    from: from.fullPath,
    to: to.fullPath,
  });
}
})

これはオプションです。Zenovay はすべてのナビゲーションでページビューを自動的にトラッキングします。特定の遷移にカスタムデータを添付する必要がある場合にのみ、ルートミドルウェアを使用してください。

クッキーレスモード

クッキーや localStorage を使用せずプライバシーに配慮したトラッキングを行うには、data-cookieless 属性を追加します。

nuxt.config.ts（クッキーレス）TypeScript
export default defineNuxtConfig({
app: {
  head: {
    script: [
      {
        defer: true,
        'data-tracking-code': 'YOUR_TRACKING_CODE',
        'data-cookieless': 'true',
        src: 'https://api.zenovay.com/z.js',
      },
    ],
  },
},
})

クッキーレスモードでは、Zenovay は訪問者の IP サブネット、ユーザーエージェント、日次ローテーションするソルトのサーバーサイドハッシュを使用し、クライアントデバイスに何も保存せずにユニーク訪問者数をカウントします。

ユーザーの識別

認証済みユーザーとアナリティクスデータを関連付けます。認証プラグインまたはレイアウト内で呼び出すのが適切です。

layouts/default.vueVUE
<script setup lang="ts">
const { identify } = useZenovay();
const { data: user } = await useFetch('/api/auth/user');

watch(user, (u) => {
if (u) {
  identify(u.id, {
    email: u.email,
    plan: u.plan,
  });
}
}, { immediate: true });
</script>

<template>
<div>
  <NuxtPage />
</div>
</template>

ゴールと収益のトラッキング

ゴールと収益のトラッキングTypeScript
const { trackGoal, trackRevenue } = useZenovay();

// コンバージョンゴールをトラッキングする
trackGoal('newsletter_signup', { source: 'footer' });

// 購入をトラッキングする
trackRevenue(49.99, 'USD');

TypeScript サポート

グローバルな zenovay 関数の型宣言を追加します。Nuxt はプロジェクトルートの *.d.ts ファイルを自動的にインクルードします。

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

export {};

環境ベースの設定

ランタイム設定を使用して、環境間でトラッキングコードを切り替えます。

nuxt.config.ts（ランタイム設定を使用）TypeScript
export default defineNuxtConfig({
runtimeConfig: {
  public: {
    zenovayTrackingCode: 'YOUR_TRACKING_CODE',
  },
},
})
plugins/zenovay.client.ts（動的）TypeScript
export default defineNuxtPlugin(() => {
const config = useRuntimeConfig();
const trackingCode = config.public.zenovayTrackingCode;

if (!trackingCode || typeof document === 'undefined') return;

const script = document.createElement('script');
script.defer = true;
script.dataset.trackingCode = trackingCode;
script.src = 'https://api.zenovay.com/z.js';
document.head.appendChild(script);
})

環境変数 NUXT_PUBLIC_ZENOVAY_TRACKING_CODE を設定してデフォルト値を上書きします。

次のステップ

Nuxt アプリが Zenovay でトラッキングを開始しました！ダッシュボードでアナリティクスを確認してください。

続けて学習するには：

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