Method to manually trigger the cookie consent banner

BenjaminB
Shopify Expert
4 0 1

I have implemented the default "Shopify Cookie Consent Banner". But the EU GDPR law suggests that users have to be able to review and reset their settings, so i tried to create a link to do so based on this documentation: https://shopify.dev/docs/api/customer-privacy

 

i tried this within the theme.liquid:

 

<script>
document.addEventListener('DOMContentLoaded', function(){
document.querySelector('a[href="#CookieConsentReload"]').addEventListener('click', function(e){
e.preventDefault();
window.Shopify.customerPrivacy.shouldShowBanner(true); // or false, depending on the consent
});
});
</script>

 

and then a link to:

<a href="#CookieConsentReload">Cookie Settings</a>

 

But this isn't working? What do i do/understand wrong?

Replies 8 (8)

Gabe
Shopify Staff
18005 2848 4192

Hey @BenjaminB 

 

Du hast hier die deutsche Community erreicht, but we can chat in English too, that's no problem!

 

And thank you for bringing up your point on our new Shopify Cookie Consent Banner. However, you say "But the EU GDPR law suggests that users have to be able to review and reset their settings, so i tried to create a link to do so" - can you give me an example of exactly what you mean? The app allows you to offer the customer to choose whether they want to consent to the following types of cookies, or not, which is currently required by the ePR (e-privacy) law the  that in the settings:

 

  • Essential cookies are allowed by default as they are necessary for the proper functioning of the Storefront and are permitted by the GDPR and ePR
  • Non-essential cookies can be allowed or not by the user
  • The same goes for persistent and session cookies, which also be allowed or not by the user.

 

 

This requirement under the current GDPR provision is that user consent is allowed to be 'specific and informed'. Looking through the online Literature like this publication and this one, you see the emphasis is on the processing by purpose or usage and not by vendor, but at least one CMP shows usage groups below the purpose groups... Some CMPs like the GDPR App from BeeClever show the cookies included in each purpose to meet the 'informed' part, but I think that can also be met by your cookie policy i.e. just make sure you have all that information in the policies and you are fine.

 

Regarding your code - I took a 👀 at the dev docs and concluded the following:

window.Shopify.customerPrivacy.shouldShowBanner(true) might not be the correct way to force the banner to show again. According to the Shopify dev docs, there isn't a direct method named shouldShowBanner to control the visibility of the cookie consent banner. Shopify's customer privacy API primarily focuses on methods related to customer data, like customerPrivacy.showBanner() or managing customer data consent. So that could be a potential issue in your code e.g. the method window.Shopify.customerPrivacy.shouldShowBanner(true) is not directly supported by Shopify's API or documentation for handling cookie consent banner visibility.

 

And ensure that your script is executed after the Shopify customer privacy script is fully loaded. If your script runs before the Shopify script that defines window.Shopify.customerPrivacy, it will not work because window.Shopify.customerPrivacy would be undefined. There might also be an issue with the event listener not correctly binding to the link, especially if the link is dynamically added to the page after the DOM has loaded or if the script runs before the link is present in the DOM.

 

Double-check the Shopify documentation or any updates to ensure you're using the correct method to trigger the cookie consent banner. As of my last update, directly manipulating the visibility of the cookie consent banner through a JavaScript API call like shouldShowBanner was not documented. Instead, consider using documented methods or a different approach to manage cookie consent visibility. Make sure that your custom script runs after all Shopify scripts have loaded. You might want to place your script at the bottom of the theme.liquid file or within a $(document).ready() function if you're using jQuery, to ensure it executes after the page has fully loaded.

 

Shopify's documentation focuses on adding a cookie compliance banner and ensuring it meets GDPR requirements without explicitly detailing methods to programmatically re-trigger the consent banner via JavaScript​​. For GDPR compliance, the emphasis is on obtaining explicit consent before serving cookies, providing clear information about cookie usage, and making it as easy to withdraw consent as it is to give it​.

 

