Iubenda logo
Generator starten

Anleitungen

INHALTSÜBERSICHT

Wie man die iubenda Cookie Solution mit Google AMP integriert (inklusive WordPress-Methode)

Die Erfassung der Einwilligung in Cookies auf AMP-Seiten erfordert etwas Aufwand. Zum Glück kann iubenda helfen. Lassen Sie uns zunächst die Schritte erläutern, die Sie unternehmen müssen, und sehen Sie sich an, wie Sie unsere Cookie Solution mit Googles Accelerated Mobile Pages integrieren können, einschließlich der Blockierung von Cookies vor der Einwilligung des Nutzers und einiger nützlicher Tipps für WordPress (unser WP-Plugin unterstützt AMP).

Wir beginnen mit WordPress, da es die gängigste Option für AMP-Seiten ist. Wenn Sie eine andere Lösung verwenden, können Sie zu diesem Abschnitt übergehen.

Update Januar 2022

Die kategoriebezogene Einwilligung wird jetzt von AMP unterstützt. Daher können Sie die granulare Einwilligung mit perPurposeConsent: true in der Konfiguration der Cookie Solution aktivieren und das Attribut data-block-on-consent-purposes anstelle von data-block-on-consent in der AMP-Konfiguration verwenden.

Update März 2021

Wir haben unsere AMP-Integration komplett überarbeitet und unsere Unterstützung für AMP weiter verbessert. Zusätzlich zu den bestehenden Funktionen – wie TCF-Unterstützung und keine erneute Einwilligung, wenn der Nutzer aus AMP heraus navigiert (mit einem Browser, der Cookies von Drittanbietern unterstützt) – haben wir Folgendes hinzugefügt:

  • Optimierte Safari-Unterstützung. Nach dem Hinzufügen der Funktion zur Aktualisierung der Einwilligung ist unser Support für Apples Browser noch besser.
  • Das Tracking-Einstellungen-Widget. Dieses Widget – das jetzt auch in AMP vollständig funktioniert – ermöglicht es Nutzern, ihre Tracking-Einstellungen nach dem Schließen des Cookie-Banners erneut zu öffnen und zu bearbeiten.

Falls Sie bereits AMP und unsere Cookie Solution verwenden, laden Sie die neueste Version unseres WordPress-Plugins herunter, oder aktualisieren Sie Ihre manuelle Integration entsprechend unserer neuesten Anweisungen.

iubenda und Google AMP – Wie man in WordPress die Einwilligung für Cookies einholt

Unser WordPress-Plugin ist vollständig kompatibel mit Google AMP (es funktioniert sowohl mit dem AMP– als auch mit dem AMP für WP-Plugins) und ermöglicht es Ihnen, auf einfache Weise die DSGVO-Cookie-Einwilligung zu erfassen und Cookies zu blockieren, bevor der Nutzer seine Einwilligung erteilt, wie es das sog. Cookie-Gesetz verlangt.

Schritt 1 – Laden Sie unser Plugin für Cookie- und Consent Solution herunter

Wenn Sie es noch nicht getan haben, laden Sie unser WordPress-Plugin herunter und installieren Sie es. Weitere Informationen finden Sie in unserer Anleitung zur Installation.

Schritt 2 – Aktivieren Sie die Google AMP-Unterstützung

AMP erfordert spezifische Konfigurationsparameter und eine auf Ihrer Domain gehostete Seite, von der die Konfiguration geladen wird.

Sobald Sie den Cookie Solution-Code hinzugefügt und die Google AMP-Unterstützung aktiviert haben, generiert unser Plugin automatisch die amp.htmlKonfigurationsdatei (denken Sie daran, die Zugriffsrechte für den Ordner “templates” auf 664 zu setzen, um Fehler zu vermeiden).

iubenda Cookie Solution-Plugin für WordPress - Unterstützung für Google AMP

Schritt 3 – Blockkomponenten

