cookie_consent/examples/full-integration.html at main · Amarjit/cookie_consent · GitHub

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
154
155
156
157
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Cookie Consent Example: Full Integration</title>
    <link rel="stylesheet" href="./assets/docs.css">
    <style>
      body { margin: 0; font-family: Georgia, serif; background: linear-gradient(180deg, #f8fafc 0%, #dbeafe 100%); color: #0f172a; }
      main { max-width: 980px; margin: 0 auto; padding: 56px 20px 140px; }
      h1 { margin: 0 0 16px; font-size: clamp(2.2rem, 5vw, 4rem); line-height: 1; }
      p, li { font-size: 1rem; line-height: 1.7; }
      .panel { margin-top: 24px; padding: 20px; border-radius: 20px; background: rgba(255,255,255,0.84); border: 1px solid rgba(15,23,42,0.1); }
      .nav, .actions { display: flex; gap: 10px; flex-wrap: wrap; }
      .chip { display: inline-flex; padding: 0.8rem 1rem; border-radius: 999px; border: 1px solid #0f172a; background: #fff; color: #0f172a; text-decoration: none; font-weight: 700; cursor: pointer; }
      .chip.active { background: #0f172a; color: #f8fafc; }
      pre { padding: 14px; overflow: auto; white-space: pre-wrap; background: rgba(15,23,42,0.08); border-radius: 12px; }
    </style>
    <script src="./assets/docs.js" defer></script>
    <script>
      window.__gtagCalls = [];
      window.gtag = function() {
        const args = Array.from(arguments);
        window.__gtagCalls.push(args);
        const output = document.getElementById("gtag-output");
        if (output) output.textContent = JSON.stringify(window.__gtagCalls, null, 2);
      };
      window.CookieConsentConfig = {
        cookieMaxAge: 15768000,
        text: {
          bannerDescription: "We use cookies to keep the site reliable, measure usage, and respect your choices.",
          acceptAll: "Accept all",
          rejectAll: "Reject all",
          customize: "Customize",
          modalTitle: "Cookie preferences",
          modalDescription: "Choose which cookies you want to allow.",
          savePreferences: "Save preferences",
          gpcSettingsLink: "Cookie settings",
          categories: {
            analytics: {
              name: "Analytics",
              description: "Helps us understand how the site is used."
            },
            marketing: {
              name: "Marketing",
              description: "Used for advertising and campaign measurement."
            }
          }
        },
        audit: {
          enabled: true
        }
      };
      window.addEventListener("cookieconsent:change", function(event) {
        const choices = event.detail.choices;
        window.gtag("consent", "update", { analytics_storage: choices.analytics ? "granted" : "denied", ad_storage: choices.marketing ? "granted" : "denied", ad_user_data: choices.marketing ? "granted" : "denied", ad_personalization: choices.marketing ? "granted" : "denied" });
        const eventOutput = document.getElementById("event-output");
        if (eventOutput) eventOutput.textContent = JSON.stringify(event.detail, null, 2);
        const auditOutput = document.getElementById("audit-output");
        if (auditOutput) auditOutput.textContent = localStorage.getItem("cookie_consent") || "No audit record yet.";
      });
    </script>
    <script src="./assets/docs-bootstrap.js"></script>
    <script src="../cookie-consent.js"></script>
  </head>
  <body>
    <main>
      <h1>Full Integration</h1>
      <div class="panel"><h2>What this example shows</h2><p>This page combines the main public integration patterns: config, events, audit storage, a cookie settings link, public API access, and Google Consent Mode mapping.</p></div>
      <div class="panel"><h2>Code used in this example</h2><pre><code>window.__gtagCalls = [];

window.gtag = function() {
  const args = Array.from(arguments);
  window.__gtagCalls.push(args);

  const output = document.getElementById("gtag-output");
  if (output) {
    output.textContent = JSON.stringify(window.__gtagCalls, null, 2);
  }
};

window.CookieConsentConfig = {
  cookieMaxAge: 15768000,
  text: {
    bannerDescription: "We use cookies to keep the site reliable, measure usage, and respect your choices.",
    acceptAll: "Accept all",
    rejectAll: "Reject all",
    customize: "Customize",
    modalTitle: "Cookie preferences",
    modalDescription: "Choose which cookies you want to allow.",
    savePreferences: "Save preferences",
    gpcSettingsLink: "Cookie settings",
    categories: {
      analytics: {
        name: "Analytics",
        description: "Helps us understand how the site is used."
      },
      marketing: {
        name: "Marketing",
        description: "Used for advertising and campaign measurement."
      }
    }
  },
  audit: {
    enabled: true
  }
};

window.addEventListener("cookieconsent:change", function(event) {
  const choices = event.detail.choices;

  window.gtag("consent", "update", {
    analytics_storage: choices.analytics ? "granted" : "denied",
    ad_storage: choices.marketing ? "granted" : "denied",
    ad_user_data: choices.marketing ? "granted" : "denied",
    ad_personalization: choices.marketing ? "granted" : "denied"
  });

  const eventOutput = document.getElementById("event-output");
  if (eventOutput) {
    eventOutput.textContent = JSON.stringify(event.detail, null, 2);
  }

  const auditOutput = document.getElementById("audit-output");
  if (auditOutput) {
    auditOutput.textContent = localStorage.getItem("cookie_consent") || "No audit record yet.";
  }
});</code></pre></div>
      <div class="panel"><h2>How to verify it</h2><ul><li>Use the cookie settings link to reopen the modal.</li><li>Interact with the banner and watch the event output, mock gtag output, and audit storage output below.</li><li>Refresh the API panel to inspect current state from <code>window.CookieConsent</code>.</li></ul><div class="actions"><a href="#" class="chip active" id="open-cookie-settings">Cookie settings</a><a href="#" class="chip" id="refresh-status">Refresh API status</a></div></div>
      <div class="panel"><h2>Consent event output</h2><pre id="event-output">Interact with the banner to see the latest consent event.</pre></div>
      <div class="panel"><h2>Mock gtag output</h2><pre id="gtag-output">Interact with the banner to see mapped Google Consent Mode calls.</pre></div>
      <div class="panel"><h2>Audit storage output</h2><pre id="audit-output">Interact with the banner to see local storage audit records.</pre></div>
      <div class="panel"><h2>Public API output</h2><pre id="status-output">Press "Refresh API status" to inspect window.CookieConsent.getStatus().</pre></div>
    </main>
    <script>
      function refreshStatus() {
        const output = document.getElementById("status-output");
        if (!window.CookieConsent || typeof window.CookieConsent.getStatus !== "function") {
          output.textContent = "CookieConsent API is not available.";
          return;
        }
        output.textContent = JSON.stringify({
          language: typeof window.CookieConsent.getLanguage === "function" ? window.CookieConsent.getLanguage() : null,
          status: window.CookieConsent.getStatus(),
          choices: typeof window.CookieConsent.getChoices === "function" ? window.CookieConsent.getChoices() : null,
          analyticsEnabled: typeof window.CookieConsent.isAnalyticsEnabled === "function" ? window.CookieConsent.isAnalyticsEnabled() : null,
          marketingEnabled: typeof window.CookieConsent.isMarketingEnabled === "function" ? window.CookieConsent.isMarketingEnabled() : null,
          necessaryEnabled: typeof window.CookieConsent.isNecessaryEnabled === "function" ? window.CookieConsent.isNecessaryEnabled() : null
        }, null, 2);
      }
      document.getElementById("open-cookie-settings").addEventListener("click", function(event) { event.preventDefault(); if (window.CookieConsent && typeof window.CookieConsent.showSettings === "function") { window.CookieConsent.showSettings(); } });
      document.getElementById("refresh-status").addEventListener("click", function(event) { event.preventDefault(); refreshStatus(); });
      refreshStatus();
      document.getElementById("audit-output").textContent = localStorage.getItem("cookie_consent") || "No audit record yet.";
    </script>
  </body>
</html>