UserCentrics und Custom Web Pixels

[UxPx77]

Ich arbeite gerade an einem Headless Shopify Store. Das heißt die Storefront des Shops liegt auf einer eigenen Website und der Checkout wird unter Shopify betrieben (gleiche Top Level Domain, andere Subdomain).

Auf der Website läuft Usercentrics als Consent Manager. 

Nun habe ich ein Custom Webpixel mit einem GTM-Tracking-Code implementiert und möchte, dass dieser auf den Consent Status reagiert, den der Benutzer auf der Website eingegeben hat. 

Meine Theorie ist, dass ich auf der Website über ein UserCentrics-Event den Consent Status abfrage, diesen an die Shopify Privacy Api übergebe und diese sich dann darum kümmert ob der Webpixel aktiviert wird oder nicht.

Leider kann ich diese Theorie nicht wirklich testen, da der Shop noch nicht live ist und Website sowie Shop noch auf unterschiedlichen Domains laufen. 

Ist der Ansatz den ich beschrieben habe korrekt, oder habe ich einen Denkfehler? Wie genau spielen Webpixel und Data Privacy Api zusammen? Hat schon einmal jemand UserCentrics mit einem GTM-Webpixel in einer Headless-Umgebung ans laufen gebracht und kann mir Tipps geben?

[Gabe]

Hey @UxPx77 

Dein Ansatz, UserCentrics mit einem Custom Webpixel über Google Tag Manager (GTM) in einem Headless Shopify Store zu integrieren, klingt vielversprechend und ist prinzipiell ein interessanter Weg, um den Consent Status für die Aktivierung von Webpixels entsprechend der Benutzereinwilligung zu handhaben.

UserCentrics bietet Benutzereinwilligungen für Cookies, Pixels und andere Webtechnologien für Marketingzwecke die du einholen kannst. Durch das Hinzufügen des UserCentrics-Skript-Tags zu deiner Shopify-Website kannst du Benutzereinwilligungen relativ schnell einsammeln​​​​.

Zur Verwaltung und Implementierung von Webpixels bietet Shopify eine Webpixel-App-Erweiterung an, die es ermöglicht die Erfassung verhaltensbezogener Daten für Marketing- und Analysezwecke, nur benötigt man gute Kenntnisse über die GraphQL-API, um maßgeschneiderte Lösungen zu bauen​​. Was die Verbindung zwischen UserCentrics und GTM anbelangt, so besteht der Schlüssel darin, das Consent-Management so zu konfigurieren, dass GTM Tags basierend auf dem Consent Status des Nutzers getriggert werden. Die Doku von UserCentrics bietet Infos für die technische Implementierung, doch spezifische Beispiele oder Anleitungen zur direkten Übertragung des Consent Status von UserCentrics zu Shopify's Privacy API und der darauf basierenden Steuerung von GTM Tags scheinen limitiert zu sein. 

Beispiel:

Um auf den Consent Status zu reagieren, die UserCentrics-Events nutzen die dir helfen können, den aktuellen Consent Status zu überprüfen, vielleicht mit einem Event Listener, der auf diese Events reagiert. Nachdem du den Consent Status erhalten hast, kannst du diese Information an GTM übermitteln, indem du eine Variable in GTM setzt oder ein spezielles Event an GTM sendest, das den Consent Status beinhaltet. In GTM die Trigger konfigurieren, die auf den Consent Status reagieren. Zum Beispiel, einen Trigger erstellen, der nur dann feuert, wenn der Nutzer seine Zustimmung zu Marketing-Cookies gegeben hat.

Hier ist ein Beispielcode, aus der obigen Developer Doku entnommen, der zeigt, wie du auf UserCentrics-Events hören und den Consent Status in GTM nutzen könntest. Beachte, dass dieser Code angepasst werden muss, um deine spezifischen Anforderungen und die Konfiguration deiner UserCentrics- und GTM-Implementierung zu erfüllen:

// Listener für UserCentrics Consent Status
document.addEventListener('usercentrics:consent', function(event) {
   var consentData = event.detail;
   
   // Überprüfung, ob Zustimmung für Marketing-Cookies gegeben wurde
   var marketingConsent = consentData.consents.find(function(consent) {
       return consent.templateId === 'DEINE_MARKETING_CONSENT_TEMPLATE_ID' && consent.status === true;
   });

   // Setzen einer GTM-Variable oder Senden eines Events an GTM basierend auf dem Consent Status
   if (marketingConsent) {
       // Beispiel: Senden eines Custom Events an GTM
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
           'event': 'marketingConsentGiven'
       });
   }
});

Bevor du so einen Ansatz verwendest, stelle sicher, dass du die korrekte templateId für deine Marketing-Cookies verwendest und den Code entsprechend anpasst. 

Für eine erfolgreiche Integration in einem Headless Shopify Setup wäre es also ratsam, die Entwicklerdoku zu studieren und eventuell direkt den UserCentrics Support zu kontaktieren. Spezifische Fragen zur Implementierung von UserCentrics mit GTM in einer Headless-Umgebung bitte auch durch direkten Kontakt mit UserCentrics' Support um weitere Einblicke und Hilfe zu bekommen.

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

---
Habt ihr auch den Shop auf Ostern eingestellt das jetzt um die Ecke liegt? Warum nicht eine Ostereierjagd 🐣 in das Shop einbauen, um deinen Kunden etwas Gamification und 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.