ComplianzとCocoonでスマホメニューが壊れる！原因調査から自作バナーで解決するまでの全記録

ComplianzとCocoonでスマホメニューが壊れる！ CSS
2026.01.18
この記事は約29分で読めます。

「あれ、メニューが閉じない…？」

それは、サイトのGDPR対応を進めていた、ある日のことでした。

EU圏からのアクセスも増やしていきたいと考えていた私は、クッキー同意バナーを表示するためにComplianzというプラグインを導入しました。WordPressのGDPR対応プラグインとしては定番で、無料版でも十分な機能があるという評判だったからです。

1 Million Users Trust Complianz for WordPress & Shopify Consent
The only Privacy Suite for WordPress & Shopify - Get ready for GDPR, ePrivacy, CCPA and more.
complianz.io

設定を終え、「これでGDPR対応は完璧だ」と安心していた矢先、スマートフォンでサイトを確認していて、違和感に気づきました。

ハンバーガーメニューを開いて、記事のリンクをタップ。ページが遷移して、ブラウザの戻るボタンを押す。すると、メニューが開いたままの状態で前のページが表示されるのです。

最初は「たまたまかな？」と思いました。でも、何度試しても同じ。これは明らかにおかしい。

こうして、私とComplianzの長い戦いが始まったのです。

発生した問題の詳細

症状を正確に把握する

まず、問題を正確に把握することから始めました。闇雲に対処しても時間の無駄になりますからね。

私が使用しているテーマはCocoon。国産の無料テーマとしては最も人気があり、機能も豊富で、私のブログでも長年愛用しています。スマートフォン表示では、画面右上にハンバーガーメニュー（三本線のアイコン）が表示され、タップするとナビゲーションメニューがスライドして現れる仕組みになっています。

Cocoon
SEO・高速化・モバイルファースト最適化済みのシンプルな無料Wordpressテーマ。100％GPLテーマです。
wp-cocoon.com

通常の動作であれば、以下のような流れになるはずです。

  1. ハンバーガーメニューをタップ → メニューが開く
  2. メニュー内のリンクをタップ → 新しいページに遷移
  3. ブラウザの戻るボタンを押す → 前のページに戻る（メニューは閉じている）

しかし、Complianzを有効にしている状態では、ブラウザバックでメニューが開いたままになってしまうのです。

これは見た目の問題だけでなく、ユーザビリティの観点からも致命的です。メニューが画面を覆っている状態では、コンテンツが読めません。ユーザーは「あれ？」と思いながらメニューを閉じる操作をしなければならない。たった一手間ですが、この「余計な一手間」がユーザー体験を大きく損なうことは、Web制作に携わる人なら誰でも知っているはずです。

再現条件の特定

問題を解決するためには、まず再現条件を明確にする必要があります。どんな状況で問題が起きるのか、逆にどんな状況なら問題が起きないのか。それを把握することで、原因の特定につながります。

私が確認した再現条件は以下の通りです。

  • テーマ：Cocoon（他のテーマでは未検証）
  • プラグイン：Complianz GDPR/CCPA Cookie Consent（無料版）
  • デバイス：スマートフォン
  • ブラウザ：iPhone Safari、Android Chrome
  • 操作手順：ハンバーガーメニューを開く → メニュー内のリンクをタップ → ブラウザの戻るボタンで戻る

特筆すべきは、ブラウザの種類に関係なく再現するという点です。これは、iOSやAndroid固有の問題ではなく、WordPress側（テーマまたはプラグイン）に原因があることを示唆しています。

原因の調査：犯人は誰だ？

容疑者その1：自作コード

Complianzを導入した際、EU圏からのアクセスのみバナーを表示するために、GeoIP判定のカスタムコードを追加していました。もしかしたら、このコードが悪さをしているのかもしれません。

というわけで、まずは自分が追加したコードを疑いました。Code Snippetsプラグインで追加していたGeoIP判定のスニペットを無効化し、サイトを確認します。

