Serverseitiges Tagging für Shopify

Suchen Sie eine einfache und schnelle Möglichkeit, das serverseitige Tagging für Shopify einzurichten? Dann ist die Stape Conversion Tracking App für Shopify genau das Richtige für Sie! Mit unserer App können Sie problemlos ein Google Tag Manager-Web-Skript auf der Website einfügen, eine benutzerdefinierte Domain und einen benutzerdefinierten Loader einrichten, Benutzer- und E-Commerce-Eventdaten an den Data Layer senden und Webhooks konfigurieren. All diese Funktionen tragen dazu bei, das Tracking präziser zu gestalten, indem sie die Lebensdauer von Cookies verlängern, das Browser-Tracking gegen Tracking-Verhinderungstechnologien resistent machen und verlässliche Daten über den Server-Endpunkt an Werbe- und Marketingplattformen senden.

Server-seitiges Tracking ist eine hervorragende Methode zur Datenerfassung für Shopify-Shops, da es eine genaue Conversion-Verfolgung und die Einhaltung von Datenschutzbestimmungen wie der DSGVO gewährleistet. Angesichts von Herausforderungen wie Werbeblockern, Browserbeschränkungen und Cookie-Einschränkungen gewinnen Strategien für cookie-freie Webanalytik und server-seitiges Tracking als zuverlässige Lösung immer mehr an Bedeutung.

Serverseitiges Tagging kann den Erfolg Ihrer Marketingkampagnen mit präzisem Konversionstracking und Nutzeranalyse erheblich steigern. Eine vollständige Nutzung dieser Funktionen erfordert jedoch eine sorgfältige Einrichtung – ein Schritt, den niemand übersehen sollte. 

Um die Implementierung des serverseitigen Taggings so einfach wie möglich zu gestalten, haben wir die Conversion Tracking Shopify App entwickelt. Diese App ist kostenlos nutzbar und hilft, den serverseitigen Google Tag Manager-Container für den Shopify-Shop einfach zu konfigurieren. Schauen wir uns zunächst die Hauptvorteile des serverseitigen Taggings für Shopify-Websites an:

1. Bessere Datenpräzision: Serverseitiges Tagging hilft, eine genauere Datenerfassung zu gewährleisten, indem das Risiko von Datenverlusten oder Fehlern durch Werbeblocker, Browser-Erweiterungen oder andere clientseitige Faktoren reduziert wird.

2. Genaue Konversionszuordnung: Durch die erhöhte Lebensdauer von Cookies und die Übertragung von Benutzerdaten über den Server können Werbenetzwerke Konversionen präziser Marketingkampagnen zuordnen.

3. Verbesserte Website-Performance: Beim serverseitigen Tagging werden Tags auf dem Server geladen und nicht clientseitig, was die Menge an Code reduziert, die im Browser des Nutzers geladen werden muss. Dies kann die Ladegeschwindigkeit der Website verbessern, was für Benutzerfreundlichkeit und SEO entscheidend ist.

4. Erhöhte Sicherheit: Serverseitiges Tagging trägt zur Verbesserung der Website-Sicherheit bei, indem es das Risiko von Datenverletzungen oder anderen Sicherheitsbedrohungen durch clientseitige Schwachstellen reduziert.

Klappen Sie das Element unten auf, um die ausführliche Anleitung aufzurufen.

Die Stape-App „Conversion Tracking“ für Shopify kann kostenlos im Shopify-Marktplatz installiert werden.

Auf dem Tab General finden Sie alle Einstellungen zum Einbinden des GTM-Snippets auf allen Seiten Ihres Shopify-Shops — so, dass es gegen Ad-Blocker, ITP und Cookie-Laufzeit-Einschränkungen gewappnet ist.

• Use Shopify Markets

Aktivieren Sie dieses Kontrollkästchen, wenn Sie mehrere Shopify-Märkte betreiben. Mit dieser Funktion können Sie die GTM-Einbindung separat für jeden Shopify-Markt konfigurieren. Ist die Funktion deaktiviert, verwenden alle Märkte die Standardkonfiguration.

Nach der Aktivierung sehen Sie die Felder, die für jeden Markt konfiguriert werden müssen:

• Insert GTM: ist dieses Kästchen aktiviert, wird das GTM-Snippet jeder Website-Seite hinzugefügt.

• GTM container ID: die ID Ihres Web-GTM-Containers.

• Customer privacy API: ist diese Option aktiviert, hält die App das GTM-Laden zurück, bis der Besucher über das Shopify-Customer-Privacy-Banner Cookies akzeptiert hat. Diese Option wird standardmäßig nicht empfohlen.

