ComplianzでEU圏外にクッキーバナーを非表示にする方法【キャッシュ対応版】

キャッシュ環境でのGDPR対応 JavaScript方式で国判定！ WordPress
この記事は約9分で読めます。

Complianzの基本設定

Complianzプラグインの基本的な設定方法については、以下の記事が参考になります。

WordPressのGDPR対応｜Complianzの設定手順と対象国のみ同意バナーを表示する方法 – ワードプレステーマTCD
GDPR対応、行なっていますか？サイト上に「クッキーに同意しますか？」などと表示されるメッセージを表示しないと、GDPRに違反する可能性があります。
tcd-theme.com

上記の記事ではPHPとGeoLite2データベースを使用した方法が紹介されていますが、WP Fastest CacheやLiteSpeed Cacheなどのキャッシュプラグインを使用している環境では正常に動作しないことがあります。

本記事では、キャッシュ環境でも確実に動作するJavaScript方式を紹介します。

キャッシュ環境で発生する問題

PHPで国判定を行う方式では、以下の問題が発生します。

  1. 最初のアクセス時にページがキャッシュされる
  2. 別の国からのアクセスにも同じキャッシュが返される
  3. 結果：国判定が正しく機能しない

DONOTCACHEPAGE定数を設定しても、キャッシュプラグインによっては無視されることがあります。

解決策：JavaScript方式

JavaScriptでクライアント側で国判定を行うことで、サーバーキャッシュの影響を受けずに動作します。

実装の特徴

  • サーバーキャッシュと完全に共存可能
  • GeoLite2データベースのダウンロードや管理が不要
  • 無料のGeoIP APIを使用
  • 日本からのアクセスでは一瞬もバナーが表示されない

完成コード

以下のコードをfunctions.phpまたはCode Snippetsプラグインに追加してください。

// 1. デフォルトでバナーを非表示（初回から一瞬も表示しない）
add_action('wp_head', function() {
    echo '<style id="cmplz-geo-hide">#cmplz-cookiebanner-container{display:none !important;}</style>';
}, 0);

// 2. 国判定：EU圏の場合のみバナーを表示
add_action('wp_footer', function() {
    ?>
    <script>
    (function() {
        const euCountries = ['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','DE','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE','IS','LI','NO'];
        
        function showBanner() {
            document.getElementById('cmplz-geo-hide')?.remove();
        }
        
        // すでに判定済みの場合
        if (document.cookie.includes('cmplz_geo_checked=1')) {
            if (document.cookie.includes('cmplz_geo_eu=1')) {
                showBanner();
            }
            return;
        }
        
        fetch('https://ipapi.co/country/')
            .then(r => r.text())
            .then(country => {
                country = country.trim();
                document.cookie = "cmplz_geo_checked=1;path=/;max-age=86400";
                
                if (euCountries.includes(country)) {
                    document.cookie = "cmplz_geo_eu=1;path=/;max-age=86400";
                    showBanner();
                } else {
                    document.cookie = "cmplz_consent_status=allow;path=/;max-age=31536000";
                    document.cookie = "cmplz_statistics=allow;path=/;max-age=31536000";
                    document.cookie = "cmplz_marketing=allow;path=/;max-age=31536000";
                    document.cookie = "cmplz_preferences=allow;path=/;max-age=31536000";
                    document.cookie = "cmplz_functional=allow;path=/;max-age=31536000";
                }
            })
            .catch(() => {
                // API失敗時はバナーを表示（安全側に倒す）
                showBanner();
            });
    })();
    </script>
    <?php
}, 999);

コードの解説

1. デフォルト非表示のCSS

add_action('wp_head', function() {
    echo '<style id="cmplz-geo-hide">#cmplz-cookiebanner-container{display:none !important;}</style>';
}, 0);

ページ読み込み直後、<head>内でバナーを非表示にするCSSを出力します。これにより、どの国からアクセスしても最初はバナーが見えません。

重要なのはid="cmplz-geo-hide"を付けている点です。後でJavaScriptからこのstyle要素を削除するために使用します。

2. 国判定とバナー表示制御

JavaScriptで以下の処理を行います。

EU国コードの定義

const euCountries = ['AT','BE','BG','HR','CY','CZ','DK','EE','FI','FR','DE','GR','HU','IE','IT','LV','LT','LU','MT','NL','PL','PT','RO','SK','SI','ES','SE','IS','LI','NO'];

EU加盟27ヶ国とEEA3ヶ国（アイスランド、リヒテンシュタイン、ノルウェー）を含んでいます。