Wie auf amp.dev/documentation angegeben, müssen Sie, sobald Sie die Google AMP-Unterstützung aktiviert haben, Folgendes tun:

  • data-block-on-consent auf alle Elemente hinzufügen, die aufgrund der Einwilligung blockiert werden müssen, ODER,
  • wenn Sie die kategoriebezogene Einwilligung aktiviert haben (mit der CS-Konfiguration perPurposeConsent: true), das Attribut data-block-on-consent-purposes verwenden, mit einer durch Komma getrennten Liste von Einwilligungszwecken, um die Kategorien festzulegen, die vorab blockiert werden sollen (z. B. data-block-on-consent-purposes="1,2,3,4,5“)

Wenn Sie das Transparency and Consent Framework aktiviert haben, beachten Sie bitte, Sie müssen nicht im Falle von AMP-Seiten das stub-v2.js Skript hinzufügen.

All-in-One-Lösung für Cookies und Consent Solution (kompatibel mit AMP)

WordPress-Plugin herunterladen

Lesen Sie die Anleitung zur Installation


iubenda und Google AMP – Wie man auf Websites, die nicht von WordPress betrieben werden, die Einwilligung in Cookies erfasst

Wenn Sie kein WordPress verwenden, folgen Sie diesen Schritten, um unsere Cookie Solution mit Google AMP zu integrieren.

Schritt 1 – Erstellen einer HTML-Datei

Kopieren Sie zunächst diesen HTML-Code und hosten Sie ihn auf Ihrer HTTPS-Website in einer HTML-Datei (stellen Sie sicher, dass Sie die Konfiguration der Cookie Solution entsprechend Ihrer eigenen bearbeiten):

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="robots" content="noindex">
    <title>AMP Cookie Consent</title>
</head>

<body class="iubenda-cookie-solution">
    <span class="iubenda-cs-preferences-link"></span>
    <script type="text/javascript">
        var _iub = _iub || [];

        // Your own Cookie Solution configuration
        _iub.csConfiguration = {
            lang: 'en',
            siteId: 896537, // Your own site ID
            cookiePolicyId: 8207462, // Your own cookie policy ID
            enableTcf: true,
            askConsentIfCMPNotFound: true,
            googleAdditionalConsentMode: true,
            googleAdsPreferenceManagement: true,
            floatingPreferencesButtonDisplay: false,
            banner: {
                acceptButtonDisplay: true, // Recommended
                customizeButtonDisplay: true, // Recommended
                rejectButtonDisplay: true // Advisable
            },
        };
    </script>
    <script type="text/javascript" src="//cdn.iubenda.com/cs/iubenda_cs.js" charset="UTF-8" async></script>
</body>

</html>
Cookie Solution, AMP und TCF

Wenn Sie das Transparency and Consent Framework aktiviert haben, beachten Sie bitte, Sie müssen nicht im Falle von AMP-Seiten das stub-v2.js Skript hinzufügen.

In der Produktion können Sie diese Datei auf:

  • derselben Domäne, oder
  • einer Subdomäne, oder
  • einer anderen Domäne hosten (in diesem Fall müssen Sie remoteConsent aktivieren)
Entwicklungsumgebung

Da AMP das Laden von Iframes von derselben Domäne nicht zulässt, führt das Hochladen dieser Datei auf dieselbe Domäne wie Ihre AMP-Seite dazu, dass das Cookie-Banner nicht angezeigt wird, wenn Sie AMP-Seiten von dieser Domäne laden. Dieses Problem tritt nur beim Testen auf, denn in einem realen AMP-Szenario wird die Seite von google.com geladen, sodass das Problem mit der gleichen Domäne nie auftreten wird.

Um dieses Problem zu vermeiden, können Sie die HTML-Datei einfach auf einer anderen Domäne oder Subdomäne hosten (z. B. Hauptdomäne ist www.yourdomain.com, aber Sie hosten die Datei auf amp.ihredomain.com). Ein einfacher Trick besteht darin, eine www/non-www-umleitung zu verwenden, um dies ohne zusätzliche Subdomänen zu erreichen.

Beachten Sie auch, dass der AMP-iframe über HTTPS bereitgestellt werden muss.

Schritt 2 – Bearbeiten Sie Ihre AMP-Seiten

Fügen Sie nun eine Kopie von <amp-consent> zu Ihren AMP-Seiten hinzu:

<amp-consent id="iubenda" layout="nodisplay" type="iubenda">
    <script type="application/json">
        {
            "promptUISrc": "<uri-to-your-cs-page>",
            "postPromptUI": "post-consent-ui"
        }
    </script>
</amp-consent>

Fügen Sie als Nächstes den Code für den Button zum Aktualisieren der Präferenzen hinzu, der nur sichtbar ist, wenn die Präferenzen bereits angegeben wurden (um die Position zu ändern, verwenden Sie die Klassen iubenda-tp-btn--bottom-left, iubenda-tp-btn--top-left oder iubenda-tp-btn--top-right anstelle von iubenda-tp-btn--bottom-right):

<div id="post-consent-ui">
    <button class="iubenda-tp-btn iubenda-tp-btn--bottom-right" on="tap:iubenda.prompt()"></button>
</div>

Fügen Sie schließlich Folgendes <style amp-custom>zu Ihrem Dokument hinzu head:

<style amp-custom>
    .iubenda-tp-btn {
        position: fixed;
        z-index: 2147483647;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231CC691' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: 32px 32px;
        background-position: top .5px left 1px;
        width: 34px;
        height: 34px;
        border: none;
        cursor: pointer;
        margin: 16px;
        padding: 0;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
        background-color: #fff;
        display: inline-block;
        height: 34px;
        min-width: 34px;
        border-radius: 4px;
        bottom: 0;
        right: 0;
    }

    .iubenda-tp-btn--top-left {
        top: 0;
        left: 0;
    }

    .iubenda-tp-btn--top-right {
        top: 0;
        right: 0;
    }

    .iubenda-tp-btn--bottom-left {
        bottom: 0;
        left: 0;
    }

    .iubenda-tp-btn--bottom-right {
        bottom: 0;
        right: 0;
    }
</style>

Zum Schluss noch ein Beispiel für eine AMP-Seite:

<!doctype html>
<html ⚡>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="This is the AMP Boilerplate.">
    <meta name="amp-consent-blocking" content="amp-analytics,amp-ad">
    <link rel="preload" as="script" href="https://cdn.ampproject.org/v0.js">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-consent" src="https://cdn.ampproject.org/v0/amp-consent-0.1.js"></script>
    <style amp-boilerplate>
        body {
            -webkit-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -moz-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            -ms-animation: -amp-start 8s steps(1, end) 0s 1 normal both;
            animation: -amp-start 8s steps(1, end) 0s 1 normal both
        }

        @-webkit-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-moz-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-ms-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @-o-keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }

        @keyframes -amp-start {
            from {
                visibility: hidden
            }

            to {
                visibility: visible
            }
        }
    </style>
    <noscript>
        <style amp-boilerplate>
            body {
                -webkit-animation: none;
                -moz-animation: none;
                -ms-animation: none;
                animation: none
            }
        </style>
    </noscript>
    <style amp-custom>
        .iubenda-tp-btn {
            position: fixed;
            z-index: 2147483647;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath fill='%231CC691' fill-rule='evenodd' d='M16 7a4 4 0 0 1 2.627 7.016L19.5 25h-7l.873-10.984A4 4 0 0 1 16 7z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-size: 32px 32px;
            background-position: top .5px left 1px;
            width: 34px;
            height: 34px;
            border: none;
            cursor: pointer;
            margin: 16px;
            padding: 0;
            box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
            background-color: #fff;
            display: inline-block;
            height: 34px;
            min-width: 34px;
            border-radius: 4px;
            bottom: 0;
            right: 0;
        }

        .iubenda-tp-btn--top-left {
            top: 0;
            left: 0;
        }

        .iubenda-tp-btn--top-right {
            top: 0;
            right: 0;
        }

        .iubenda-tp-btn--bottom-left {
            bottom: 0;
            left: 0;
        }

        .iubenda-tp-btn--bottom-right {
            bottom: 0;
            right: 0;
        }
    </style>
    <link rel="canonical" href=".">
    <title>My AMP Page</title>