結果は…変わらず。メニューは相変わらず開きっぱなしです。

自作コードが原因ではないことがわかりました。少しホッとしましたが、同時に「じゃあ何が原因なんだ？」という疑問が深まります。

容疑者その2：Complianzプラグイン

次に疑ったのは、Complianzプラグイン本体です。

WordPress管理画面からComplianzを無効化し、再度スマートフォンでサイトを確認します。ブラウザバックを押す…

メニューが閉じている！

犯人が特定できました。Complianzプラグインを有効にしている状態でのみ、この問題が発生するのです。

しかし、ここで新たな疑問が生まれます。Complianzは世界中で使われている人気プラグインです。こんな致命的なバグがあれば、もっと騒がれているはず。ということは、CocoonテーマとComplianzプラグインの組み合わせで何らかの競合が発生している可能性が高い。

競合の原因を推測する

残念ながら、詳細な原因までは特定できませんでした。両方のソースコードを詳しく読み解けば分かるかもしれませんが、それには膨大な時間がかかります。実用的なアプローチとしては、原因の推測に基づいて対策を試すしかありません。

私が考えた仮説は以下の通りです。

仮説1：JavaScriptの競合

ComplianzはGDPR対応のため、様々なスクリプトをブロックする機能を持っています。Google AnalyticsやFacebookピクセルなど、ユーザーの同意なしに動作させてはいけないスクリプトを制御するためです。

しかし、この「スクリプトブロック機能」が、Cocoonのメニュー制御用JavaScriptにまで影響を与えている可能性があります。Cocoonのメニューは、JavaScriptでopen/closeの状態を管理しています。このスクリプトが正常に動作しないと、メニューの状態管理がおかしくなるのは当然です。

仮説2：CSSの競合

ComplianzはバナーやモーダルのためのCSSを読み込みます。このCSSが、何らかの形でCocoonのメニューに干渉している可能性もあります。特に、z-indexやposition、displayプロパティあたりが怪しい。

仮説3：bfcacheとの相性

bfcache（Back-Forward Cache）は、ブラウザの「戻る」「進む」操作を高速化するためのキャッシュ機構です。ページの状態をメモリに保持しておくことで、瞬時に前のページを表示できます。

しかし、このbfcacheとJavaScriptの相性が悪いケースがあります。ページがキャッシュから復元されたとき、JavaScriptの状態が正しく復元されないことがあるのです。Complianzが何らかの形でbfcacheの挙動に影響を与えている可能性も考えられます。

試した対策（そして失敗の連続）

原因の仮説を立てたら、次は対策です。一つずつ試していきました。

対策1：Complianzのホワイトリスト設定

仮説1が正しいなら、Cocoon関連のスクリプトをComplianzのブロック対象から除外すれば解決するはずです。

WordPressにはcmplz_whitelisted_script_tagsというフィルターフックがあり、これを使ってスクリプトをホワイトリストに追加できます。以下のコードをfunctions.phpに追加しました。

1
2
3
4
5
6
add_filter('cmplz_whitelisted_script_tags', function($tags) {
    $tags[] = 'cocoon';
    $tags[] = 'javascript.js';
    $tags[] = 'jquery';
    return $tags;
});

期待を込めてサイトを確認します。ハンバーガーメニューを開いて、リンクをタップして、戻る…

変わらず。

メニューは相変わらず開きっぱなしです。ホワイトリストに追加するキーワードを変えて何度か試しましたが、効果はありませんでした。

対策2：Script Centerでの設定

Complianzには「Script Center」という機能があり、スクリプトの細かい制御ができるという情報を見つけました。これを使えば、特定のスクリプトをブロック対象から完全に除外できるかもしれません。

意気揚々とComplianzの設定画面を開きます。Dashboard、Wizard、Consent Banner、Settings…

「Script Center」タブが見当たりません。

調べてみると、Script Centerは有料版（Premium）の機能でした。無料版では使えないのです。

