Cloudflare Workersを使用したファーストパーティトラッキング

Cloudflare Workersを使用してファーストパーティプロキシをセットアップします。このガイドは、サーバー側プロキシをセットアップできない共有ホスティング（Hostinger、GoDaddy、Bluehostなど）のユーザー向けです。

開始する前に

次の項目を確認してください：

• Cloudflareアカウント（無料ティアで問題ありません）- ここからサインアップ
• Cloudflareに追加されたドメイン（ステップ2を参照）
• Zenovayトラッキングコード（ドメイン → サイト → 一般で確認できます）

Cloudflare Workersを選ぶ理由

Cloudflare Workersはグローバルなエッジネットワーク（300以上のデータセンター）で実行されます。これは以下を意味します：

• **高速：**世界中で50ms以下の応答時間
• **無料：**無料プランで1日100,000リクエスト（ほとんどのサイトに十分以上）
• **シンプル：**管理するサーバーなし
• **信頼性：**99.99%のアップタイム

ステップ1：Cloudflareアカウントを作成する

すでにCloudflareアカウントを持っている場合は、ステップ2にスキップしてください。

1. cloudflare.comに移動
2. Sign Upをクリック（右上隅）
3. メールアドレスを入力
4. パスワード（最低8文字）を作成
5. Create Accountをクリック
6. メールをチェックして検証リンクをクリック

ステップ2：ドメインをCloudflareに追加する

1. Cloudflareダッシュボードにログイン
2. Add a Siteをクリック（大きな青いボタン）
3. ドメイン名を入力（例：yourdomain.com）
   • www.またはhttps://を含めないでください
   • ドメインだけ：yourdomain.com
4. Continueをクリック
5. Freeプランを選択してContinueをクリック
6. Cloudflareが既存のDNSレコードをスキャンします - Continueをクリック
7. Cloudflareは2つのネームサーバーを表示します：
   • bella.ns.cloudflare.com
   • troy.ns.cloudflare.com
8. これらのネームサーバーをコピー - 次のステップで必要になります

ドメインのネームサーバーを更新する

次に、ドメインをCloudflareにポイントする必要があります：

1. ドメインレジストラーにログイン（ドメインを購入した場所）：
   • GoDaddy：godaddy.com
   • Namecheap：namecheap.com
   • Google Domains：domains.google.com
   • Hostinger：hostinger.com
2. ドメインのDNSまたはネームサーバー設定を見つける
3. 既存のネームサーバーをCloudflareのネームサーバーに置き換える
4. 変更を保存

ステップ3：Workerを作成する

1. Cloudflareダッシュボードのサイドバーで、Workers & Pagesをクリック
2. 青いCreateボタンをクリック
3. Create Workerをクリック
4. ワーカーに名前を付けます：zenovay-proxy
   • 小文字、数字、ハイフンのみを使用
   • スペースは許可されません
5. Deployをクリック

成功メッセージが表示されます。次にプロキシコードを追加する必要があります。

ステップ4：プロキシコードを追加する

1. デプロイ後、Edit codeをクリック（またはWorkerに移動して「Edit code」をクリック）
2. デフォルトコード付きのコードエディタが表示されます
3. 既存のコードをすべて選択（MacではCmd+A、WindowsではCtrl+A）
4. 削除（DeleteまたはBackspaceキーを押す）
5. 次のコードをコピーして貼り付けします：

// Zenovay First-Party Proxy Worker
// This proxies tracking requests through your domain to bypass ad blockers

export default {
async fetch(request) {
  const url = new URL(request.url);

  // Get the real visitor IP address (for accurate geolocation)
  const clientIP = request.headers.get('CF-Connecting-IP') || '';

  // Determine the target URL based on the request path
  let targetUrl;
  if (url.pathname === '/script.js' || url.pathname === '/z.js') {
    // Script requests go to the regular endpoint
    targetUrl = `https://api.zenovay.com/z.js${url.search}`;
  } else {
    // All other requests (events, settings) go through first-party endpoint
    targetUrl = `https://api.zenovay.com/fp${url.pathname}${url.search}`;
  }

  // Copy the original request headers
  const headers = new Headers(request.headers);

  // IMPORTANT: Forward the real visitor IP for accurate geolocation
  headers.set('X-Zenovay-Real-IP', clientIP);

  // Remove the Host header (we're proxying to a different domain)
  headers.delete('Host');

  // Handle CORS preflight requests
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type',
      },
    });
  }

  try {
    // Forward the request to Zenovay API
    const response = await fetch(targetUrl, {
      method: request.method,
      headers: headers,
      body: request.body,
    });

    // Add CORS headers to the response
    const responseHeaders = new Headers(response.headers);
    responseHeaders.set('Access-Control-Allow-Origin', '*');

    // Return the response to the visitor's browser
    return new Response(response.body, {
      status: response.status,
      headers: responseHeaders,
    });
  } catch (error) {
    // If something goes wrong, return an error
    return new Response(JSON.stringify({ error: 'Proxy error' }), {
      status: 502,
      headers: { 'Content-Type': 'application/json' },
    });
  }
}
}

