クッキー同意の実装

クッキー同意を実装し、プライバシーコンプライアンスのためにZenovay Analyticsと統合する方法を学びます。

クッキーバナーは必要ですか?

Zenovayのクッキー使用

モード	クライアント側のストレージ	同意が必要
クッキーレスモード	なし（メモリ内、ウィンドウスコープのID）	通常は不要
デフォルトモード	リターニングビジターを認識するための単一のファーストパーティクッキー	必要な場合がある

Zenovayはサーバー側で常にクッキーレス：IPアドレスまたは個人データは保存されません。上の表は、トラッキングスクリプトがビジターのブラウザに書き込むものについてのみです。クッキーレスモードは、スクリプトがクッキーやlocalStorageエントリを書き込むことを防止します。

同意が必要な場合

同意が通常必要とされる場合:

• 永続クッキーの使用
• セッション間のトラッキング
• リターニングビジターの識別
• 個人データの収集

同意が必要でない場合:

• クッキーレスモードの使用（クッキーなし）
• 厳密に必要な機能
• 匿名の集約統計

クッキーレスモード（クッキーなし）

Zenovayトラッキングスクリプトをクッキーレスモードで実行でき、ビジターのブラウザに何も書き込みません。これを有効にする2つの方法があります。

オプション1: スクリプト属性。 スクリプトタグにdata-cookieless="true"を追加します：

<script
  defer
  data-tracking-code="YOUR_TRACKING_CODE"
  data-cookieless="true"
  src="https://api.zenovay.com/z.js"
></script>

オプション2: ウェブサイト設定。 ウェブサイトのダッシュボードを開き、設定に移動して、クッキーレストグルをオンにします（一般タブと詳細タブに表示されます）。「一般」タブはdata-cookieless="true"がすでに追加されたスニペットも再生成します。

クッキーレスモード：

• クッキーとlocalStorageを使用しない（メモリ内、ウィンドウスコープのIDのみ）
• 永続的な識別子を作成しない
• Zenovayトラッキングスクリプト自体のePrivacy法の同意前に法的に準拠
• リターニングビジターデータの精度がやや低い（ユニークユーザーが約10～15%減少することを予期）

読み込むその他のツール（Meta Pixel、Google Analyticsなど）は引き続き独自のクッキーを設定し、この設定に関係なく同意が必要な場合があります。

条件付きロード

基本的な同意チェック

// ロード前に同意をチェック
function loadZenovayIfConsented() {
  const consent = localStorage.getItem('analytics_consent');

  if (consent === 'granted') {
    loadZenovay();
  } else if (consent === 'denied') {
    // アナリティクスをロードしない
  } else {
    showConsentBanner();
  }
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.defer = true;
  document.head.appendChild(script);
}

// ページロード時に実行
loadZenovayIfConsented();

シンプルな同意バナー

<div id="cookie-banner" style="display: none;">
  <div class="cookie-content">
    <p>あなたの体験を向上させるためにアナリティクスを使用しています。</p>
    <button onclick="acceptCookies()">同意する</button>
    <button onclick="declineCookies()">拒否</button>
    <a href="/privacy">詳細を見る</a>
  </div>
</div>

<script>
function showConsentBanner() {
  document.getElementById('cookie-banner').style.display = 'block';
}

function acceptCookies() {
  localStorage.setItem('analytics_consent', 'granted');
  document.getElementById('cookie-banner').style.display = 'none';
  loadZenovay();
}

function declineCookies() {
  localStorage.setItem('analytics_consent', 'denied');
  document.getElementById('cookie-banner').style.display = 'none';
  // オプションでクッキーレスモードでロード
  loadZenovayCookieless();
}

function loadZenovayCookieless() {
  // data-cookieless="true"はトラッカーに、メモリ内のウィンドウスコープIDのみを使用するよう指示します
  // - クッキーなし、localStorageなし。
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  script.defer = true;
  document.head.appendChild(script);
}
</script>

人気のある同意プラットフォーム

Cookiebot統合

// Cookiebot同意を待つ
window.addEventListener('CookiebotOnAccept', function() {
  if (Cookiebot.consent.statistics) {
    loadZenovay();
  }
});

