Method to manually trigger the cookie consent banner

[BenjaminHD]

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?

[Waldi_7 · Accepted solution]

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]

Hey @BenjaminHD 

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! 😉

[BenjaminHD]

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]

Hey @BenjaminHD 

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:

• You can use the Customer Privacy API to build a custom cookie consent banner for your storefront or guard certain activities behind consent.

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

[BenjaminHD]

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 · Accepted solution]

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]

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.

[Waldi_7]

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]

@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! 😉

[Ben310]

Scheint immer noch kein Cookie Banner auf deiner Seite zu leben...

[Waldi_7]

Komisch... Im normalen Modus (nach löschen aller Cookies) und auch im Inkognito-Modus klappt bei mir alles so, wie es soll...

[lumabloom]

PERFEKT! Du bist echt mein Held 🙂 

@Gabe  ich will auch nochmal konkretisieren: Es ist Pflicht! Das der Nutzer JEDERZEIT seine zuvor gewählten Einstellungen zu den Cookies ändern kann. Das ist im Moment NICHT möglich mit dem shopify Cookietool. 

Durch den Link mit dem Code kann man jederzeit als Nutzer die Einstellungen wieder ändern > so wie es das Gesetz verlangt.

Nehmt das doch einfach bei Shopify auf und schon ist es rund 🙂

[BenjaminHD · Accepted solution]

Danke @Waldi_7,

habe den Link nun entsprechend eingebaut.

In unserem Dawn Version scheint es zu funktionieren. Wie folgt implementiert:

                    <ul class="footer-block__details-content list-unstyled">
                      {%- for link in block.settings.menu.links -%}
                        <li>
                          <a href="{{ link.url }}" class="link link--text list-menu__item list-menu__item--link{% if link.active %} list-menu__item--active{% endif %}">
                            {{ link.title }}
                          </a>
                        </li>
                        
                      {%- endfor -%}
                      <li><a href="#" onclick="event.preventDefault(); privacyBanner.showPreferences();" class="link link--text list-menu__item list-menu__item--link">Cookie-Einstellungen anpassen</a></li>
                    </ul>

Ist vorläufig ein Hack, aber da Version 15.0 des Dawn-Templates noch immer keine Lösung brachte, wohl der aktuell einfachste Weg.

An @gabeo - bitte an das interne Template-/PrivacyCode-Team die Bitte weitergeben, das nativ zu implentieren das ist wirklich wichtig, kein nice-to-have, sondern nach DSGVO und wie von @lumabloom beschrieben leider ein MustHave.

Ich persönlich halte ja gar nichts von Cookie-Bannern, aber ich bin weder Rechtsverdreher noch Politiker und wer hört ohnehin auf mich... 😉

In diesem Sinne, Danke an Alle für diesen HotFix und auf eine native Lösung in naher Zukunft (Dawn 15.1 it is! ;),

Benjamin

[Adnap-signature]

Wo genau muss ich den Code einfügen.

Und müssen irgendwelche Wörter durch spezielle Daten ausgetauscht werden. Ich habe das selbe Problem dass ich den Standart shopify banner nicht erneut aufrufen kann 

[RSfromE]

sieht auch im canopy theme gut aus. Danke.
Die Bitte an "shopify": das gehört laut DSGVO in den Standard 

[asalklar2]

Hi @Waldi_7 ,

wie binde ich das genau ein? Ich habe in der Shopify-Navigation den Menüeintrag generiert "Cookie-Einstellungen". Wie kann ich da jetzt den Link hinzufügen, wie von dir geschrieben? Das klappt so für mich nicht. 

[Waldi_7]

Hi asalklar2,

den Link musst du direkt im Theme einbauen.  In den Menüeinträgen selber kann kein JS eingebunden werden.

LG

[BenjaminHD]

Hi Asalklar2,

Du musst den Link im liquid-Code einbinden. z.B. im footer-luquid oder wo auch immer Du den Link einbauen möchtest (z.B. auch in der Sidebar oder sonstwo).

Liebe Grüße,

b

[RSfromE]

vielen Dank