GA4-Integration über Shopify Custom Pixel
WICHTIGER HINWEIS: Diese Anleitung solltest du nur befolgen, wenn du den Google Tag Manager oder Google Analytics 4 direkt über den Shopify Custom Pixel integriert hast.
Kurz zusammengefasst
In diesem Leitfaden erfährst du, wie du Varify-Events über die Shopify Custom Pixel-Integration an Google Analytics 4 sendest. Du lernst, wie du die Varify-Events entweder über den Google Tag Manager oder über die direkte gtag-Integration an Google Analytics 4 sendest.
Senden der Varify-Daten via GTM oder GTAG über den Shopify Custom Pixel
Schritt 1: Auswahl der Analytics-Verbindung „Shopify App / Custom Pixel“
Gehe zu app.varify.io und klicke auf „Go to tracking setup“. Wähle dann im Tracking Setup Wizard „Google Analytics 4 (Shopify Custom Pixel Integration)“ aus. Folge den Schritten des Setup Wizards. Nur wenn du bereits GTM auf deiner Seite verwendest, ist es notwendig, die Schritte in Option 1 unten zu befolgen. Wenn du GA direkt ohne den GTM integriert hast, gehe bitte direkt zu Option 2.
Option 1: Google Tag Manager-Integration
Folge den Schritten in dieser Anleitung, wenn du den Google Tag Manager in deinem Shopify Custom Pixel integriert hast. Wenn du deine Daten direkt über gtag sendest – also GA4-Direktintegration über Custom Pixel –, folge bitte diesen Schritten Anleitung.
Schritt 2: Füge die varify analytics.subscribe-Funktion im Custom Pixel des GTM hinzu
Rufe den Bereich „Customer events“ im Shopify-Backend auf und öffne den Custom Pixel, in dem du deinen GTM integriert hast.
Das Varify-Event wird über analytics.subscribe erstellt, das zu deinem DataLayer hinzugefügt wird. Im Screenshot siehst du das Varify-Event unten eingefügt.
Füge den folgenden Code unterhalb des Google-Tag-Manager-Codes zu deinem Custom Pixel hinzu:
analytics.subscribe('varify', (event) => {
window.dataLayer.push({
'event': "varify",
...event.customData
});
});
Schritt 3: Deaktivieren der Option "Start Tracking on Activation Event"
Gehe unter „Tracking Options“ zu „Advanced Setup“. Deaktiviere die Option „Start Tracking on Activation Event“.
Schritt 4: Einrichtung des Google Tag Managers
1. Erstellung einer neuen Data-Layer-Variable (VA Short)
Diese Variable wird verwendet, um einem Tag die Informationen des A/B-Tests bereitzustellen.
- Neue Variable erstellen: „Variables“ > „New“
- Variablentyp -> „Data Layer Variable“
- Data Layer Variable Name ->
varify_abTestShort(Schreibweise verbindlich) - Variable benennen -> VA Short
2. Neuen Trigger erstellen (Varify.io - Event)
Der Trigger ist das entscheidende Ereignis, das die Übertragung der Daten an das Analytics-System auslöst.
- Name des Triggers: z. B. „Varify.io - event“
- Triggertyp: „User-defined event“
- Event name:
varify(Schreibweise verbindlich)
3. Erstellung eines neuen GTM-Tags (Varify.io - GA4 Tracking Linker)
Tags sind Code-Schnipsel, die die in den Variablen gespeicherten Werte an dein Analysetool, wie z. B. Google Analytics, senden. Erstelle nun ein solches Tag, um die Werte der erstellten Variable an Google Analytics zu senden.
- Name des Tags: "Varify.io - GA4 Tracking Linker"
- Konfigurations-Tag: [verwende dein bestehendes GA4-Tag].
- Ereignisname: z. B. "Abtesting"
- Parametername:
varify_abTestShort(verpflichtende Schreibweise) - Werte:
{{VA Short}}(die in Schritt 1 erstellte Variable) - Trigger: "Varify.io - event" (der in Schritt 2 erstellte Trigger)
4. GTM-Container veröffentlichen
Damit deine Anpassungen im Google Tag Manager auch auf deiner Website funktionieren, ist es wichtig, die Änderungen zu veröffentlichen.
Gehe dazu im Tag Manager links auf „Übersicht“. Hier siehst du eine Übersicht aller Elemente, die du gerade erstellt hast.
Zum Veröffentlichen klicke oben rechts auf den blauen Button „Publish“ und bestätige. Der Tag ist jetzt live und sendet die Daten an dein Google Analytics.
Option 2: GA4-Direktintegration
Befolge die Schritte in diesem Leitfaden, wenn du den gtag in deinem Shopify Custom Pixel integriert hast (wenn du Daten direkt an Google Analytics 4 sendest)
Schritt 2: Füge die varify analytics.subscribe-Funktion im Custom Pixel des gtag hinzu
Rufe den Bereich „Customer events“ im Shopify-Backend auf und öffne das Custom Pixel, in dem du deinen gtag integriert hast.
Das Varify-Event wird über das analytics.subscribe erstellt, das zu deinem DataLayer hinzugefügt wird. Im Screenshot siehst du das Varify-Event unten eingefügt.
Füge den folgenden Code in deinem Custom Pixel unterhalb des Google-Tag-Manager-Codes hinzu:
// Start Varify subscribe event
analytics.subscribe("varify", (event) => {
const d = event?.customData || {};
gtag("event", "varify", {
storageType: d.storageType,
teamId: d.teamId,
varify_abTest: d.varify_abTest,
varify_abTestLong: d.varify_abTestLong,
varify_abTestShort: d.varify_abTestShort,
varify_error: d.varify_error,
varify_experimentId: d.varify_experimentId,
varify_experimentName: d.varify_experimentName,
varify_success: d.varify_success,
varify_variationId: d.varify_variationId,
varify_variationName: d.varify_variationName
});
});
// End Varify subscribe event
Schritt 3: Deaktivieren der Option „Start Tracking on Activation Event“
Gehe unter „Tracking Options“ zu „Advanced Setup“. Deaktiviere die Option „Start Tracking on Activation Event“.