有料版へのアップグレードも考えましたが、年間のライセンス料を考えると、この一つの問題を解決するためだけに支払うのは躊躇われます。他の方法を探すことにしました。

対策3：Complianzの各種設定の調整

無料版で使える設定を片っ端から試してみました。

  • 統合機能（Integration）の無効化
  • スクリプトのブロック設定の変更
  • バナーの表示タイミングの調整
  • キャッシュ関連の設定

どれを試しても、効果はありませんでした。

正直、この時点でかなり心が折れかけていました。「もうComplianzは諦めるしかないのか…」そんな思いが頭をよぎります。

代替プラグインの検討

Complianzとの格闘に疲れ果てた私は、別のGDPRプラグインを探すことにしました。同じ機能を持つプラグインは他にもあるはずです。

CookieYes

まず目に留まったのがCookieYesです。Google Site Kitの公式ドキュメントでも推奨されているプラグインで、信頼性は高そうです。

早速インストールして設定を進めていくと…PV制限の壁にぶつかりました。

CookieYesの無料プランは、月間5,000PVまでという制限があります。私のブログはこれを超える見込みがあったため、無料プランでは使えません。有料プランに移行すれば制限は解除されますが、また月額料金が発生します。

GDPR Cookie Compliance

次に試したのがGDPR Cookie Complianceというプラグイン。Site Kitとの統合機能もあるようです。

しかし、詳しく調べると、Site Kitとの統合は有料アドオンが必要とのこと。無料では基本機能しか使えません。

Cookiebot

Cookiebotも候補に挙がりました。企業向けのしっかりしたサービスで、Google Consent Modeにも対応しています。

ただ、こちらも無料プランには制限があり、フル機能を使うには有料プランが必要です。

行き詰まり

どのプラグインも、無料では何らかの制限がある。かといって、GDPR対応のためだけに毎月お金を払い続けるのも気が進まない。

そして何より、仮に別のプラグインを導入しても、Cocoonとの相性問題が起きない保証はどこにもないのです。

そこで私は、発想を転換することにしました。

「プラグインに頼るのをやめよう。自分で作ればいいんだ。」

最終的な解決策：自作GDPRバナー

考えてみれば、GDPRのクッキー同意バナーは、そこまで複雑な機能ではありません。必要なのは以下の機能だけです。

  • EU圏からのアクセスを判定する
  • バナーを表示して、同意/拒否を選択させる
  • 選択結果をCookieに保存する
  • Google Analytics等に同意状態を伝える

これくらいなら、JavaScriptとPHPで自作できるはず。しかも、自作ならCocoonとの競合リスクは限りなくゼロに近づきます。余計なスクリプトをブロックする機能もないので、テーマの動作に干渉することもありません。

自作のメリット

自作バナーには、プラグインにはないメリットがあります。

1. 競合リスクがない

自分で書いたコードなので、何が動いているか完全に把握できます。問題が起きても、原因の特定と修正が容易です。

2. PV制限がない

当然ですが、自作なので利用料はかかりません。PVがいくら増えても、追加費用は一切発生しません。

3. 軽量で高速

必要最小限の機能だけを実装するので、プラグインと比べて圧倒的に軽量です。ページの読み込み速度への影響も最小限に抑えられます。

4. カスタマイズが自由

デザインも文言も、すべて自由に変更できます。サイトのデザインに合わせたバナーを作ることも簡単です。

実装する機能

自作バナーに実装する機能を整理しました。

  • GeoIP判定：無料のAPIを使って、アクセス元の国を判定する
  • 条件付き表示：EU圏からのアクセスのみバナーを表示する
  • 同意管理：Accept/Declineボタンで同意状態を管理する
  • 設定変更機能：一度選択した後でも、いつでも設定を変更できる
  • Consent Mode対応：Google Site KitのConsent Modeと連携する

完成コード

