Skip to content

Instantly share code, notes, and snippets.

@lukas-h
Last active May 29, 2020 08:24
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save lukas-h/0da8f5474ed2f5381198ad5e018ba363 to your computer and use it in GitHub Desktop.
Save lukas-h/0da8f5474ed2f5381198ad5e018ba363 to your computer and use it in GitHub Desktop.
DSGVO-Banner Opt-in für AMP-Webseiten

DSGVO-Cookie-Banner mit Opt-in für AMP

Nach der neuen DSGVO-Regelung müssen Websites, die Cookies verwenden einen explizites Opt-In machen.

Siehe hier: DSGVO-Entscheidung vom Bundesgerichtshof: Wer braucht jetzt einen Cookie-Banner?

Dies sollte als "Starthilfe" und nicht als vollständige Implementierung angesehen werden.

1. Schritt

Zu den amp-analytics-Tags muss der Parameter data-block-on-consent="_till_accepted" hinzugefügt werden.

Oft wird Google Analytics oder der Facebook-Pixel mit dem amp-analytics-Tag verwendet.

Beispiel mit Google Analytics:

<amp-analytics type="googleanalytics" data-block-on-consent="_till_accepted">
<script type="application/json"> 
    {
      "vars": {
          "account": "UA-XXXXXXXXX-X"
      },
      "triggers": {
          "trackPageview": {
              "on": "visible",
              "request": "pageview"
          }
      }
  }
</script>
</amp-analytics>

2. Schritt

AMP-Komponente für amp-consent im headder AMPhtml-Datei hinzufügen.

<script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>

3. Schritt

Den amp-coonsent-Tag im body der Datei hinzufügen.

<amp-consent layout="nodisplay" id="dsgvo-consent">
  <script type="application/json">
    {
      "consentInstanceId": "dsgvo-consent",
      "consentRequired": true,
      "promptUI": "consent-ui",
      "captions": {
        "consentPromptCaption": "Diese Seite verwendet Cookies. Einige sind essenziell, andere verwenden wir für Statistiken und Marketing.",
        "buttonActionCaption": "Alle Cookies akzeptieren"
      }
    }
  </script>
  <div id="consent-ui">
    <p>
       Diese Seite verwendet Cookies. Einige sind essenziell, andere verwenden wir für Statistiken und Marketing.
       <a href="/datenschutz.html">Mehr erfahren!</a>
    </p>
    <button on="tap:dsgvo-consent.accept" role="button">Alle akzeptieren</button>
    <button on="tap:dsgvo-consent.reject" role="button">Nur essenzielle</button>
  </div>
</amp-consent>

Weiterlesen

amp.dev – amp-consent
amp.dev – amp-analytics
amp.dev – amp-geo
amp.dev – DSGVO-Entscheidung vom Bundesgerichtshof: Wer braucht jetzt einen Cookie-Banner?

Lizenz

License: CC0-1.0
Ich übernehme keine Haftung für die Korrektheit jeglicher Inhalte dieser Datei.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment