Shopify bietet eine native Pixel-Infrastruktur, die automatisch mit dem Cookie Consent des Shops verknüpft ist. Wird der GTM „hart“ ins Theme (z. B. via theme.liquid) integriert, kann er vor dem Akzeptieren der Cookies feuern – ein Risiko aus Sicht der DSGVO und anderer Datenschutzverordnungen (z. B. TTDSG).
Best Practice: GTM ausschließlich über die Shopify Pixel-Verwaltung einbinden.
Welche Tags sollten über den GTM laufen – und welche nicht?
- Empfehlung: Über die Shopify Google Channel App
- Grund: Automatische Synchronisation mit dem Cookie Consent
- Empfehlung: Über die offizielle Meta-App in Shopify
- Grund: Optimierte technische Integration & automatische Einhaltung der Datenschutzeinstellungen
- Empfehlung: Einbindung über den Google Tag Manager
- Grund: Diese Tools haben meist keine native Shopify-Anbindung
- Empfehlung: Je nach Setup über GTM oder direkt als Shopify Pixel
- Grund: Abhängig vom Consent-Modell und ob eine granulare Steuerung gewünscht ist
Tipp: Alles, was über native Apps eingebunden werden kann, sollte auch so eingebunden werden – der GTM dient dann als Ergänzung, nicht als Ersatz.
Shopify führt Shopify Pixel im sogenannten JavaScript Sandbox Mode aus. Das bedeutet:
- GTM-Tags werden nicht im Vorschau-/Debug-Modus angezeigt.
- Extern geladene Skripte unterliegen einer strengen Isolierung.
- Debugging über GTM-Bordmittel ist faktisch blockiert.
Um trotzdem Einblick in laufende Events und Daten zu bekommen, kannst du Custom Logging-Tags einsetzen, die gezielt ausgelöst werden, sobald ein Event im Shopify Pixel feuert.
Schritt 1: Custom HTML-Tag für Logging im GTM erstellen
1. Öffne den Google Tag Manager und gehe in deinen Workspace.
2. Klicke auf „Tags“ → „Neu“ → „Tag konfigurieren“ → „Benutzerdefiniertes HTML“.
3. Füge folgenden Code in das HTML-Feld ein:
<script>
var lastEvent = {{Event}};
var latestData = {{Latest Datalayer}};
console.log("[GTM DEBUG] Event:", lastEvent);
console.log("[GTM DEBUG] DataLayer:", latestData);
</script>
Hinweis: Die geschweiften Variablen {{Event}} und {{Latest Datalayer}} musst du im nächsten Schritt definieren. Dieser Tag sorgt dafür, dass das aktuell ausgelöste Event und der letzte Eintrag im DataLayer direkt in der Browser-Konsole ausgegeben werden – gut strukturiert und lesbar.
Schritt 2: Latest Datalayer-Variable als Custom JS Variable definieren
1. Navigiere im GTM zu „Variablen“ → „Neu“ → „Benutzerdefinierte JavaScript-Variable“.
2. Gib der Variable den Namen „Latest Datalayer“.
3. Füge folgenden Code in das JavaScript-Feld ein:
function() {
var dl = window.dataLayer || [];
return dl.length ? dl[dl.length - 1] : {};
}
Diese Variable greift immer den letzten Eintrag im dataLayer ab – unabhängig davon, wie viele Events bereits gesendet wurden. Falls der dataLayer nicht existiert, wird ein leeres Objekt zurückgegeben – das verhindert JavaScript-Fehler.
Schritt 3: Event in Shopify Pixel erweitern
Um die Triggerbedingung eindeutig zu steuern, musst du im Shopify Admin Folgendes tun:
1. Gehe zu „Einstellungen“ → „Customer Events“.
2. Wähle das gewünschte Custom Pixel Script oder erstelle ein neues.
3. Ergänze beim Absenden eines Events im Code folgenden Parameter:
{
"event": "purchase",
"value": 100,
"currency": "EUR",
"fired_from": "custom_pixel"
}
Wichtig: Der fired_from-Key ist frei wählbar, sollte aber konsistent mit deiner Triggerlogik im GTM sein.
Schritt 4: Custom Event Trigger im GTM erstellen
1. Im Google Tag Manager: Gehe zu „Trigger“ → „Neu“ → „Trigger konfigurieren“ → „Benutzerdefiniertes Ereignis“.
2. Trage ein:
- Ereignisname: leer lassen oder
.*(für alle Events) - Haken setzen bei „Verwende Regex-Matching“, falls gewünscht
3. Trigger-Bedingung hinzufügen:
- Wähle als Bedingung:
fired_fromequalscustom_pixel
Dieser Trigger wird nur ausgelöst, wenn im dataLayer ein Event mit dem Parameter "fired_from": "custom_pixel" ankommt.
Ergebnis
- Das Logging-Tag wird gezielt nur dann ausgeführt, wenn ein entsprechendes Shopify Pixel Event gesendet wird.
- Die Informationen landen strukturiert in der Browser-Konsole und können im Developer-Tool deiner Wahl geprüft werden.
- Du benötigst keine GTM Preview-Funktion – was den Sandbox-Workaround elegant löst.
Extra-Tipp: Debug-Ausgaben nur im Dev-Modus zeigen
Um zu verhindern, dass diese Logs in der Live-Umgebung sichtbar sind, kannst du das Logging-Tag mit einer zusätzlichen Umgebungsvariable oder Hostname-Bedingung beschränken. Beispiel:
if (window.location.hostname.includes("staging") || window.location.hostname.includes("dev")) {
console.log(...);
}
1. Consent-Management im GTM aktiv nutzen
Nutze das eingebaute Consent-Modul im GTM, um sicherzustellen, dass keine Tags (z. B. Facebook, Google Ads) ohne Zustimmung feuern – auch wenn der GTM über Shopify eingebunden ist.
Beispiel für Consent-Trigger:
Nur feuern, wenn ad_storage oder analytics_storage gleich granted.
2. Fehlersuche mit dem Shopify Pixel Helper
Das Browser-Plugin Shopify Pixel Helper zeigt an, welche Shopify-Events gesendet wurden – auch bei Sandbox-Ausführung.
3. Serverseitiges Tagging als nächste Stufe
Wer maximale Kontrolle über Tracking und Consent-Management will, sollte serverseitiges Tagging mit GTM Server-Side prüfen – besonders bei Meta CAPI oder erweiterten Conversions.
Fazit: Shopify + GTM – so funktioniert das Tracking mit Struktur
- Shopify Pixel verwenden: Für rechtssicheres Tracking und automatische Consent-Synchronisation.
- Nur ergänzende Tags über GTM abbilden: Z. B. Hotjar, benutzerdefinierte Events oder Performance-Test-Setups.
- Debugging clever lösen: Mit intelligentem Logging und Custom Triggern.
- Consent professionell absichern: Über GTM-Mechanismen und Consent-Bedingungen.
Mit diesem Setup bist du sowohl technisch stabil als auch rechtlich sauber aufgestellt – ideal für interne Analytics-Teams und externe Performance-Agenturen.
Weitere Services gesucht? Wir unterstützen gerne bei der technischen Umsetzung von Tracking-Lösungen, Tag Manager-Konfigurationen oder der Optimierung Ihrer Shopify-Analytics-Infrastruktur.