Cookieによる判定結果のキャッシュ

if (document.cookie.includes('cmplz_geo_checked=1')) {
    if (document.cookie.includes('cmplz_geo_eu=1')) {
        showBanner();
    }
    return;
}

一度判定した結果は24時間Cookieに保存されます。2回目以降のアクセスではAPIを呼ばずに即座に判定できます。

GeoIP APIによる国判定

fetch('https://ipapi.co/country/')
    .then(r => r.text())
    .then(country => {
        // 判定処理
    })

ipapi.coの無料APIを使用しています。月間30,000リクエストまで無料で利用できます。

EU圏の場合：バナーを表示

if (euCountries.includes(country)) {
    document.cookie = "cmplz_geo_eu=1;path=/;max-age=86400";
    showBanner();  // 非表示CSSを削除してバナー表示
}

EU圏外の場合：同意Cookieを設定

else {
    document.cookie = "cmplz_consent_status=allow;path=/;max-age=31536000";
    document.cookie = "cmplz_statistics=allow;path=/;max-age=31536000";
    // ...
}

Complianzが認識する同意Cookieを設定することで、Google Analyticsなどのスクリプトが正常に動作します。

API失敗時のフォールバック

.catch(() => {
    showBanner();
});

APIにアクセスできない場合は、安全側に倒してバナーを表示します。これによりGDPRコンプライアンスを維持できます。

動作の流れ

シナリオ 動作
日本から初回アクセス CSS非表示 → JS判定 → EU圏外 → 同意Cookie設定 → GA動作
日本から2回目以降 CSS非表示 → Cookie確認 → EU圏外 → バナー非表示のまま
EU圏から初回アクセス CSS非表示 → JS判定 → EU圏 → style削除 → バナー表示
EU圏から2回目以降 CSS非表示 → Cookie確認 → EU圏 → style削除 → バナー表示
API失敗時 CSS非表示 → API失敗 → style削除 → バナー表示（安全側）

動作確認方法

日本からの確認

  1. ブラウザのキャッシュとCookieをクリア
  2. サイトにアクセス
  3. バナーが表示されないことを確認
  4. F12でコンソールを開き、以下を実行
document.cookie.includes('cmplz_statistics')

trueと表示されれば正常です。

Google Analyticsの動作確認

  1. F12で開発者ツールを開く
  2. 「Network」タブを選択
  3. フィルターにgoogleと入力
  4. ページをリロード
  5. googletagmanager.comへのリクエストが200または204で返ってくれば正常

EU圏からの確認

VPNサービスを使用して、EU圏内（ドイツ、フランスなど）のサーバー経由でアクセスしてください。

バナーが正常に表示されることを確認してください。

注意点

イギリス（UK）について

イギリスはBrexit後にEUから離脱していますが、UK-GDPRという独自の規制があります。必要に応じて国コードリストに'GB'を追加してください。

const euCountries = ['AT','BE',...,'NO','GB'];

ipapi.coのレート制限

無料プランでは月間30,000リクエストまでです。高トラフィックサイトの場合は、Cookieキャッシュにより実際のAPI呼び出しは大幅に削減されますが、必要に応じて有料プランや別のAPIサービスを検討してください。

Complianzのバージョン

本記事のコードはComplianz 7.x系で動作確認しています。大きなバージョンアップがあった場合、Cookieの名前が変更される可能性があります。

PHP方式との比較

項目 PHP方式 JavaScript方式（本記事）
キャッシュ共存 △ 問題あり ◎ 完全対応
初回表示 一瞬表示される場合あり ◎ 一瞬も表示されない
GeoLite2 DB 必要（定期更新も必要） 不要
サーバー負荷 やや高い 低い（クライアント処理）
API依存 なし あり（ipapi.co）

キャッシュプラグインを使用している場合は、JavaScript方式を強くおすすめします。

まとめ

Complianzでクッキーバナーを国別に制御する場合、キャッシュ環境との相性が重要です。

本記事で紹介したJavaScript方式であれば、WP Fastest Cache、LiteSpeed Cache、WP Super Cacheなど、どのキャッシュプラグインを使用していても正常に動作します。

ポイントをまとめると以下のようになります。

  • デフォルトでバナーを非表示にし、EU圏の場合のみ表示する
  • 判定結果はCookieに保存し、APIの呼び出しを最小限に
  • API失敗時は安全側に倒してバナーを表示

ぜひ参考にしてみてください。

コメント

タイトルとURLをコピーしました