試行錯誤の末に完成したコードがこちらです。functions.phpまたはCode Snippetsプラグインに追加して使用します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
// =====================================================
// GDPR自作バナー（Site Kit Consent Mode対応）
// =====================================================
 
// 1. バナーHTML + CSS
add_action('wp_footer', function() {
    ?>
    <div id="gdpr-banner" style="display:none; position:fixed; bottom:0; left:0; right:0; background:#1a1a2e; color:#fff; padding:20px; z-index:999999; box-shadow:0 -2px 10px rgba(0,0,0,0.3);">
        <div style="max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px;">
            <p style="margin:0; flex:1; min-width:280px; font-size:14px; line-height:1.6;">
                We use cookies for analytics and advertising. By continuing to browse, you consent to our use of cookies.
                <a href="/privacy-policy-en/" style="color:#6eb5ff; text-decoration:underline;">Privacy Policy</a>
            </p>
            <div style="display:flex; gap:10px; flex-wrap:wrap;">
                <button id="gdpr-accept" style="background:#4CAF50; color:#fff; border:none; padding:12px 24px; cursor:pointer; border-radius:4px; font-size:14px; font-weight:bold;">Accept</button>
                <button id="gdpr-decline" style="background:#666; color:#fff; border:none; padding:12px 24px; cursor:pointer; border-radius:4px; font-size:14px;">Decline</button>
            </div>
        </div>
    </div>
    
    <div id="gdpr-settings-link" style="display:none; position:fixed; bottom:20px; left:20px; z-index:999998;">
        <button id="gdpr-open-settings" style="background:#1a1a2e; color:#fff; border:none; padding:10px 16px; cursor:pointer; border-radius:20px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,0.3);">
            🍪 Cookie Settings
        </button>
    </div>
    <?php
}, 5);
 
// 2. JavaScript（国判定 + 同意管理）
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','GB','CH'];
        const banner = document.getElementById('gdpr-banner');
        const acceptBtn = document.getElementById('gdpr-accept');
        const declineBtn = document.getElementById('gdpr-decline');
        const settingsLink = document.getElementById('gdpr-settings-link');
        const openSettingsBtn = document.getElementById('gdpr-open-settings');
        
        let isEuUser = false;
        
        function updateConsent(granted) {
            const status = granted ? 'granted' : 'denied';
            if (typeof gtag === 'function') {
                gtag('consent', 'update', {
                    'analytics_storage': status,
                    'ad_storage': status,
                    'ad_user_data': status,
                    'ad_personalization': status
                });
            }
            if (typeof wp_set_consent === 'function') {
                wp_set_consent('statistics', granted ? 'allow' : 'deny');
                wp_set_consent('marketing', granted ? 'allow' : 'deny');
            }
        }
        
        function saveConsent(granted) {
            const value = granted ? 'granted' : 'denied';
            document.cookie = "gdpr_consent=" + value + ";path=/;max-age=31536000;SameSite=Lax";
            updateConsent(granted);
            banner.style.display = 'none';
            if (isEuUser) {
                settingsLink.style.display = 'block';
            }
        }
        
        function getConsent() {
            const match = document.cookie.match(/gdpr_consent=(granted|denied)/);
            return match ? match[1] : null;
        }
        
        function showBanner() {
            banner.style.display = 'block';
            settingsLink.style.display = 'none';
        }
        
        acceptBtn.addEventListener('click', () => saveConsent(true));
        declineBtn.addEventListener('click', () => saveConsent(false));
        openSettingsBtn.addEventListener('click', showBanner);
        
        const hasNonEu = document.cookie.includes('geo_region=non-eu');
        const hasEu = document.cookie.includes('geo_region=eu');
        const existingConsent = getConsent();
        
        if (hasNonEu) {
            if (!existingConsent) {
                saveConsent(true);
            } else {
                updateConsent(existingConsent === 'granted');
            }
            return;
        }
        
        if (hasEu) {
            isEuUser = true;
            if (existingConsent) {
                updateConsent(existingConsent === 'granted');
                settingsLink.style.display = 'block';
            } else {
                showBanner();
            }
            return;
        }
        
        // 複数のAPIを試す（フォールバック付き）
        function tryGeoIP() {
            // API 1: ipwho.is（メイン）
            fetch('https://ipwho.is/')
                .then(r => r.json())
                .then(data => {
                    const country = data.country_code;
                    handleCountry(country);
                })
                .catch(() => {
                    // API 2: country.is（フォールバック）
                    fetch('https://api.country.is/')
                        .then(r => r.json())
                        .then(data => {
                            handleCountry(data.country);
                        })
                        .catch(() => {
                            // すべて失敗：安全側でバナー表示
                            isEuUser = true;
                            showBanner();
                        });
                });
        }
        
        function handleCountry(country) {
            if (!country) {
                isEuUser = true;
                showBanner();
                return;
            }
            country = country.trim().toUpperCase();
            if (euCountries.includes(country)) {
                document.cookie = "geo_region=eu;path=/;max-age=86400;SameSite=Lax";
                isEuUser = true;
                showBanner();
            } else {
                document.cookie = "geo_region=non-eu;path=/;max-age=86400;SameSite=Lax";
                saveConsent(true);
            }
        }
        
        tryGeoIP();
    })();
    </script>
    <?php
}, 999);
 