FYI: see another thread from last week on this topic here.

 

Hope that helps! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

BenjaminB
Shopify Expert
4 0 1

Entschuldigung, dachte ich wäre in der englischsprachigen Community, weil die Buttons alle in englisch waren/sind... Anyhow... 😉

Wie man den Cookie Consent Banner einrichtet ist natürlich klar. Was wir nach Absprache mit einem Datenschützer und RA allerdings bräuchten wäre ein Link (z.B. im Footer: <a href="#CookieConsentReload" class="link link--text list-menu__item list-menu__item--link">Cookie Einstellungen</a>) um die Cookie "Manage Preferences" auch nachträglich nochmals anzupassen.

 

Mein Code sieht inzwischen wie folgt aus, auch basierend auf den Infos hier (https://shopify.dev/docs/api/customer-privacy#loading-the-customer-privacy-api), allerdings wird noch immer kein PopUp-Fenster geöffnet, was anscheinend an dem "Storefront API token" liegt, soweit ich die Informationen/Konsolen-Feedbacks analysieren kann.

 

 

    <script type="text/javascript">
    // Laden der Customer Privacy API
    window.Shopify.loadFeatures(
        [
            {
                name: 'consent-tracking-api',
                version: '0.1',
            },
        ],
        function(error) {
            if (error) {
                console.error('Fehler beim Laden der Privacy API:', error);
            } else {
                console.log('Privacy API erfolgreich geladen!');
                // Hier können Sie weitere Funktionen aufrufen, die von der API abhängig sind
                shouldShowCookieBanner(); // Rufen Sie die Funktion auf, um den Cookie-Banner anzuzeigen
            }
        }
    );

    // Funktion zum Anzeigen des Cookie-Banners
    function showCookieBanner() {
        // Einstellungen des Benutzers abrufen
        var consent = window.Shopify.customerPrivacy.currentVisitorConsent();

        // Konfigurieren Sie den Cookie-Banner basierend auf den Benutzereinstellungen
        var bannerContent = 'Standard-Cookie-Banner-Inhalt'; // Hier den HTML-Inhalt des Cookie-Banners entsprechend gestalten

        // Hier könnten Sie die verschiedenen Zustände (akzeptiert, abgelehnt) des Benutzers berücksichtigen und den Banner entsprechend anpassen
        if (consent && consent.marketing === 'yes') {
            // Benutzer hat Marketing-Cookies zugestimmt
            bannerContent += ' Marketing-Cookies sind aktiviert.';
        } else {
            // Benutzer hat Marketing-Cookies nicht zugestimmt
            bannerContent += ' Marketing-Cookies sind deaktiviert.';
        }

        if (consent && consent.analytics === 'yes') {
            // Benutzer hat Analytics-Cookies zugestimmt
            bannerContent += ' Analytics-Cookies sind aktiviert.';
        } else {
            // Benutzer hat Analytics-Cookies nicht zugestimmt
            bannerContent += ' Analytics-Cookies sind deaktiviert.';
        }

        if (consent && consent.preferences === 'yes') {
            // Benutzer hat Präferenz-Cookies zugestimmt
            bannerContent += ' Präferenz-Cookies sind aktiviert.';
        } else {
            // Benutzer hat Präferenz-Cookies nicht zugestimmt
            bannerContent += ' Präferenz-Cookies sind deaktiviert.';
        }

        // Hier können Sie den Banner in Ihrem DOM platzieren und anzeigen
        // Beispiel: document.getElementById('cookieBanner').innerHTML = bannerContent;
    }

    // Funktion zum Prüfen, ob das Banner angezeigt werden sollte
    function shouldShowCookieBanner() {
        // Überprüfen, ob die Zustimmung bereits gegeben wurde
        var consent = window.Shopify.customerPrivacy && window.Shopify.customerPrivacy.currentVisitorConsent();
        // Überprüfen, ob das Banner bereits angezeigt wurde
        var bannerShown = localStorage.getItem('cookieBannerShown');

        // Wenn keine Zustimmung vorliegt und das Banner nicht bereits angezeigt wurde, zeigen Sie das Banner an
        if ((consent && consent.marketing === '' && consent.analytics === '' && consent.preferences === '') && !bannerShown) {
            showCookieBanner();
            localStorage.setItem('cookieBannerShown', true); // Markieren Sie das Banner als angezeigt
        }
    }

    // Event Listener für Ihren Link
console.log("Event-Listener wird eingerichtet");
document.querySelector('a[href="#CookieConsentReload"]').addEventListener('click', function(e) {
    console.log("Link wurde geklickt");
    e.preventDefault();
    showCookieBanner();
});

    // Initialer Aufruf beim Laden der Seite
    shouldShowCookieBanner();
</script>

 

 

Wäre auch zufrieden, wenn man die Settings auf einer separaten Seite einsehen&bearbeiten könnte, wie auch die Seite zur "Deaktivierungsseite" (https://admin.shopify.com/store/..../settings/privacy/dns), aber wüsste nicht welchen Weg ich dazu beschreiten müsste.

 

Tips sehr willkommen, Danke im Voraus!

Gabe
Shopify Staff
18005 2848 4192

Hey @BenjaminB 

 

Hmmm, lass uns das weiter mit einer 🔎 durchgehen. Letztendlich kann es sein, dass es sich hier um einen Hard Limit der Customer Privacy App handelt, aber 👁️ wir uns das weiter an.

 

ISt dein Event Listener für den Link möglicherweise nicht funktionsfähig weil der Link zum Zeitpunkt des Ausführens des Scripts noch nicht im DOM vorhanden ist? Wird dein Script im <head> des Dokuments korrekt geladen oder bevor der Link im DOM gerendert wird? Vielleicht anstatt den Event-Listener direkt an den Link zu binden, ihn an ein Parent Element binden (z.B. document.body), und prüfen, ob das geklickte Element der spezifische Link ist? Das könnte wie folgt aussehen:

 

document.addEventListener('DOMContentLoaded', function() {
    document.body.addEventListener('click', function(e) {
        if (e.target && e.target.matches('a[href="#CookieConsentReload"]')) {
            e.preventDefault();
            console.log("Link wurde geklickt");
            showCookieBanner();
        }
    });
});

 

Die von dir verwendete Shopify.customerPrivacy.currentVisitorConsent() Methode scheint korrekt zu sein, um den aktuellen Zustand der Zustimmung zu überprüfen und auch die Logik zum Anzeigen des Banners basierend auf dieser Zustimmung.

 

Hier ein paar weitere Infos die ich aus unseren Developer Docs entnommen habe:

 

Um die Customer Privacy API zu verwenden, musst du sie zunächst mit der loadFeatures-Methode von Shopify laden. Dies ermöglicht es dir, die API-Funktionen nach dem Laden zu nutzen, wie das Registrieren von Benutzereinwilligungen oder das Abfragen von Datenverarbeitungsberechtigungen​​.

 

Du kannst die setTrackingConsent-Methode verwenden, um die Zustimmung des Benutzers zu verschiedenen Tracking-Kategorien (wie Präferenzen, Analytik, Marketing) zu registrieren. Um die aktuelle Zustimmung eines Besuchers zu überprüfen, bietet die API die currentVisitorConsent-Methode, mit der du bestimmen kannst, ob und welche Zustimmungen erteilt wurden​.

 

Oder versuchst du einen benutzerdefinierten Banner zu erstellen, das auf die spezifischen Anforderungen deines Shops und die rechtlichen Anforderungen reagiert? Wenn nicht, vielleicht kannst du das hiermit lösen:

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

BenjaminB
Shopify Expert
4 0 1

Ich will eigentlich nur die ausgewählten Settings des Standard-Cookie-Banners wieder öffenen und darstellen können.

 

Wie gesagt, eigentlich erwarte ich, dass der Cookie Banner das mitbringt, zumindest als EndUser - und so wie es quasi beworben wird. 

 

Die DSGVO besagt meines Wissen nach, dass Nutzer das Recht haben müssen, dem zugestimmten Speichern von Cookies jederzeit zu widerrufen.

 

Diese Funktion ist aktuell nicht gewährleistet.

Wie komme ich da zum Ziel?

Waldi_7
Tourist
4 0 2
Hier eine einfache und native Lösung von unserer Ansprechperson bei Shopify:

Ergänzung zum Cookie Banner --> es ist möglich, dass dieser erneut auftaucht.
 
Code: <a href="#" onclick="event.preventDefault(); privacyBanner.showPreferences();">Privacy Preferences</a>
 

Ich habe den Code manuell bei mir in das footer.liquid gepackt --> Dann kann ein Kunde die Settings jederzeit wieder aufrufen.

Gabe
Shopify Staff
18005 2848 4192

Hey @Waldi_7 

 

Danke für den Code, dieser hat aber in meinem Dawn Theme nicht gefunzt. Bedeutet das auch, dass der Cookie Banner immer wieder erscheint? Wenn ja, dann wird das m. E. keine tolle Erfahrung für deine Besucher sein, die andauernd den Cookie Banner immer wieder wegklicken müssen. Abgesehen davon ist es nicht eine gesetzliche Pflicht, dass der Cookie Banner immer wieder erscheinen muss, falls der Kunde sich die Cookie Auswahl wieder überlegt hat.

 

Trade-off oder sogar die eleganteste Lösung?

Warum es nicht wie beim Cookie Banner von Beeclever machen , wo der Cookie Banner als kleine Fingerabdruck an der Seite der Webseite schwebt und wenn drauf klickt erscheint der Cookie Banner wieder bei Bedarf und nicht total störend?

 

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

---
Warum nicht etwas Gamification in das Shop einbauen, um deinen Kunden etwas Fun im Shop anzubieten? Gerne kann ich bei Interesse Tipps dazu geben!

Hast du weitere Fragen zum Shop? Gebe einfach ein Suchbegriff oben in der Suchleiste der Community Landingpage ein, denn das Thema haben wir sehr wahrscheinlich schon besprochen. Halte bitte Ausschau in deiner E-Mail auf Notifications zu Antworten auf deine Fragen in der Community.

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog

Waldi_7
Tourist
4 0 2

https://www.seeberger.de/ 

schau gerne selber, der Banner geht nicht jedes mal auf... der Link ist noch nicht an der richtigen Stellen und ja, den Fingerabdruck als Link haben wir auf dem Schirm.

Laut DSGVO müssen die Cookie-Einstellungen jederzeit erreichbar und anpassbar sein!

Schade, das für solche absoluten Basisfunktionen von euch immer nur Apps von Drittanbietern vorgeschlagen werden oder sogar eine eigene Lösung zu entwickeln.

Gabe
Shopify Staff
18005 2848 4192

@Waldi_7 

 

Danke aber dein Cookie Banner ist für mich nicht erschienen, auch nicht auf Incog. Habe ich etwas übersehen?

 

 

Daher empfehlen wir ja nur die Best-of-Breed Drittanbieter, wie Beeclever anstatt Custom Coding Lösungen, denn die Apps sind Tried & Tested und einfach bessere Customer Experiences.

 

Es ist aber nicht gesagt, dass auch dieser Feature nicht auch bald zum Shopify Customer Privacy Banner kommt denn die App ist ja in ständiger Entwicklung.

 

Hoffe das hilft dir weiter - lass wissen falls nicht! 😉

 

Gabe | Social Care @ Shopify
 - War meine Antwort hilfreich? Klicke Like um es mich wissen zu lassen! 
 - Wurde deine Frage beantwortet? Markiere es als Akzeptierte Lösung 
 - Um mehr zu erfahren, besuche das Shopify Help Center oder den Shopify Blog