• Custom domain, Stape container ID und Cookie Keeper: diese Felder sind mit dem serverseitigen Tracking verknüpft; konfigurieren Sie sie, wenn Sie die serverseitige Einrichtung verwenden oder planen. Im Folgenden erklären wir, wo Sie die entsprechenden Werte finden.

• GTM web container ID

Geben Sie hier Ihre Web-GTM-Container-ID ein.

• Custom domain

Es ist unbedingt erforderlich, Ihre eigene Subdomain zu verwenden, damit First-Party-Cookies korrekt funktionieren und das Tracking generell zuverlässig arbeitet. Falls Sie Ihrem sGTM-Container noch keine Subdomain hinzugefügt haben, folgen Sie der Anleitung zu benutzerdefinierten Domains.

• Custom Loader

Die Verwendung wird dringend empfohlen, um den Schutz vor Ad-Blockern zu erhöhen.

Aktivieren Sie das entsprechende Kontrollkästchen und geben Sie Ihre Stape-Container-Kennung an. Um sie zu finden, melden Sie sich in Ihrem Stape-Konto an, wählen Sie den sGTM-Container aus und suchen Sie die Container-Kennung im Bereich Settings.

• Cookie Keeper

Mit dieser Funktion können Sie die Auswirkungen der neuesten ITP-Einschränkungen minimieren. Stellen Sie sicher, dass Sie Cookie Keeper in Stape für Ihren Container aktiviert haben, bevor Sie es über die App aktivieren. Um Cookie Keeper zu konfigurieren, klicken Sie auf das ausklappbare Element und folgen Sie den Anweisungen:

• GTM snippet block

Hier können Sie das GTM-Snippet kopieren, um es auf Seiten außerhalb Ihres Shopify-Themes zu installieren (z. B. Seiten, die durch Drittanbieter-Apps wie Zipify erstellt wurden).

Auf dem Tab Data Layer finden Sie die zu aktivierenden und konfigurierenden Datenschicht-Ereignisse. Das zweite Feld steuert, ob Ereignisnamen das Suffix _stape erhalten, um Konflikte in GTM zu vermeiden. Ist diese Option deaktiviert, behalten die Ereignisse ihre ursprünglichen Namen.

Hier finden Sie eine vollständige Liste der Ereignisse und ihrer Payloads, die über die Stape-App hinzugefügt werden.

Datenschicht-Aktivierung:

• Aktivieren Sie das Kontrollkästchen Add ecommerce Data Layer events.
• Speichern Sie die Änderungen.
• Kopieren Sie den Code für das Custom-Pixel im Kasten unten auf dem Data-Layer-Tab und folgen Sie den Anweisungen, um ihn hinzuzufügen und zu aktivieren.

Stellen Sie im Bereich Customer privacy unter dem Berechtigungs-Aufklapper sicher, dass Not required ausgewählt ist. Das Code-Snippet erzeugt lediglich die Datenschicht; es setzt keine Cookies und übermittelt keine Daten an Dritte.

Auf dem Tab Data Layer gibt es außerdem die Option Log events to console (Dev) — ein Debugging-Tool für Entwickler und Shop-Administratoren. Wenn aktiviert, protokolliert es E-Commerce-Ereignisse in der Browser-Konsole, zeigt zur Überprüfung die Ereignis-Payloads an, die an den GTM-/Stape-Server-Container gesendet werden, und hilft beim Debugging von Datenschichten.

Diese Option ist nur für die Entwicklung gedacht und sollte in der Produktionsumgebung deaktiviert werden, um unnötige Konsolenausgaben zu vermeiden.

Webhook-Ereignisse werden auf dem Tab Webhook konfiguriert.

Auf diesem Tab werden die Webhook-Ereignisse konfiguriert.

Um einen Webhook zu aktivieren, aktivieren Sie das Kontrollkästchen, geben Sie die URL des Server-GTM-Containers und den /path an, an den die Webhooks gesendet werden sollen.

Sie können Webhooks abonnieren, wenn eine neue Bestellung aufgegeben wird oder wenn eine Rückerstattung für eine Bestellung erfolgt.

Hilfreiche Blog-Beiträge zur Verwendung und zum Debugging von Webhooks:

• Was sind Webhooks und ihre Verwendung bei der serverseitigen Tracking
• Eingehende Webhooks in der Google-Tag-Manager-Server-Vorschau debuggen
• Server-zu-Server-Tracking im Server Google Tag Manager

