Einleitung
Mit Shopify Customer Events ändert sich grundlegend, wie Shop-Betreiber Kundenverhalten messen und verstehen können. In diesem Beitrag geht es um die neue Art des Trackings: warum der Checkout 2.0 von Shopify Customer Events vorschreibt, was dieser Ansatz bringt, wie Shopify Pixels funktioniert, Beispiele für Integrationen und welche Probleme und Lösungen es mit dem Google Tag Manager (GTM) in dieser neuen Umgebung gibt.
Der Wechsel zu Customer Events mit Shopify Checkout 2.0
Mit Shopify Checkout 2.0 hat Shopify das Tracking grundlegend umgebaut, und Customer Events sind zu einem zentralen Bestandteil geworden. Anders als frühere Versionen ist Checkout 2.0 ein ausgefeilterer, anpassbarer Checkout, der sich nur mit Customer Events genau messen lässt.
Warum die Änderung?
Shopify setzt auf Customer Events, weil detailliertere und zuverlässigere Daten im Checkout gebraucht werden, und die sind entscheidend, um Nutzerverhalten zu verstehen und die Conversion zu verbessern.
Was das für Shop-Betreiber bedeutet
Für Händler heißt das: Klassische Tracking-Methoden, etwa solche, die allein auf GTM setzen, liefern nicht mehr das vollständige Bild, das für die Optimierung des Sales-Funnels nötig ist.
Warum Shopify Customer Events nutzen?
Aufbauend auf den Vorteilen oben: Darum sind Customer Events für moderne Shopify-Shops unverzichtbar:
Direkt in Shopify integriert
Weil Customer Events Teil der Plattform selbst sind, sind die Daten konsistent und zuverlässig, mit weniger Risiko für Abweichungen, wie sie bei externen Tools entstehen können.
Genaue, detaillierte Daten
Customer Events erfassen detaillierte, konkrete Interaktionen auf Ihrer gesamten Website. So verstehen Sie das Nutzerverhalten besser, vor allem in der entscheidenden Checkout-Phase.
Datenschutzkonformität
Da Datenschutzregeln strenger werden, helfen die integrierten Compliance-Funktionen von Customer Events, die Komplexität externer Tracking-Tools zu vermeiden.
Wie Shopify Pixels und Customer Events eingebunden werden
Shopify Pixels, die Customer Events erfassen, werden über iFrames direkt in Ihren Shop geladen. So bleiben Website-Inhalte und Tracking-Skripte voneinander getrennt, was einige Vorteile hat:
Sicherheit
Durch iFrames läuft der Pixel-Code in einer abgeschirmten Umgebung. Das verringert das Risiko von Sicherheitsproblemen, die bei direkt eingebundenen Skripten entstehen können.
Einheitlich auf allen Geräten
Mit iFrames feuern Pixel auf verschiedenen Geräten und Browsern korrekt, mit einheitlichen Tracking-Ergebnissen.
Mögliche Nachteile
Diese Methode kann aber auch Probleme verursachen. Manche externen Tools können nicht auf Inhalte im iFrame zugreifen, was zu Problemen führt, etwa dem unten beschriebenen mit dem Google Tag Manager.
Das Problem mit dem Google Tag Manager: Grenzen des Vorschaumodus
Eine der aktuellen Einschränkungen für Shop-Betreiber ist der Vorschaumodus des Google Tag Managers. Er kann Shopify Customer Events nicht vollständig messen, weil diese Events im iFrame erfasst werden.
Warum die GTM-Vorschau nicht reicht
Der Vorschaumodus von GTM kann nicht mit Inhalten in iFrames arbeiten und Shopify Customer Events daher nicht korrekt anzeigen oder testen. Das erschwert Debugging und die Prüfung der Einrichtung für Shops, die beim Tracking auf GTM setzen.
Umwege und Lösungen
Um zu prüfen, ob Customer Events korrekt installiert sind, nutzen Sie das eigene Event-Reporting von Shopify oder externe Analyse-Tools, die mit Tracking in iFrames voll kompatibel sind. Außerdem bietet Shopify integrierte Werkzeuge, um Status und Leistung Ihrer Pixel zu prüfen, damit Ihr Tracking wie vorgesehen funktioniert.
Customer Events messen: die korrekte Installation prüfen
Wegen der Grenzen von GTM brauchen Sie andere Wege, um zu prüfen, ob Customer Events korrekt installiert sind und funktionieren:
Die integrierten Werkzeuge von Shopify
Im Admin-Dashboard von Shopify sehen Sie eine Übersicht der Customer Events und der Pixel-Aktivität. Wer diese Berichte regelmäßig prüft, weiß, ob alles wie erwartet läuft. Bei der Einrichtung können Sie außerdem im Testmodus von Shopify Pixels die Website ansehen und alle ausgelösten Events sehen (wie früher im Vorschaumodus von GTM).