// 同意の変更を処理
window.addEventListener('CookiebotOnDecline', function() {
  // 同意が取り消された - トラッキングを停止
  if (window.zenovay) {
    window.zenovay('disable');
  }
});

Cookiebot設定:

1. Zenovayを「統計」カテゴリーに追加
2. クッキー名を設定: zenovay_session
3. プロバイダーを設定: zenovay.com
4. タイプを設定: HTTP
5. 有効期限を設定: セッションまたは1年

OneTrust統合

// OneTrust同意コールバック
function OptanonWrapper() {
  if (OnetrustActiveGroups.includes('C0002')) {
    // パフォーマンスクッキーに同意した
    loadZenovay();
  } else {
    // クッキーレスモードでロード
    loadZenovayCookieless();
  }
}

OneTrust カテゴリー:

• C0001: 厳密に必要
• C0002: パフォーマンス (Zenovay)
• C0003: 機能
• C0004: ターゲティング

Osano統合

// Osano同意コールバック
window.Osano.cm.addEventListener('osano-cm-consent-changed', function(event) {
  if (event.ANALYTICS === 'ACCEPT') {
    loadZenovay();
  }
});

Termly統合

// Termly同意コールバック
window.addEventListener('termly-consent-preferences-updated', function(e) {
  if (e.detail.analytics) {
    loadZenovay();
  }
});

Google同意モード

統合

// Google同意モードを初期化
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

gtag('consent', 'default', {
  'analytics_storage': 'denied'
});

// 同意時に更新
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    loadZenovay();
  }
}

Zenovayを使用

上記で示した条件付きロード方法を使用して、Google同意モードで同意が与えられた後のみZenovayをロードします：

// アナリティクス同意が与えられた後のみZenovayをロード
function updateConsent(granted) {
  gtag('consent', 'update', {
    'analytics_storage': granted ? 'granted' : 'denied'
  });

  if (granted) {
    const script = document.createElement('script');
    script.src = 'https://api.zenovay.com/z.js';
    script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
    script.defer = true;
    document.head.appendChild(script);
  }
}

React実装

同意コンテキスト

// ConsentContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const ConsentContext = createContext();

export function ConsentProvider({ children }) {
  const [consent, setConsent] = useState(() => {
    return localStorage.getItem('analytics_consent') || 'pending';
  });

  const grantConsent = () => {
    localStorage.setItem('analytics_consent', 'granted');
    setConsent('granted');
  };

  const denyConsent = () => {
    localStorage.setItem('analytics_consent', 'denied');
    setConsent('denied');
  };

  return (
    <ConsentContext.Provider value={{ consent, grantConsent, denyConsent }}>
      {children}
    </ConsentContext.Provider>
  );
}

export const useConsent = () => useContext(ConsentContext);

同意バナーコンポーネント

// CookieBanner.js
import { useConsent } from './ConsentContext';

export function CookieBanner() {
  const { consent, grantConsent, denyConsent } = useConsent();

  if (consent !== 'pending') return null;

  return (
    <div className="cookie-banner">
      <p>ウェブサイトのトラフィックを分析するためにクッキーを使用しています。</p>
      <button onClick={grantConsent}>同意する</button>
      <button onClick={denyConsent}>拒否</button>
    </div>
  );
}

条件付きアナリティクス

// Analytics.js
import { useEffect } from 'react';
import { useConsent } from './ConsentContext';

export function Analytics({ websiteId }) {
  const { consent } = useConsent();

  useEffect(() => {
    if (consent === 'granted') {
      const script = document.createElement('script');
      script.src = 'https://api.zenovay.com/z.js';
      script.setAttribute('data-tracking-code', websiteId);
      script.defer = true;
      document.head.appendChild(script);
    } else if (consent === 'denied') {
      // 同意が拒否されたときはアナリティクスをロードしません。
      // 最小限のトラッキングを希望する場合は、
      // data-cookieless="true"でスクリプトをロードしてください（クッキーなし、localStorageなし）。
    }
  }, [consent, websiteId]);

  return null;
}