6. Save and Deployをクリック（右上隅）
7. 「Worker deployed successfully」メッセージが表示されるまで待つ

ステップ5：カスタムドメインを追加する

次に、ワーカーをドメインに接続します：

1. Cloudflareダッシュボードでワーカーに移動
2. Settingsタブをクリック（「Triggers」ではなく - Settingsに移動しました）
3. Domains & Routesセクションを見つけるまでスクロール
4. Add → Custom Domainをクリック
5. サブドメインを入力：z.yourdomain.com
   • yourdomain.comを実際のドメインに置き換える
   • z.プレフィックスをそのまま保つ
6. Add Custom Domainをクリック
7. Cloudflareは自動的に：
   • z.yourdomain.comのDNSレコードを作成
   • SSLサーティフィケート（HTTPS）をプロビジョニング
   • これは1～2分かかります

ステップ6：Workerをテストする

トラッキングスクリプトを追加する前に、Workerが機能していることを確認しましょう：

1. 新しいブラウザタブを開く
2. https://z.yourdomain.com/script.jsに移動
   • yourdomain.comを実際のドメインに置き換える
3. JavaScriptコード（大量のミニファイされたコード）が表示されるはずです

ステップ7：ウェブサイトにトラッキングスクリプトを追加する

このコードをウェブサイトの<head>セクションに追加します。トラッキングコードはZenovayアプリのドメイン → サイト → 一般で確認できます。

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
trackingCode: 'YOUR_TRACKING_CODE',
apiUrl: 'https://z.yourdomain.com',
settingsEndpoint: '/settings'
};
var script = document.createElement('script');
script.src = 'https://z.yourdomain.com/script.js';
script.defer = true;
document.head.appendChild(script);
</script>

置き換えるもの：

実際の値の例：

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
trackingCode: 'ZV_Q8U0GYD70WR',
apiUrl: 'https://z.mywebsite.com',
settingsEndpoint: '/settings'
};
var script = document.createElement('script');
script.src = 'https://z.mywebsite.com/script.js';
script.defer = true;
document.head.appendChild(script);
</script>

このコードを追加する場所：

• WordPress：「Insert Headers and Footers」というプラグインを使用するか、テーマのheader.phpに追加
• **Wix：**Settings → Custom Code → Head Code
• **Squarespace：**Settings → Advanced → Code Injection → Header
• **Shopify：**Online Store → Themes → Edit Code → theme.liquid（<head>セクション内）
• HTMLファイル：<head>タグと</head>タグの間
• **その他のCMS：**設定で「Custom Code」または「Header Scripts」を探す

ステップ8：動作を確認する

チェック1：ネットワークタブ（任意のブラウザ）

1. Chrome、Firefox、またはEdgeでウェブサイトを開く
2. F12キーを押す（MacではCmd+Option+I）してDevToolsを開く
3. Networkタブをクリック
4. ウェブサイトをリフレッシュ（Cmd+RまたはCtrl+R）
5. フィルター/検索ボックスにscript.jsと入力
6. z.yourdomain.com/script.jsへのリクエストを探す

表示されるもの：

• Status： 200（OK）
• Domain： z.yourdomain.com（api.zenovay.comではなく、あなたのドメイン）

チェック2：Firefox Strict モード（最も重要！）

Firefoxには最も厳密なトラッキング保護があります。Firefoxで動作すれば、すべてのブラウザで動作します。

1. Firefoxブラウザを開く
2. メニュー（☰）→ Settingsをクリック
3. 左側のサイドバーでPrivacy & Securityをクリック
4. 「Enhanced Tracking Protection」の下で、Strictを選択
5. 設定を閉じてウェブサイトを訪問
6. DevTools（F12）→ Network タブを開く
7. ページをリフレッシュ
8. script.jsを検索 - ステータス200で読み込まれるはずです

チェック3：Zenovayダッシュボード

1. app.zenovay.comに移動してログイン
2. ウェブサイトをクリック
3. 別のタブでウェブサイトを訪問
4. 1～2分以内に、ダッシュボードに訪問が表示されるはずです