</head>

<body>
    <amp-consent id="iubenda" layout="nodisplay" type="iubenda">
        <script type="application/json">
            {
                "promptUISrc": "<uri-to-your-cs-page>",
                "postPromptUI": "post-consent-ui"
            }
        </script>
    </amp-consent>
    <!-- This is the update preferences button, visible only when preferences are already expressed -->
    <div id="post-consent-ui">
        <button class="iubenda-tp-btn iubenda-tp-btn--bottom-right" on="tap:iubenda.prompt()"></button>
    </div>
</body>

</html>

Hinweis:

  • Fügen Sie <script async="" custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-latest.js"></script> nur hinzu, wenn Sie die Erfassung der Einwilligung auf die EU beschränken möchten
  • Wenn diese Ressourcen der Seite bereits hinzugefügt wurden, erhalten Sie eine harmlose Fehlermeldung
Einwilligung-String und Drittanbieter

Um den Einwilligung-String auf AMP abzurufen, können Drittanbieter Folgendes verwenden context.initialConsentValue

Schritt 3 – Blockkomponenten

Wie auf amp.dev/documentation angegeben, müssen Sie, sobald Sie die Google AMP-Unterstützung aktiviert haben, Folgendes tun:

  • data-block-on-consent auf alle Elemente hinzufügen, die aufgrund der Einwilligung blockiert werden müssen, ODER,
  • wenn Sie die kategoriebezogene Einwilligung aktiviert haben (mit der CS-Konfiguration perPurposeConsent: true), das Attribut data-block-on-consent-purposes verwenden, mit einer durch Komma getrennten Liste von Einwilligungszwecken, um die Kategorien festzulegen, die vorab blockiert werden sollen (z. B. data-block-on-consent-purposes="1,2,3,4,5“)

Siehe auch