Er ermöglicht es Ihnen, die Customer-Match-Listen in Google Ads automatisch zu befüllen und zu aktualisieren.

Überspringen Sie die Konfiguration dieses Tabs, wenn Sie keine Google-Ads-Kampagnen schalten oder keine Customer-Match-Listen verwenden.

Der Server-Container hat keinen direkten Zugriff auf browserseitige Daten – wie beispielsweise die Datenschicht, Cookies oder den Seitenkontext –, daher müssen diese Daten explizit vom Web-Container gesendet werden. Hierfür stehen zwei Methoden zur Verfügung:

• Data Tag, das im Server-Container mit Data Client gekoppelt ist, um dessen Anfragen zu empfangen und zu analysieren, sendet Variablen der Datenschicht und andere Parameter plattformunabhängig;
• Google Analytics 4, das Daten über ein Google-Tag übermittelt, das mit der URL des Server-Containers konfiguriert ist. Beide Methoden werden im Folgenden behandelt.

Schritt 1. Installieren Sie die Data-Tag-Vorlage:

1. 1.
   Klicken Sie auf das Menü „Tags“.
2. 2.
   Klicken Sie auf „Neu“.
3. 3.
   Öffnen Sie den Abschnitt „Vorlagen“ Ihres Web-Google-Tag-Manager-Containers → fügen Sie das Data-Tag aus der Vorlagengalerie hinzu.
4. 4.
   Klicken Sie auf die Registerkarte „Tag-Konfiguration“.
5. 5.
   Klicken Sie auf „Weitere Tag-Typen in der Community-Vorlagengalerie entdecken“ → suchen Sie nach „Data-Tag“ → klicken Sie auf „Zum Arbeitsbereich hinzufügen“ → klicken Sie auf „Hinzufügen“.

Schritt 2. Als Nächstes konfigurieren wir das Data Tag für das Pageview-Ereignis:

1. 1.
   Unter „Ereignisname“ können Sie einen Standard-Ereignisnamen auswählen, einen benutzerdefinierten Ereignisnamen hinzufügen oder mithilfe der Variablen {{Event}} einen dynamischen Ereignisnamen hinzufügen.
2. 2.
   Geben Sie Ihre GTM-serverseitige URL ein (Sie finden Ihre GTM-serverseitige URL in Ihrem stape.io-Konto, indem Sie den sGTM-Container öffnen und den Abschnitt Domain überprüfen.)
3. 3.
   Wählen Sie aus, wie die Daten gesendet werden sollen:

   1. 3.1.
      Alle aus dem DataLayer senden – sendet alle Informationen, die Sie im Web-GTM-DataLayer haben, an die GTM-Ereignisdaten auf dem Server.
   2. 3.2.
      Allgemeine Daten senden – fügt der Anfrage die Werte page_location, page_path, page_hostname, page_referrer, page_title, page_encoding, screen_resolution und viewport_size hinzu.
   3. 3.3.
      Einwilligungsstatus hinzufügen – fügt der Anfrage das Objekt consent_state hinzu. Es enthält die folgenden Eigenschaften: ad_storage, analytics_storage, functionality_storage, personalization_storage, security_storage.
   4. 3.4.
      Allgemeine Cookies hinzufügen – Das Tag sendet allgemeine Cookies in „eventData“, um Einschränkungen einiger E-Commerce-Plattformen zu umgehen. Dies ist beispielsweise für Ereignisse erforderlich, die auf Shopify-Checkout-Seiten funktionieren.
4. 4.
   Unter Ereignisdaten können Sie beliebige manuelle Daten zur Anfrage hinzufügen. Sie können auch Transformationen (wie Hashing, Trimming usw.) anwenden oder Daten speichern.
5. 5.
   Unter Benutzerdaten können Sie Benutzerparameter senden und Transformationen anwenden oder Daten speichern.
6. 6.
   Unter Einstellungen und Erweiterte Einstellungen finden Sie genau das – erweiterte Konfigurationsoptionen. Sofern Sie nicht genau wissen, was Sie tun, sollten Sie diese Einstellungen besser nicht ändern.
7. 7.
   Geben Sie Ihrem Tag einen aussagekräftigen Namen und klicken Sie auf Speichern.

Schritt 3. Als Nächstes können Sie das Data-Tag für weitere Ereignisse konfigurieren. Das folgende Beispiel zeigt, wie Sie E-Commerce-Ereignisse konfigurieren, wenn der Data Layer verfügbar ist.