Vue.js実装

<!-- CookieConsent.vue -->
<template>
  <div v-if="showBanner" class="cookie-banner">
    <p>アナリティクスのためにクッキーを使用しています。</p>
    <button @click="accept">同意する</button>
    <button @click="decline">拒否</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const showBanner = ref(false);

onMounted(() => {
  const consent = localStorage.getItem('analytics_consent');
  if (!consent) {
    showBanner.value = true;
  } else if (consent === 'granted') {
    loadZenovay();
  }
});

function accept() {
  localStorage.setItem('analytics_consent', 'granted');
  showBanner.value = false;
  loadZenovay();
}

function decline() {
  localStorage.setItem('analytics_consent', 'denied');
  showBanner.value = false;
  loadZenovayCookieless();
}

function loadZenovay() {
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  document.head.appendChild(script);
}

function loadZenovayCookieless() {
  // data-cookieless="true"はトラッカーに、メモリ内のウィンドウスコープIDのみを使用するよう指示します
  // - クッキーなし、localStorageなし。
  const script = document.createElement('script');
  script.src = 'https://api.zenovay.com/z.js';
  script.setAttribute('data-tracking-code', 'YOUR_TRACKING_CODE');
  script.setAttribute('data-cookieless', 'true');
  document.head.appendChild(script);
}
</script>

同意設定ページ

ユーザーが設定を変更できるようにします：

<div class="cookie-preferences">
  <h2>クッキー設定</h2>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="necessary" checked disabled>
      必要なクッキー（必須）
    </label>
    <p>ウェブサイトの機能に不可欠です。</p>
  </div>

  <div class="cookie-option">
    <label>
      <input type="checkbox" id="analytics">
      アナリティクスクッキー
    </label>
    <p>訪問者がサイトをどのように使用しているかを理解するのに役立ちます。</p>
  </div>

  <button onclick="savePreferences()">設定を保存</button>
</div>

<script>
// 現在の設定をロード
document.getElementById('analytics').checked =
  localStorage.getItem('analytics_consent') === 'granted';

function savePreferences() {
  const analytics = document.getElementById('analytics').checked;
  localStorage.setItem('analytics_consent', analytics ? 'granted' : 'denied');

  // 変更を適用するため再ロード
  location.reload();
}
</script>

同意ログ

コンプライアンスのために同意を追跡：

function logConsent(type, granted) {
  fetch('/api/consent-log', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      type: type,
      granted: granted,
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent
    })
  });
}

function acceptCookies() {
  logConsent('analytics', true);
  localStorage.setItem('analytics_consent', 'granted');
  loadZenovay();
}

ベストプラクティス

バナーデザイン

• 明確な言語: クッキーが何をするのかを説明
• 同等のオプション: 同意と拒否を同等の目立ちで表示
• ダークパターンなし: ユーザーに同意させるための欺きはない
• 細粒度のコントロール: ユーザーがカテゴリーを選択できるようにする
• 簡単な取り消し: 設定の変更を許可

技術

• 同意前にロードしない: 同意の後でのみトラッキングをロード
• 取り消しを尊重: 同意が取り消されたときトラッキングを停止
• 設定を記憶: 繰り返して質問しない
• 完全にテスト: 同意フローが機能することを確認

コンプライアンス

• 同意を記録: 同意が与えられた/取り消されたときをログ
• 定期的なレビュー: 規制の変更に合わせて更新
• 監査証跡: コンプライアンスのための記録を保持

トラブルシューティング

拒否後もトラッキングが有効

チェック:

• スクリプトがHTMLにハードコードされていない
• 同意チェックがトラッキング前に実行される
• キャッシュの問題がない

バナーが繰り返し表示される

確認:

• localStorageがブロックされていない
• クッキーがすぐに期限切れにならない
• すべてのページで同じドメイン

同意プラットフォームが起動しない

確認:

• 統合コードが正しい
• プラットフォームがチェック前に完全にロードされている
• コールバック名が一致している

次のステップ

• Privacy Mode
• GDPR コンプライアンス
• データ収集慣行