5分で読めます

Netlifyでのファーストパーティトラッキング

シンプルなリダイレクトルールを使用してNetlifyでファーストパーティプロキシを設定します。任意のスタティックサイトまたはフレームワークで機能します。

難易度: 簡単 - 設定ファイルに数行追加するだけです。

なぜこれが機能するのか（同一オリジン）

このアプローチは、あなたのウェブサイトと同じオリジンにある /api/_z/script.js を使用します。Firefox ETPおよび他のトラッキング保護は、クロスオリジンリクエストのみをブロックします。

ブラウザが見ているもの：yourdomain.com/api/_z/script.js → 同一オリジン ✅
Netlifyがリクエストをサーバー側でZenovayサーバーにリダイレクト（ブラウザには見えません）
リクエストがファーストパーティであるため、すべてのトラッキング保護がバイパスされます

開始する前に

以下をご確認ください：

Netlifyにデプロイされたプロジェクト
Zenovayトラッキングコード（Domains → your site → General の下の Tracking script カードで見つけることができます）
プロジェクトのビルド設定へのアクセス

トラッキングコードの形式

トラッキングコードは ZV_XXXXXXXXXX のようになります

ZV_ で始まります
その後に10文字（大文字と数字）
大文字と小文字を区別します - 正確にコピーしてください

例：ZV_Q8U0GYD70WR

Domain General settings ページの表示。Tracking script カードとファーストパーティタブを含む画面 — Domains → your site → General の下でトラッキングコードとファーストパーティタブを見つけてください。

オプション 1: _redirects ファイルを使用（最も簡単）

プロキシを設定する最も簡単な方法は、Netlifyの _redirects ファイルを使用することです。

ステップ 1: リダイレクトファイルを作成

public/ フォルダ（またはスタティックアセットが格納される場所）に _redirects ファイルを作成します：

public/_redirectsTEXT