Externe Analyse-Tools
Tools wie Google Analytics können, richtig eingerichtet, Daten aus Customer Events weiterhin erfassen, auch wenn sie sich in GTM nicht vollständig in der Vorschau prüfen lassen. Neben dem GTM-Pixel lässt sich ein eigener GA4-Pixel einrichten. Damit testen Sie Datalayer und Events in der Echtzeit-Übersicht von Google Analytics.
Ausführlicher Leitfaden zu Shopify Customer Events
Um das Beste aus Customer Events zu holen, müssen Sie wissen, was sich damit messen lässt. Diese Event-Arten gibt es:
Seitenaufrufe
Messen Sie, wann Kunden bestimmte Produktseiten, Kategorien oder die Startseite ansehen. So sehen Sie, welche Produkte oder Inhalte die meiste Aufmerksamkeit bekommen.
In den Warenkorb legen
Sehen Sie, wann Kunden Artikel in den Warenkorb legen. Das zeigt das Interesse an Produkten und wie gut Produktbeschreibungen und Bilder wirken.
Aus dem Warenkorb entfernen
Zu verstehen, wann und warum Kunden Artikel entfernen, hilft, Probleme mit Preis, Versandkosten oder Produktbeschreibungen zu finden.
Checkout gestartet
Messen Sie, wann Kunden den Checkout starten, und sehen Sie, wie viele vor dem Kaufabschluss abspringen.
Kauf
Dieses entscheidende Event erfasst den Abschluss eines Kaufs. Es hängt am direktesten mit dem Umsatz zusammen und ermöglicht ein detailliertes Verkaufsreporting.
Suchanfragen
Messen Sie, wann Kunden die Suche auf Ihrer Website nutzen. So erkennen Sie die gefragtesten Produkte und können Ihre Suchfunktion verbessern.
Beispielcode für einen GTM-Pixel
Dieses Beispiel zeigt einen eigenen Google-Tag-Manager-Pixel (GTM) für die Customer Events API von Shopify. Der Pixel erfasst bestimmte Events in Ihrem Shopify-Shop und sendet die Daten an den Google Tag Manager. Sie können den Code anpassen, um die Events zu messen, die für die Analysen Ihres Shops wichtig sind.
Schritt für Schritt einrichten
1. GTM-ID ersetzen: Ersetzen Sie ‚GTM-XXXXXXX‘ im Skript durch Ihre eigene Google-Tag-Manager-ID.
2. Pixel-Code einfügen: Fügen Sie diesen Code im Bereich Customer Events Ihres Shopify-Admins ein. Der Pixel hört dann auf bestimmte Events in Ihrem Shop und schreibt die Daten in den dataLayer.
Beispiel für den Pixel-Code
<em>// Define dataLayer and the gtag function.</em>
window.dataLayer <strong>=</strong> window.dataLayer <strong>||</strong> [];
<strong>function</strong> <strong>gtag</strong>(){dataLayer.<strong>push</strong>(arguments);}
<em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
<em>//Google Consent Mode v2</em>
<strong>gtag</strong>('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: checkout_shipping_info_submitted,
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
<em>// Define dataLayer and the gtag function.</em>
window.dataLayer <strong>=</strong> window.dataLayer <strong>||</strong> [];
<strong>function</strong> <strong>gtag</strong>(){dataLayer.<strong>push</strong>(arguments);}
<em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
<em>//Google Consent Mode v2</em>
<strong>gtag</strong>('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: checkout_shipping_info_submitted,
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
<em>// Define dataLayer and the gtag function.</em>
window.dataLayer <strong>=</strong> window.dataLayer <strong>||</strong> [];
<strong>function</strong> <strong>gtag</strong>(){dataLayer.<strong>push</strong>(arguments);}
<em>
(<strong>function</strong>(w,d,s,l,i){w[l]<strong>=</strong>w[l]<strong>||</strong>[];w[l].<strong>push</strong>({'gtm.start':
<strong>new</strong> <strong>Date</strong>().<strong>getTime</strong>(),event:'gtm.js'});<strong>var</strong> f<strong>=</strong>d.<strong>getElementsByTagName</strong>(s)[0],
j<strong>=</strong>d.<strong>createElement</strong>(s),dl<strong>=</strong>l<strong>!=</strong>'dataLayer'?'&l='<strong>+</strong>l:'';j.<strong>async=true</strong>;j.src<strong>=</strong>
'https://www.googletagmanager.com/gtm.js?id='<strong>+</strong>i<strong>+</strong>dl;f.parentNode.<strong>insertBefore</strong>(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
<em>//Google Consent Mode v2</em>
<strong>gtag</strong>('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
<em>//subscribe to events</em>
analytics.<strong>subscribe</strong>("checkout_completed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_completed",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("payment_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "payment_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_shipping_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: checkout_shipping_info_submitted,
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_address_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_address_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_contact_info_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_contact_info_submitted",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("checkout_started", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "checkout_started",
timestamp: event.timestamp,
id: event.id,
token: event.data?.checkout?.token,
url: event.context.document.location.href,
client_id: event.clientId,
email: event.data?.checkout?.email,
phone: event.data?.checkout?.phone,
first_name: event.data?.checkout?.shippingAddress?.firstName,
last_name: event.data?.checkout?.shippingAddress?.lastName,
address1: event.data?.checkout?.shippingAddress?.address1,
address2: event.data?.checkout?.shippingAddress?.address2,
city: event.data?.checkout?.shippingAddress?.city,
country: event.data?.checkout?.shippingAddress?.country,
countryCode: event.data?.checkout?.shippingAddress?.countryCode,
province: event.data?.checkout?.shippingAddress?.province,
provinceCode: event.data?.checkout?.shippingAddress?.provinceCode,
zip: event.data?.checkout?.shippingAddress?.zip,
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
subtotal: event.data?.checkout?.subtotalPrice?.amount,
shipping: event.data?.checkout?.shippingLine?.price?.amount,
value: event.data?.checkout?.totalPrice?.amount,
tax: event.data?.checkout?.totalTax?.amount,
});
});
analytics.<strong>subscribe</strong>("product_added_to_cart", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_added_to_cart",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
price: event.data?.cartLine?.merchandise?.price?.amount,
currency: event.data?.cartLine?.merchandise?.id,
product_title: event.data?.cartLine?.merchandise?.product?.title,
quantity: event.data?.cartLine?.quantity,
total_cost: event.data?.cartLine?.cost?.totalAmount?.amount,
});
});
analytics.<strong>subscribe</strong>("cart_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "cart_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
total_cost: event.data?.cart?.cost?.totalAmount?.amount,
quantity: event.data?.cart?.totalQuantity,
cart_id: event.data?.cart?.id,
});
});
analytics.<strong>subscribe</strong>("page_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "page_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
page_title: event.context.document.title,
});
});
analytics.<strong>subscribe</strong>("product_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "product_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
product_id: event.data?.productVariant?.product?.id,
product_title: event.data?.productVariant?.title,
product_sku: event.data?.productVariant?.sku,
});
});
analytics.<strong>subscribe</strong>("search_submitted", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
event: "search_submitted",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
query: event.data?.searchResult?.query,
});
});
analytics.<strong>subscribe</strong>("collection_viewed", (event) <strong>=></strong> {
window.dataLayer.<strong>push</strong>({
Mehr Informationen finden Sie in der offiziellen Dokumentation von Shopify, hier
1. GTM-ID ersetzen: Ersetzen Sie ‚GTM-XXXXXXX‘ im Skript durch Ihre eigene Google-Tag-Manager-ID.
2. Pixel-Code einfügen: Fügen Sie diesen Code im Bereich Customer Events Ihres Shopify-Admins ein. Der Pixel hört dann auf bestimmte Events in Ihrem Shop und schreibt die Daten in den dataLayer.
Prüfen, ob der Pixel richtig funktioniert
Prüfen Sie nach dem Einfügen des Codes, ob der Pixel korrekt auslöst, etwa mit der Echtzeit-Übersicht von Google Analytics oder dem Debug-Modus von GTM, auch wenn dieser bei iFrames Grenzen hat. Sie können die Pixel-Aktivität auch direkt im Shopify-Admin unter „Pixels“ prüfen oder die Netzwerkanfragen mit den Entwicklertools von Chrome untersuchen.
Mit diesem Leitfaden richten Sie den GTM-Pixel-Code in Ihrem Shopify-Shop richtig ein. Ersetzen Sie die Platzhalter durch Ihre eigenen Tracking-IDs und weitere Kennungen, die zu Ihrer Einrichtung gehören.
Fazit: die Zukunft des E-Commerce-Trackings
Der Wechsel zu Shopify Customer Events ist ein großer Schritt dafür, wie Shop-Betreiber ihr Geschäft messen und verbessern können. Es gibt Herausforderungen, etwa das Problem mit der GTM-Vorschau, doch die Vorteile überwiegen deutlich. Wer voll auf Customer Events setzt, gewinnt tiefere Einblicke, genauere Daten und persönlichere Kundenerlebnisse und bleibt zugleich im Rahmen der sich wandelnden Datenschutzgesetze.
Wer vorne bleiben will, sollte jetzt auf diese neue Art des Trackings umsteigen und die Werkzeuge von Shopify voll nutzen.
Soll das bei Ihrem Team gleich beim ersten Mal richtig eingerichtet sein, setzt unsere E-Commerce-Agentur Customer Events und serverseitiges Tracking bei jedem Shopify-Build standardmäßig auf.
Diese Gliederung hilft Ihnen, Ihren Blogbeitrag gut zu strukturieren, damit er informativ und nützlich für Ihr Publikum ist. Ergänzen Sie Beispiele, Screenshots und eventuell Videos, um den Leitfaden zu stärken und für Ihre Leser ansprechender zu machen.