最終チェックリスト

完了する前に、これらをすべて確認してください：

• Workerがz.yourdomain.comにデプロイされている（JavaScriptコードで応答）
• カスタムドメインがz.プレフィックスを使用している（analytics.、metrics.などではない）
• スクリプトタグにdata-cfasync="false"属性が含まれている
• window.ZENOVAY_TRACKER_CONFIGが正しいtrackingCodeで設定されている
• スクリプト内の両方のURLがカスタムドメインz.yourdomain.comを使用している
• Enhanced Tracking Protectionを「Strict」に設定したFirefoxでテスト
• Zenovayダッシュボードに訪問が表示されている

トラブルシューティング

Workerが522または524エラーを返す

**原因：**Zenovay APIへの接続がタイムアウト。

解決策：

1. api.zenovay.comにアクセス可能なことを確認（ブラウザで訪問）
2. プロキシコード内にタイポがないことを確認
3. ワーカーの再デプロイを試みる（Edit code → Save and Deploy）

カスタムドメインがSSLエラーを表示

**原因：**SSLサーティフィケートがまだプロビジョニングされていない。

解決策： 1～5分待ってください。Cloudflareは自動的にSSLサーティフィケートをプロビジョニングします。10分以上かかる場合は、ドメインのネームサーバーがCloudflareを正しくポイントしていることを確認してください。

スクリプトは読み込まれるがダッシュボードにデータがない

**原因：**通常、トラッキングコードの不一致。

解決策：

1. ブラウザのDevToolsコンソール（F12 → Console タブ）を開く
2. 赤いエラーメッセージを探す
3. trackingCodeがZenovayダッシュボードと正確に一致することを確認（大文字と小文字を区別）
4. ウェブサイトドメインがZenovayに登録されていることを確認

「スクリプトを実行中」だが何も起こらない

**原因：**設定のapiUrlが間違っている。

解決策： window.ZENOVAY_TRACKER_CONFIGが正しいapiUrlを持つことを確認してください：

apiUrl: 'https://z.yourdomain.com',  // 実際のカスタムドメイン

地理的位置が間違った場所を表示

**原因：**実際のIPがZenovayに転送されていない。

解決策： ワーカーコードに次の行が含まれていることを確認してください：

headers.set('X-Zenovay-Real-IP', clientIP);

Firefox/Edgeがまだブロック中

原因：analytics.*やmetrics.*などのブロックされたサブドメインを使用している。

解決策： カスタムドメインをz.yourdomain.comに変更します。次が必要です：

1. Workers & Pages → ワーカー → Settings に移動
2. 古いカスタムドメインを削除
3. 新しいカスタムドメインを追加：z.yourdomain.com
4. トラッキングスクリプト内の両方のURLを更新

詳細：複数のウェブサイト

複数のウェブサイトがある場合、1つのワーカーをすべてに対して使用できます：

1. 同じワーカーに複数のカスタムドメインを追加：

   • z.website1.com
   • z.website2.com
   • z.website3.com

2. 各ウェブサイトは独自のトラッキングコードを使用：

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
  trackingCode: 'ZV_SITE1CODE',
  apiUrl: 'https://z.website1.com',
  settingsEndpoint: '/settings'
};
var s = document.createElement('script');
s.src = 'https://z.website1.com/script.js';
s.defer = true;
document.head.appendChild(s);
</script>

<script data-cfasync="false">
window.ZENOVAY_TRACKER_CONFIG = {
  trackingCode: 'ZV_SITE2CODE',
  apiUrl: 'https://z.website2.com',
  settingsEndpoint: '/settings'
};
var s = document.createElement('script');
s.src = 'https://z.website2.com/script.js';
s.defer = true;
document.head.appendChild(s);
</script>

次のステップ

• カスタムイベント - ボタンクリックとフォーム送信を追跡
• 訪問者の識別 - アナリティクスをユーザーアカウントに接続
• トラブルシューティング - 一般的な問題についての詳細なヘルプ

ヘルプが必要ですか？

行き詰まった場合：

1. 上記の各ステップを再確認
2. z.yourdomain.comを使用していることを確認（analytics.*やmetrics.*ではない）
3. Firefox Strictモードでテスト
4. ブラウザコンソールでエラーを確認（F12 → Console タブ）

それでも行き詰まっていますか？ [email protected] にサポートに連絡してください：

• ドメイン名
• ネットワークタブのスクリーンショット
• コンソールタブの任意のエラーメッセージ