コードの詳細解説

このコードが何をしているのか、詳しく解説します。コードを理解しておくと、カスタマイズする際にも役立ちます。

1. バナーのHTML構造

バナーはシンプルなHTML要素で構成されています。CSSはインラインスタイルで記述しているので、テーマのスタイルシートと競合するリスクを最小限に抑えています。

レイアウトにはFlexboxを使用し、flex-wrap: wrapを指定することで、スマートフォンなど画面幅が狭いデバイスでは自動的に折り返してレイアウトが調整されます。

また、バナーの初期状態はdisplay: noneに設定されています。JavaScriptで国判定を行った後、EU圏からのアクセスだと判断された場合にのみ表示されます。

2. 国判定の仕組み

国判定には複数の無料GeoIP APIを使用しています。信頼性を高めるため、フォールバック（代替手段）を用意しています。

1
2
3
4
5
6
7
8
9
10
11
12
// メインAPI: ipwho.is
fetch('https://ipwho.is/')
    .then(r => r.json())
    .then(data => {
        const country = data.country_code;
        // ...
    })
    .catch(() => {
        // フォールバック: api.country.is
        fetch('https://api.country.is/')
        // ...
    });

メインAPI（ipwho.is）が失敗した場合は、自動的にフォールバックAPI（api.country.is）に切り替わります。両方とも失敗した場合は、安全側に倒してバナーを表示します。

この冗長化により、特定のAPIがダウンしていたり、ユーザーの環境（広告ブロッカーなど）でブロックされていても、国判定が機能する確率が高まります。

なお、国判定の結果はCookieに保存され、24時間有効です。これにより、同じユーザーが何度もページを閲覧しても、APIへのリクエストは最初の1回だけで済みます。

3. EU圏の判定基準

EU圏の判定には、以下の国コードを使用しています。

1
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','GB','CH'];

この配列には以下の国が含まれています。

  • EU加盟27ヶ国：オーストリア、ベルギー、ブルガリア、クロアチア、キプロス、チェコ、デンマーク、エストニア、フィンランド、フランス、ドイツ、ギリシャ、ハンガリー、アイルランド、イタリア、ラトビア、リトアニア、ルクセンブルク、マルタ、オランダ、ポーランド、ポルトガル、ルーマニア、スロバキア、スロベニア、スペイン、スウェーデン
  • EEA加盟3ヶ国：アイスランド、リヒテンシュタイン、ノルウェー
  • イギリス：Brexit後もUK-GDPRがあるため対象に含める
  • スイス：GDPRに準拠した独自の法律があるため対象に含める

4. 同意状態の管理