Dieses Tag löst jedes E-Commerce-Ereignis im Data Layer aus. In diesem Beispiel enden alle E-Commerce-Ereignisse mit _stape, daher verwenden wir einen regulären Ausdruck, der alle Ereignisse erfasst, die _stape enthalten.

Beispiel für die Variable, die Benutzerdaten aus dem Data Layer extrahiert.

Schritt 4. Als Nächstes laden Sie den Data Client von GitHub herunter:

1. 1.
   Folgen Sie diesem Link.
2. 2.
   Klicken Sie auf Code → ZIP herunterladen.

Schritt 5. Nun importieren Sie den Data Client:

1. 1.
   Öffnen Sie Ihren Server-Google Tag Manager-Container.
2. 2.
   Klicken Sie auf Vorlagen.
3. 3.
   Klicken Sie unter Clients auf Neu.
4. 4.
   Klicken Sie auf die drei Punkte in der oberen rechten Ecke.
5. 5.
   Klicken Sie auf Importieren und wählen Sie den Data Client aus, den Sie von GitHub heruntergeladen haben (möglicherweise müssen Sie das Archiv zuerst entpacken).
6. 6.
   Sobald der Import abgeschlossen ist, klicken Sie auf Speichern.

Schritt 6. Öffnen Sie die Registerkarte Clients und klicken Sie auf Neu → wählen Sie Data Client → klicken Sie auf Speichern. 

Schritt 7. Öffnen Sie die GTM-Vorschau-Bildschirme für Web und Server und testen Sie die Einrichtung. Sie sollten sehen, dass das Data-Tag im Web-GTM-Container ausgelöst wird und der Data Client die Data-Tag-Anfragen im sGTM auswertet. 

Schritt 1. Erstellen Sie eine Konfigurationsvariable für die URL des Server-Containers. Gehen Sie dazu wie folgt vor:

1. 1.
   Klicken Sie auf das Menü „Variablen“.
2. 2.
   Klicken Sie unter der Leiste „Benutzerdefinierte Variablen“ auf „Neu“.
3. 3.
   Klicken Sie auf die Leiste Variablenkonfiguration.
4. 4.
   Wählen Sie den Typ Google-Tag: Konfigurationseinstellungen aus.
5. 5.
   Klicken Sie auf Parameter hinzufügen.
6. 6.
   Geben Sie die folgenden Parameter ein:

   1. 6.1.
      Konfigurationsparameter: server_container_url.
   2. 6.2.
      Wert: die URL Ihres Tag Manager-Server-Containers.
7. 7.
   Geben Sie Ihrer Variablen einen aussagekräftigen Namen und klicken Sie auf Speichern.

Schritt 2. Erstellen Sie ein Google Analytics 4-Tag:

1. 1.
   Klicken Sie auf das Menü „Tags“.
2. 2.
   Klicken Sie auf Neu.
3. 3.
   Klicken Sie auf die Registerkarte Tag-Konfiguration.
4. 4.
   Wählen Sie Google Analytics → Google-Tag.
5. 5.
   Geben Sie unter Tag-ID die ID aus Ihrem GA4-Konto ein (um diese zu finden, gehen Sie zu Ihrem GA4 → klicken Sie auf Verwaltung → Datenströme → wählen Sie den Datenstrom aus → sehen Sie sich die Mess-ID an).
6. 6.
   Wählen Sie unter Konfigurationseinstellungen die zuvor erstellte Server-Container-Variable aus.
7. 7.
   Stellen Sie unter „Auslösung“ sicher, dass die Option „Initialisierung – Auslöser für alle Seiten“ ausgewählt ist.
8. 8.
   Geben Sie Ihrem Tag einen aussagekräftigen Namen und klicken Sie auf „Speichern“.
9. 9.
   Klicken Sie auf „Veröffentlichen“, damit der Container live geschaltet wird.

Schritt 3. Als Nächstes sehen wir uns an, wie Sie ein GA4-Ereignis erstellen, wobei wir das Ereignis „Alle Klicks“ als Beispiel verwenden:

1. 1.
   Klicken Sie auf das Menü „Tags“.
2. 2.
   Klicken Sie auf Neu.
3. 3.
   Klicken Sie auf die Registerkarte Tag-Konfiguration.
4. 4.
   Wählen Sie Google Analytics → Google Analytics: GA4-Ereignis.
5. 5.
   Geben Sie Ihre Messungs-ID ein (aus dem GA4-Menü Datenströme).
