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

トラッキングスクリプトのインストール

わずか1行のコードでZenovayアナリティクスをウェブサイトに追加できます。設定は不要です。

クイックインストール（30秒）

このスクリプトをコピーして、ウェブサイトの <head> セクションに貼り付けます：

基本的なインストールHTML
<!-- Zenovay Analytics v2.0.6 -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

YOUR_TRACKING_CODE を Zenovay ダッシュボード から取得したトラッキングコードに置き換えてください。形式は ZV_ABC123XYZ のようなものです。

ドメイン設定のトラッキングスクリプトカード。HTML、React、Next.js、ファーストパーティプロキシのタブと検証ボタンが表示されています。
トラッキングコードは、ドメイン → サイト → 一般設定 で見つけることができます。

以上です！ スクリプトは自動的に以下を追跡します：

  • ページビュー
  • 訪問者セッション
  • 地理的位置
  • デバイスとブラウザ情報
  • リファラルソース
  • UTMパラメータ

フレームワーク別のインストール

HTML / 静的サイト

閉じるタグ </head> の直前に追加します：

index.htmlHTML
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- Zenovay Analytics v2.0.6 -->
<script defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>
</head>
<body>
<!-- Your content -->
</body>
</html>

React

ルートコンポーネントの useEffect でスクリプトを追加します：

App.jsx or index.jsJSX
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;

Next.js (App Router)

ルートレイアウトファイルに追加します：

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

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

Next.js (Pages Router)

_document.tsx に追加します：

pages/_document.tsxTSX
import { Html, Head, Main, NextScript } from 'next/document';
import Script from 'next/script';

export default function Document() {
return (
  <Html>
    <Head>
      <Script
        src="https://api.zenovay.com/z.js"
        data-tracking-code="YOUR_TRACKING_CODE"
        strategy="afterInteractive"
      />
    </Head>
    <body>
      <Main />
      <NextScript />
    </body>
  </Html>
);
}

Vue.js

index.html に追加するか、App.vue で使用します：

index.htmlHTML
<!DOCTYPE html>
<html>
<head>
<!-- Zenovay Analytics -->
<script defer
  data-tracking-code="YOUR_TRACKING_CODE"
  src="https://api.zenovay.com/z.js">
</script>
</head>
<body>
<div id="app"></div>
</body>
</html>

WordPress

オプション1：プラグインを使用（推奨）

  1. Insert Headers and Footers プラグインをインストールします
  2. 設定 → Insert Headers and Footers に移動します
  3. 「Scripts in Header」に以下を貼り付けます：
WordPress ヘッダースクリプトHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

オプション2：テーマを編集

header.php に </head> の前に追加します：

wp-content/themes/your-theme/header.phpPHP
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>
</head>

Shopify

  1. オンラインストア → テーマ に移動します
  2. その他の操作 → コードを編集 をクリックします
  3. theme.liquid を開きます
  4. </head> の前に追加します：
theme.liquidHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>
</head>

Webflow

  1. プロジェクト設定 → カスタムコード に移動します
  2. ヘッドコード セクションに貼り付けます：
Webflow ヘッドコードHTML
<!-- Zenovay Analytics -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="https://api.zenovay.com/z.js">
</script>

Squarespace

  1. 設定 → 詳細 → コード注入 に移動します
  2. ヘッダー セクションに貼り付けます

インストールの検証

1. ブラウザコンソールをチェック

ブラウザの開発者ツール（F12）を開いて、以下を探します：

[Zenovay] Script executing... (v2.0.6)
Zenovay Analytics loaded { trackingCode: 'YOUR_TRACKING_CODE', enabled: true }

2. デバッグモードを有効にする

詳細なログを表示するには、ドメインの一般設定（ドメイン → サイトを選択 → 一般）でデバッグモードを有効にするか、デバッグ属性を追加します：

デバッグモードHTML
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
data-debug="true"
src="https://api.zenovay.com/z.js">
</script>

トラッカーが送信するすべてのイベント — タイプ、プロパティ、Cookie レス モード、GPC 状態、同意状態 — をページ内でビジュアルに確認するには、ドメイン設定で Debug Overlay を有効にし、URL に ?zenovay_debug=1 を付けて任意のページを読み込んでください。個人情報はマスクされます。

3. リアルタイムダッシュボードをチェック

Zenovay ダッシュボード にアクセスして、リアルタイムビューで訪問がリアルタイムで表示されるかを確認します。

スクリプト属性

データ属性でビヘイビアをカスタマイズします：

属性タイプデフォルト説明
data-tracking-code文字列必須トラッキングコード（例：ZV_ABC123）
data-debugブールfalseコンソールログを表示
data-allow-localhostブールfalselocalhost の訪問を追跡

広告ブロッカー保護

広告ブロッカーによって api.zenovay.com がブロックされる可能性があります。100% のトラッキング精度を得るために、ファーストパーティプロキシ を使用してください：

Firefox または Edge でブロックされたリクエストが表示される場合は、ファーストパーティプロキシ を設定して、トラッキングを独自のドメイン経由でルーティングしてください。

ファーストパーティプロキシスクリプトHTML
<!-- First-Party Proxy (bypasses ad blockers) -->
<!-- Requires proxy setup - see: docs.zenovay.com/guides/first-party-tracking -->
<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="/api/_z/script.js">
</script>

Content Security Policy (CSP)

サイトで CSP ヘッダーを使用する場合は、Zenovay を追加します：

CSP ヘッダーTEXT
Content-Security-Policy:
script-src 'self' https://api.zenovay.com;
connect-src 'self' https://api.zenovay.com;

トラブルシューティング

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

  1. トラッキングコードのタイプミスをチェック
  2. スクリプトが <head> に含まれていることを確認 （<body> ではなく）
  3. CSP ヘッダーを確認 - api.zenovay.com を許可されたソースに追加
  4. 広告ブロッカーを一時的に無効化 してテスト

ダッシュボードにイベントが表示されない

  1. 30秒待機 - イベントはバッチ処理されます
  2. ブラウザコンソールでエラーを確認
  3. デバッグモードを有効化 してイベントログを確認
  4. シークレット/プライベートウィンドウ でテストして拡張機能の影響を除外

広告ブロッカーがスクリプトをブロック

ファーストパーティプロキシ を設定して、トラッキングを独自のドメイン経由でルーティングしてください。

AI を使用してインストール

AI コーディングアシスタント（Cursor、Lovable、Replit）を使用している場合は、AI 統合プロンプト で コピー＆ペースト可能なプロンプトを確認してください。

次のステップ

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