ユーザーの同意状態は、2つのCookieで管理しています。

  • geo_region：国判定の結果（”eu” または “non-eu”）。有効期限は24時間。
  • gdpr_consent：同意状態（”granted” または “denied”）。有効期限は1年間。

EU圏外からのアクセスの場合、自動的にgdpr_consent=grantedが設定されます。GDPRの対象外なので、ユーザーの明示的な同意なしにトラッキングを行っても問題ありません。

5. Google Consent Mode 対応

Google Analytics 4やGoogle広告を使用している場合、Consent Modeに対応することが推奨されています。このコードでは、gtag('consent', 'update', ...)を使って、Googleに同意状態を伝えています。

1
2
3
4
5
6
7
8
9
10
11
function updateConsent(granted) {
    const status = granted ? 'granted' : 'denied';
    if (typeof gtag === 'function') {
        gtag('consent', 'update', {
            'analytics_storage': status,
            'ad_storage': status,
            'ad_user_data': status,
            'ad_personalization': status
        });
    }
}

これにより、ユーザーが同意した場合のみデータが収集され、拒否した場合はデータ収集が停止されます。

6. WP Consent API 対応

Site KitのConsent Mode機能を使う場合、WP Consent APIプラグインとの連携が必要です。このコードでは、wp_set_consent関数を呼び出すことで、WP Consent APIにも同意状態を伝えています。

7. 設定変更機能

GDPRでは、ユーザーがいつでも同意を撤回できることが求められています。そのため、一度同意/拒否を選択した後でも、「🍪 Cookie Settings」ボタンをクリックすることでバナーを再表示し、設定を変更できるようにしています。

このボタンはEU圏のユーザーにのみ表示されます。日本など、GDPR対象外の地域からアクセスしているユーザーには表示されません。

Site Kit の設定

この自作バナーをSite Kitと連携させるには、Site Kit側でも設定が必要です。

  1. WordPress管理画面で「Site Kit」→「Settings」→「Admin Settings」を開く
  2. 「Consent Mode」を有効化
  3. 「WP Consent API」プラグインをインストール・有効化

これで、自作バナーでの同意状態がSite Kit経由でGoogle Analyticsに伝わるようになります。

動作確認の方法

コードを設置したら、必ず動作確認を行いましょう。期待通りに動作しているかどうか、実際に目で見て確認することが大切です。

日本からの確認

まず、日本国内からのアクセスで正しく動作することを確認します。

  1. ブラウザのCookieをクリアする（特にgeo_regionとgdpr_consent）
  2. サイトにアクセスする
  3. バナーが表示されないことを確認する
  4. 開発者ツール（F12）のConsoleで以下を実行する

1
document.cookie.includes('gdpr_consent')

trueと表示されれば、Cookieが正しく設定されています。また、geo_region=non-euが設定されていることも確認してください。

EU圏からの確認

次に、EU圏からのアクセスをシミュレートして確認します。実際にヨーロッパに行くわけにはいかないので、VPNサービスを利用します。

無料で使えるVPNサービスとしては、以下がおすすめです。

  • ProtonVPN：スイス発のVPNサービス。無料プランあり。
  • Windscribe：月間10GBまで無料で使える。

VPNでEU圏（イタリア、ドイツなど）のサーバーに接続したら、以下の手順で確認します。

  1. 重要：ブラウザのCookieをクリアする（特にgeo_regionとgdpr_consent）
  2. サイトにアクセスする
  3. バナーが表示されることを確認する
  4. 「Accept」ボタンをクリックする
  5. バナーが消え、左下に「🍪 Cookie Settings」が表示されることを確認する
  6. 「🍪 Cookie Settings」をクリックしてバナーが再表示されることを確認する
  7. 「Decline」ボタンをクリックして、拒否できることを確認する

テスト時の重要な注意点

VPNで国を切り替えてテストする際は、必ずCookieをクリアしてからテストしてください。