# Zenovay first-party tracking proxy
/api/_z/*  https://api.zenovay.com/fp/:splat  200

仕組み： 200 ステータスコードにより、これはリダイレクトではなくリライト（プロキシ）になります。ブラウザはあなたのドメインを見ていますが、NetlifyはバックグラウンドでゼノバイのAPIから取得します。

ステップ 2: トラッキングスクリプトを追加

あなたの HTMLHTML

<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="/api/_z/script.js">
</script>

ステップ 3: デプロイ

TerminalBash

netlify deploy --prod

または、継続的なデプロイが設定されている場合は、Gitリポジトリにプッシュしてください。

オプション 2: netlify.toml を使用（より明示的）

より複雑な設定の場合は、netlify.toml を使用します：

ステップ 1: netlify.toml を作成または更新

プロジェクトルートの netlify.toml にリダイレクトルールを追加します：

netlify.tomlTOML

# Zenovay first-party tracking proxy
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

既に netlify.toml がある場合は、既存のファイルにリダイレクトを追加します：

netlify.toml (既存の設定あり)TOML

[build]
command = "npm run build"
publish = "dist"

# Zenovay first-party tracking proxy
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# Your other redirects...
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

順序が重要です！ Zenovayリダイレクトを、キャッチオールリダイレクト（SPAフォールバックなど）の前に配置してください。Netlifyはリダイレクトを順に処理します。

ステップ 2: トラッキングスクリプトを追加

あなたの HTMLHTML

<script defer
data-tracking-code="YOUR_TRACKING_CODE"
src="/api/_z/script.js">
</script>

ステップ 3: デプロイ

TerminalBash

netlify deploy --prod

フレームワーク別の例

React (Create React App)

public/_redirectsTEXT

/api/_z/*  https://api.zenovay.com/fp/:splat  200

public/index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="YOUR_TRACKING_CODE" src="/api/_z/script.js"></script>
  <!-- other head elements -->
</head>
<body>
  <div id="root"></div>
</body>
</html>

Vue.js (Vite)

public/_redirectsTEXT

/api/_z/*  https://api.zenovay.com/fp/:splat  200

index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <script defer data-tracking-code="YOUR_TRACKING_CODE" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

Gatsby

netlify.tomlTOML

[build]
command = "gatsby build"
publish = "public"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

gatsby-ssr.jsJSX

import React from 'react'

export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
  <script
    key="zenovay"
    defer
    data-tracking-code="YOUR_TRACKING_CODE"
    src="/api/_z/script.js"
  />
])
}

Hugo

static/_redirectsTEXT

/api/_z/*  https://api.zenovay.com/fp/:splat  200

layouts/partials/head.htmlHTML

<script defer data-tracking-code="YOUR_TRACKING_CODE" src="/api/_z/script.js"></script>

11ty (Eleventy)

src/_redirectsTEXT

/api/_z/*  https://api.zenovay.com/fp/:splat  200

_redirects が出力にコピーされることを確認するため、.eleventy.js に以下を追加します：

.eleventy.jsJavaScript

module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/_redirects");
// ... rest of config
}

動作確認

Netlify ダッシュボードで確認

Netlify ダッシュボードであなたのサイトに移動
Site configuration → Redirects をクリック
/api/_z/* リダイレクトがリストされていることを確認

Network タブで確認

デプロイされたサイトにアクセス
DevTools を開く（F12）
Network タブに移動
ページをリロード
/api/_z/script.js を探す

以下が表示されるはずです：

Status: 200
Domain: あなたの Netlify ドメイン
Response: JavaScript コード

Firefox の Strict モードでテスト

Firefox を開く
Settings → Privacy & Security → Enhanced Tracking Protection: Strict
あなたのサイトにアクセス
スクリプトが正常に読み込まれることを確認

トラブルシューティング

リダイレクトが 404 を返す

原因： _redirects ファイルが公開されていないか、間違った場所にあります。

解決策：

_redirects が公開ディレクトリ（通常は public/ または dist/）にあることを確認
ビルドツール用に、ビルド中にファイルがコピーされることを確認
Netlify ダッシュボード → Redirects で認識されているか確認

リダイレクトがループを引き起こす

原因： 別のリダイレクトが干渉しています。

解決策：

netlify.toml で force = true を使用して他のルールをオーバーライド
Zenovayリダイレクトがキャッチオールルールの前に来ていることを確認
_redirects と netlify.toml ルール間の競合がないか確認

スクリプトが読み込まれるが HTML を返す

原因： キャッチオール SPA リダイレクトがリクエストを傍受しています。

解決策： Zenovay リダイレクトを SPA フォールバックの前に配置します：

netlify.tomlTOML

# This MUST come first
[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

# SPA fallback comes after
[[redirects]]
from = "/*"
to = "/index.html"
status = 200

ジオロケーションが間違った場所を表示している

原因： Netlify のプロキシはクライアント IP を自動的に転送しません。

解決策： 残念ながら、Netlify のシンプルなリダイレクトはカスタムヘッダーをサポートしていません。ジオロケーションは Netlify のエッジサーバーの場所に基づきます。正確なジオロケーションの場合は、以下を検討してください：

Netlify Functions（Edge Functions）を使用 - より複雑な設定
Netlify の前に Cloudflare Workers を使用

高度な設定：Netlify Edge Functions を使用

より多くの制御（IP 転送を含む）の場合は、Netlify Edge Functions を使用できます：

netlify/edge-functions/zenovay-proxy.tsTypeScript

import type { Context } from '@netlify/edge-functions'

export default async (request: Request, context: Context) => {
const url = new URL(request.url)
const path = url.pathname.replace('/api/_z/', '')
const targetUrl = `https://api.zenovay.com/fp/${path}${url.search}`

// Get client IP
const clientIP = context.ip || ''

const headers = new Headers(request.headers)
headers.set('X-Zenovay-Real-IP', clientIP)
headers.delete('Host')

const response = await fetch(targetUrl, {
  method: request.method,
  headers: headers,
  body: request.body,
})

const responseHeaders = new Headers(response.headers)
responseHeaders.set('Access-Control-Allow-Origin', '*')

return new Response(response.body, {
  status: response.status,
  headers: responseHeaders,
})
}

export const config = {
path: '/api/_z/*',
}

完全な例

プロジェクト構造TEXT

my-netlify-site/
├── netlify.toml
├── public/
│   ├── _redirects
│   └── index.html
├── src/
│   └── ...
└── package.json

netlify.tomlTOML

[build]
command = "npm run build"
publish = "dist"

[[redirects]]
from = "/api/_z/*"
to = "https://api.zenovay.com/fp/:splat"
status = 200
force = true

public/index.htmlHTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Site</title>
  <script defer data-tracking-code="YOUR_TRACKING_CODE" src="/api/_z/script.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
</html>

最終チェックリスト

完了する前に、すべての以下を確認してください：

_redirects または netlify.toml に Zenovay リダイレクトルールが含まれている
リダイレクトルールが SPA キャッチオールルールの前にある
スクリプトタグが /api/_z/script.js を使用している（Zenovay の直接 URL ではない）
data-tracking-code 属性に正しいトラッキングコードが含まれている
プロジェクトがデプロイされている（ローカルで実行していない）
Firefox で Enhanced Tracking Protection を Strict に設定してテストされている
Zenovay ダッシュボードに訪問が表示されている

次のステップ

Custom Events - ユーザーインタラクションを追跡
Visitor Identification - アナリティクスをユーザーにリンク
Troubleshooting - 問題に関する詳細なヘルプ

Netlifyでのファーストパーティ トラッキング

開始する前に

オプション 1: _redirects ファイルを使用（最も簡単）

ステップ 1: リダイレクトファイルを作成

ステップ 2: トラッキングスクリプトを追加

ステップ 3: デプロイ

オプション 2: netlify.toml を使用（より明示的）

ステップ 1: netlify.toml を作成または更新

ステップ 2: トラッキングスクリプトを追加

ステップ 3: デプロイ

フレームワーク別の例

React (Create React App)

Vue.js (Vite)

Gatsby

Hugo

11ty (Eleventy)

動作確認

Netlify ダッシュボードで確認

Network タブで確認

Firefox の Strict モードでテスト

トラブルシューティング

リダイレクトが 404 を返す

リダイレクトがループを引き起こす

スクリプトが読み込まれるが HTML を返す

ジオロケーションが間違った場所を表示している

高度な設定：Netlify Edge Functions を使用

完全な例

最終チェックリスト

次のステップ

Netlifyでのファーストパーティトラッキング