Das notwendige Einfügen eines DSGVO-konformen Cookie-Banners in Shopify kann mitunter herausfordernd sein, sodass viele Shops hier zu kostenpflichtigen Apps greifen. Wie man einfach und (für kleine Shops) kostenlos eine in Deutschland gehostete und konforme Lösung in seinen Shopify-Shop implementiert, zeigen wir in diesem Blog-Beitrag.
Anmeldung bei CCM19 und Ersteinrichtung
Für die Erstellung des Cookie-Banners nutzen wir die kostenfreie Variante des “CCM19 Cookie Consent Tool”.
Auf der Seite erstellt man nun einen Account mit seiner E-Mail und legt ein Passwort fest, anschließend wird man direkt zur Ersteinrichtung weitergeleitet wie in folgendem Bild:
In die Eingabemaske trägt man nun die URL des Shops ein und bestätigt den Sicherheitshinweis. Mit Klick auf den grünen Button geht es los und das Tool durchsucht den Shop nach allen vorhandenen Cookies. Wichtig ist, dass der Shop zugänglich ist, also nicht mehr hinter einer Passwortabfrage und andere Cookie-Lösungen sollten auch deaktiviert sein.
Im Anschluss erhält man eine Auswertung, sowie eine Auflistung aller gefunden Cookies und kann sich diese noch einmal im Detail ansehen und bearbeiten. Das Tool fügt hier auch bereits passende Beschreibungen zu den einzelnen Cookies hinzu.
Sollten hier nicht alle genutzten Cookies gefunden werden, was in Ausnahmefällen durchaus passieren kann, besteht die Möglichkeit im Nachhinein im Admin-Bereich unter „Einbindungen & Cookies“ manuell einzelne Cookies aus einer Datenbank auszuwählen und einzubinden.
Durch einen Klick auf den grünen Button kann man die vorgeschlagenen Daten übernehmen.
Auf der nächsten Seite trägt man nun die URL’s zu seinem Impressum und zu seiner Datenschutzerklärung ein und bestätigt erneut mit dem grünen Button.
Anschließend muss man noch eine Seite ausfüllen, welche bestimmte Platzhalter wie bspw. {FIRMA} ersetzt.
Daraufhin wird man zu einer Übersichtsseite geleitet, welche die Code-Snippets zum Einbinden des Cookie-Banners auflistet. Man kann diese hier direkt kopieren, aber auch später noch im Admin-Bereich abrufen.
Das erste Snippet mit der automatischen Sprachauswahl ist hier zu empfehlen. Mit einem finalen Klick auf den grünen Button gelangt man zum Admin-Bereich und die Ersteinrichtung ist abgeschlossen.
Einbinden des Cookie-Banners in Shopify
Um das Cookie-Banner in Shopify einzubinden, navigiert man in den Admin-Bereich des Shops und klickt auf „Vertriebskanäle > Onlineshop > Themes„. Dort wählt man über einen Klick auf die drei Punkte beim aktuellen Theme den Menüpunkt „Code bearbeiten“ aus.
Im Code-Editor trägt man “theme” in das Suchfeld oben links ein und wählt die Datei “theme.liquid” aus. Den vorhin kopierten Snippet-Code, der das Cookie-Banner enthält, trägt man direkt nun unter dem “<head>” ein und speichert anschließend.
Damit ist die Einrichtung auch schon abgeschlossen und man sollte nun prüfen, ob das Cookie-Banner korrekt im Shop angezeigt wird. In unserem Fall hat die Einbindung reibungslos funktioniert:
Einbindung der Customer Privacy API von Shopify
Damit alles im Zusammenspiel mit Shopify funktioniert, muss man die Systeme verbinden. Dazu bietet Shopify die Customer Privacy API an, über die die Zustimmung oder Ablehnung der Datenerhebung durch den Webseitenbesucher via CCM19 übermittelt werden kann.
Dazu muss das folgende Script in eine technisch notwendige Einbindung eingetragen werden (in diesem Beispiel wird die Einbindung von CCM19 selbst dazu genutzt).
<script defer>
(function () {
var intervals = {};
var shopifyFeaturesLoaded = false;
function updateShopifyCustomerPrivacy() {
if (typeof window.Shopify == 'object'
&& typeof window.Shopify.loadFeatures == 'function'
&& !shopifyFeaturesLoaded
) {
window.Shopify.loadFeatures([{
name: 'consent-tracking-api',
version: '0.1',
}],
function(error) {
if (error) {
throw error;
}
});
shopifyFeaturesLoaded = true;
}
if (typeof window.Shopify == 'object'
&& typeof window.Shopify.customerPrivacy == 'object'
&& typeof window.Shopify.customerPrivacy.setTrackingConsent == 'function'
) {
var accepted = CCM.acceptedEmbeddings.reduce(function (c,i) {
return c || i.name == 'Shopify Pixel';
}, false);
window.Shopify.customerPrivacy.setTrackingConsent(accepted, function () {
console.log('setTrackingConsent', accepted);
});
window.clearInterval(intervals.shopifyCustomerPrivacy);
intervals.shopifyCustomerPrivacy = null;
}
}
function updateThirdPartyConsentState() {
if (!intervals.shopifyCustomerPrivacy) {
intervals.shopifyCustomerPrivacy = window.setInterval(updateShopifyCustomerPrivacy, 200);
}
}
window.addEventListener('ccm19WidgetClosed', updateThirdPartyConsentState);
updateThirdPartyConsentState();
})();
</script>
Um das Script einzutragen, navigiert man in das Admin-Panel und klickt auf „Einbindungen & Cookies“ und wählt anschließend den grünen Button für das Bearbeiten bei „Cookie Consent Manager CCM19“ aus.
Anschließend trägt man das kopierte Script in die Spalte „Quellcode der Einbindung“ ein und speichert.
ACHTUNG: Bei der Einbindung ist darauf zu achten, dass der Name in Zeile 29 „Shopify Pixel“ mit dem Namen der Shopify Einbindung im Shop übereinstimmt. Heißt die Shopify-Einbindung anders, muss an dieser Stelle der Name dahingehend geändert werden.
Link zum Aufrufen der Cookie-Einstellungen einfügen
Optional besteht auch noch die Möglichkeit, das Cookie-Banner im Shop zu verlinken (bspw. im Footer). So hat der Kunde jederzeit die Möglichkeit, das Cookie-Banner wieder aufzurufen und seine Einstellungen anzupassen. Den Knopf der ansonsten unten links vom Cookie-Banner im Shop angezeigt wird, verschwindet dadurch und überlagert (vor allem in der Mobilen Ansicht) keine wichtigen Elemente.
Um das zu realisieren, navigiert man in den Admin-Bereich des Shops und klickt auf „Vertriebskanäle > Onlineshop > Navigation“ und wählt das Menü aus in dem man den Link einbauen möchte. Klassischer weise also eines der Footer-Menüs. In dem Menü muss dann ein Menüpunkt hinzugefügt werden: z.B. mit dem Namen „Cookie-Einstellungen“. Als URL für den Menüpunkt trägt man dann: #CCM.openWidget ein.
Speichern nicht vergessen. Jetzt erscheint der Link mit der Beschriftung “Cookie-Einstellungen” auf jeder Seite im Footer und das Cookie-Banner kann jederzeit wieder geöffnet werden.
Fazit:
Das Cookie-Banner-Tool CCM19 ist eine gute Wahl, da es sehr benutzerfreundlich ist und sich schnell in den Shop integrieren lässt. Mit der kostenlosen Basisversion sind bis zu 5000 Aufrufe pro Monat möglich, was für kleinere Shops ausreichend sein sollte. Die kostenpflichtige Version bietet viele Möglichkeiten an Auswertungen und Optimierungen zu machen, ist aber geringfügig kostspieliger als andere Lösungen.
Im Gegensatz zu anderen (externen) Lösungen gibt es aber eine Perfekt Schnitsttelle zu der Privicy-Schnittstelle in Shopify, was einen guten betrieb gewährleistet.