このコードは、一度判定した国の情報をCookieに保存しています。そのため、日本でテストした後にVPNでイタリアに接続しても、Cookieに「non-eu」が残っていると、バナーは表示されません。

Cookieのクリアは、開発者ツールのConsoleで以下を実行するのが簡単です。

1
2
3
document.cookie = "geo_region=;path=/;max-age=0";
document.cookie = "gdpr_consent=;path=/;max-age=0";
location.reload();

カスタマイズ例

自作バナーの最大のメリットは、自由にカスタマイズできることです。いくつかのカスタマイズ例を紹介します。

バナーの色を変更する

サイトのデザインに合わせて、バナーの色を変更できます。

1
2
3
background:#1a1a2e;  /* バナー背景色 */
background:#4CAF50;  /* Acceptボタンの色 */
background:#666;     /* Declineボタンの色 */

例えば、バナーの背景を白にして、ボタンをブランドカラーに変更することも可能です。

プライバシーポリシーのURLを変更する

コード内のプライバシーポリシーへのリンクを、自サイトのURLに変更してください。

1
<a href="/privacy-policy-en/" ...>

バナーの文言を変更する

デフォルトでは英語の文言になっていますが、必要に応じて変更できます。ただし、GDPRの対象はEU圏のユーザーなので、英語（または各国の言語）で表示することをお勧めします。

対象国を変更する

例えば、イギリスを対象から外したい場合は、配列から’GB’を削除します。逆に、GDPR以外の理由で他の国も対象にしたい場合は、国コードを追加します。

この方法のデメリット

公平を期すために、この方法のデメリットも記載しておきます。

1. 外部APIへの依存

国判定にサードパーティのAPIを使用しています。このサービスが停止したり、仕様変更があった場合、コードの修正が必要になる可能性があります。

ただし、複数のAPIを使ったフォールバック機能を実装しているため、1つのAPIがダウンしても別のAPIで国判定を継続できます。また、すべてのAPI呼び出しが失敗した場合は、安全側に倒してバナーを表示するようにしているので、完全に機能しなくなることはありません。

2. APIのレート制限

使用しているAPIには、それぞれレート制限があります。判定結果はCookieにキャッシュされるので、実際のAPI呼び出し回数はユニークユーザー数に近い値になりますが、高トラフィックサイトでは制限に達する可能性があります。

その場合は、有料プランへのアップグレード、または別のGeoIPサービスの利用を検討してください。

3. メンテナンスの責任

自作コードなので、メンテナンスは自分で行う必要があります。GDPRの要件が変更された場合や、バグが見つかった場合は、自分で修正しなければなりません。

プラグインであれば、開発者がアップデートを提供してくれますが、自作の場合はその保証がありません。

まとめ：自作という選択肢

ComplianzとCocoonの競合問題は、結局のところプラグインの設定では解決できませんでした。無料版の制限もあり、八方塞がりの状態でした。

しかし、「プラグインを使わなければいけない」という固定観念を捨てることで、新しい道が開けました。

自作のGDPRバナーは、以下のメリットをもたらしてくれました。

  • Cocoonとの競合なし：スマホメニューの問題は完全に解消
  • PV制限なし：どれだけアクセスが増えても追加費用なし
  • 軽量で高速：サイトパフォーマンスへの影響を最小限に
  • 完全なカスタマイズ性：デザインも機能も思いのまま

もちろん、自作にはデメリットもあります。メンテナンスの手間、外部APIへの依存、GDPRの要件変更への対応…これらを自分で管理する覚悟が必要です。

しかし、プラグインとの相性問題に悩み、解決策を求めて何時間も彷徨うくらいなら、自作してしまった方が早い場合もあります。少なくとも今回の私のケースでは、そうでした。

同じ問題で悩んでいる方の参考になれば幸いです。そして、何かの壁にぶつかったとき、「自作」という選択肢があることを思い出してもらえたら嬉しいです。

参考リンク

コメント

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