6. 6.
   Geben Sie Ihrem Ereignis einen aussagekräftigen Namen.
7. 7.
   Klicken Sie auf Auslösung → Alle Klicks.
8. 8.
   Geben Sie dem Tag einen aussagekräftigen Namen.
9. 9.
   Klicken Sie auf Speichern.

Als Nächstes müssen Sie die Übermittlung Ihrer Ereignisdaten an Ihre Marketing-/Analytics-Plattform konfigurieren. Die genauen Schritte hängen von der von Ihnen gewählten Plattform ab. Weitere Informationen finden Sie in unseren Anleitungen zu den gängigen Plattformen:

• So richten Sie die Meta Conversions API ein
• So richten Sie das Google Analytics 4 (GA4)-Tracking ein
• So richten Sie das Google Ads-Conversion-Tracking ein
• Andere Plattformen

Die meisten gängigen Marketing- und Analyse-Tools unterstützen bereits serverseitiges Tagging und verfügen über Tags für sGTM. Anleitungen zur Implementierung finden Sie auf unserer Website, z. B. für Facebook CAPI, TikTok Events API, Snapchat Conversions API, serverseitiges Google-Ads-Tracking usw.

Debugging des GTM-Downloads

Nach der Aktivierung oder Änderungen wird empfohlen zu prüfen, ob Ihr Container tatsächlich auf der Website geladen wird.

Gehen Sie dazu auf eine beliebige Seite Ihrer Website, öffnen Sie die Browser-Konsole und filtern Sie im Netzwerk-Tab nach Ihrer Subdomain- bzw. Tagging-Server-URL. Sie sollten eine Anfrage wie im folgenden Screenshot mit dem Antwort-Status 200 sehen.

Debugging von Datenschicht-Checkout-Ereignissen

Bei Ereignissen, die vor der Checkout-Seite auftreten, funktioniert alles wie auf jeder anderen Plattform: Sie können die Vorschau Ihres Web-GTM-Containers starten und alle Ereignisse einsehen.

Checkout-Ereignisse werden in der GTM-Vorschau nicht angezeigt, da die isolierte Umgebung dieser Seiten unsichere DOM-Manipulationen und Script-Injektionen — einschließlich des GTM-Snippets — blockiert.

Sie können das Snippet jedoch manuell auf der Checkout-Seite einfügen, indem Sie die Chrome-Erweiterung Stape GTM Helper verwenden:

1. 1.
   Aktivieren Sie nach dem Start des Vorschau-Modus in GTM den Schalter Shopify Sandbox dataLayer auf dem Tab Settings der Erweiterung.
2. 2.
   Klicken Sie auf dem Tab Inject GTM auf Enable injection, fügen Sie Ihren Domainnamen und Ihre GTM-ID hinzu. Speichern Sie die Änderungen.

Die Ereignisse auf der Checkout-Seite werden nun in der GTM-Vorschau angezeigt.

Die Möglichkeiten des serverseitigen Taggings entwickeln sich schnell weiter und bieten Nutzern großartige Werkzeuge zur Verbesserung der Genauigkeit beim Konversionstracking und in der Analyse. Stape möchte die Nutzung von sGTM für unsere Kunden vereinfachen und bietet deshalb die Conversion Tracking App für Shopify an.

Die Stape Conversion Tracking App für Shopify ist ein großartiges Tool mit zahlreichen Funktionen und Vorteilen. Sie können das Tracking auf Ihrer Website ganz einfach einrichten, indem Sie ein Google Tag Manager-Skript hinzufügen und Ihre benutzerdefinierte Domain und den benutzerdefinierten Loader konfigurieren. Außerdem können Sie Benutzerdaten an den Data Layer senden und Webhooks einrichten.

All diese Funktionen tragen dazu bei, die Daten in der Analyse präziser zu machen, indem sie die Lebensdauer der Cookies verlängern und das Browser-Tracking gegen Tracking-Verhinderungstechnologien resistent machen. Diese Werkzeuge sind entscheidend für eine zuverlässige Datenübertragung über den Server-Endpunkt an Werbe- und Marketingplattformen.

Wenn Sie nach einer schnellen und einfachen Lösung für die Einrichtung von Shopify Server-seitigem Tagging suchen, ist Stape die richtige Wahl. Nutzen Sie diese hervorragende Lösung noch heute und profitieren Sie von den Vorteilen genauerer Tracking-Einblicke mit der Stape Conversion Tracking App für Shopify. Testen Sie es jetzt selbst - wir wissen, Sie werden nicht enttäuscht sein!