breakpilot-compliance/developer-portal/app/sdk/consent/cookie-banner/script-blocking/page.tsx

'use client'

import React from 'react'
import { SDKDocsSidebar } from '@/components/SDKDocsSidebar'

export default function ScriptBlockingPage() {
  return (
    <div className="flex min-h-screen bg-white">
      <SDKDocsSidebar />
      <main className="flex-1 ml-64 p-8 max-w-4xl">
        <div className="prose prose-gray max-w-none">
          <h1>Script Blocking</h1>
          <p className="text-lg text-gray-600">
            Tracking-Scripts duerfen erst nach Einwilligung des Nutzers laden (§25 TDDDG).
            So blockieren Sie Scripts korrekt mit dem BreakPilot Cookie-Banner.
          </p>

          <h2>Das Problem</h2>
          <p>
            Wird ein Tracking-Script normal eingebunden, laedt es <strong>sofort</strong> —
            bevor der Nutzer ueberhaupt den Cookie-Banner sieht. Das ist ein Verstoss
            gegen §25 TDDDG und wird von unserem Compliance Agent als <strong>HIGH</strong>
            Finding gemeldet.
          </p>

          <h2>Die Loesung: type=&quot;text/plain&quot;</h2>
          <p>
            Aendern Sie den <code>type</code> von <code>text/javascript</code> zu
            <code>text/plain</code>. Der Browser ignoriert das Script bis unser Banner
            es nach Consent aktiviert.
          </p>

          <h3>Google Analytics</h3>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- Blockiert bis "Statistik" akzeptiert wird -->
<script type="text/plain"
        data-cookie-category="statistics"
        src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX">
</script>
<script type="text/plain" data-cookie-category="statistics">
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXX');
</script>`}
          </pre>

          <h3>Facebook / Meta Pixel</h3>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- Blockiert bis "Marketing" akzeptiert wird -->
<script type="text/plain" data-cookie-category="marketing">
  !function(f,b,e,v,n,t,s){/*...Facebook Pixel Code...*/}
  fbq('init', 'IHRE_PIXEL_ID');
  fbq('track', 'PageView');
</script>`}
          </pre>

          <h3>Hotjar</h3>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- Blockiert bis "Statistik" akzeptiert wird -->
<script type="text/plain" data-cookie-category="statistics">
  (function(h,o,t,j,a,r){/*...Hotjar Code...*/})(window,document,
  'https://static.hotjar.com/c/hotjar-','js?sv=');
</script>`}
          </pre>

          <h3>Google Maps / YouTube Embeds</h3>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`<!-- Blockiert bis "Funktional" akzeptiert wird -->
<iframe type="text/plain"
        data-cookie-category="functional"
        data-src="https://www.google.com/maps/embed?pb=...">
</iframe>

<!-- YouTube mit Platzhalter -->
<div data-cookie-category="marketing"
     data-cookie-placeholder="Bitte akzeptieren Sie Marketing-Cookies um dieses Video zu sehen.">
  <iframe data-src="https://www.youtube-nocookie.com/embed/VIDEO_ID"></iframe>
</div>`}
          </pre>

          <h2>Kategorie-Referenz</h2>
          <table className="min-w-full">
            <thead>
              <tr>
                <th>data-cookie-category</th>
                <th>Dienste</th>
                <th>Consent erforderlich</th>
              </tr>
            </thead>
            <tbody>
              <tr><td><code>necessary</code></td><td>Session, CSRF, CMP</td><td>Nein (immer aktiv)</td></tr>
              <tr><td><code>statistics</code></td><td>GA, Matomo, Hotjar, Clarity</td><td>Ja</td></tr>
              <tr><td><code>marketing</code></td><td>FB Pixel, Google Ads, LinkedIn, TikTok</td><td>Ja</td></tr>
              <tr><td><code>functional</code></td><td>Chat, Maps, Spracheinstellungen</td><td>Ja</td></tr>
            </tbody>
          </table>

          <h2>Programmatische Abfrage</h2>
          <pre className="bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto">
{`// Pruefen ob Kategorie akzeptiert wurde
if (window.CookieConsent.hasConsent('statistics')) {
  // Analytics initialisieren
}

// Auf Consent-Aenderung reagieren
window.addEventListener('cookieConsentUpdated', (e) => {
  const consent = e.detail;
  if (consent.marketing) {
    // Marketing-Scripts aktivieren
  }
});`}
          </pre>
        </div>
      </main>
    </div>
  )
}