Benutzerdefiniertes Pixel für Google Tag Manager erstellen
Du kannst Google Tag Manager (GTM) als benutzerdefiniertes Pixel verwenden, um deine Pixel von Drittanbietern zu verwalten.
Wenn du bereit bist, dein benutzerdefiniertes GTM-Pixel zu testen, verwende den Shopify Pixel Helper, um sicherzustellen, dass alle Ereignisse, die du verfolgen möchtest, fehlerfrei zur Sandbox hinzugefügt werden.
Du kannst auch die Seitenerweiterung Google Tag Assistant verwenden, um zu testen, welche Google-Tags auf der Seite geladen werden. Die Funktion Fehlerbehebung für Tags des Google Tag Assistant ist jedoch nicht mit benutzerdefinierten Pixeln kompatibel und erkennt weder Google-Tags in einem benutzerdefinierten Pixel noch andere von GTM geladene Pixel.
Auf dieser Seite
Vorbereitungen für die Erstellung eines benutzerdefinierten Pixels
Bevor du mit Google Tag Manager ein benutzerdefiniertes Pixel erstellst, sieh dir die folgenden Informationen an, um sicherzustellen, dass du verstehst, wie du dein Pixel konfigurieren musst:
- Erstelle oder öffne ein Google Tag Manager-Konto und rufe die GTM-Container-ID ab.
- Aus Sicherheitsgründen haben in unserer Sandbox geladene Tag-Manager die gleichen Einschränkungen wie alle anderen Pixel. Erfahre mehr über die Einschränkungen der Pixel-Sandbox.
Benutzerdefiniertes Pixel für Google Tag Manager erstellen
Du kannst ein benutzerdefiniertes Pixel für Google Tag Manager erstellen, um deine Pixel von Drittanbietern zu verwalten.
Schritte:
- Öffne dein Google Tag Manager-Konto und wähle das Konto aus, mit dem du ein benutzerdefiniertes Pixel einrichten möchtest.
- Klicke auf Admin und dann auf Google Tag Manager installieren, um den Installationscode zu öffnen.
- Kopiere den Codeblock, der in den
head-Abschnitt einer Seite gehört. - Entferne die HTML-Tags aus dem Codeblock. Zum Beispiel
<script></script>. - Füge den restlichen Code in ein neues benutzerdefiniertes Shopify-Pixel ein.
- Kundenereignisse abonnieren und an den dataLayer von GTM pushen.
- Wie der Code angezeigt werden soll, siehst du im Beispiel für ein benutzerdefiniertes Google Tag Manager-Pixel.
- Google Tag Manager so konfigurieren, dass Ereignisse von deinem benutzerdefinierten Pixel empfangen werden.
- Optional: Wenn du vorhandene
dataLayer.push(event)-Aufrufe in deinercheckout.liquid-Datei hast, dann ersetze diese durch analytics.publish().
Kundenereignisse abonnieren und an den Data-Layer von GTM pushen
Du kannst Kundenereignisse über den GTM-dataLayer in deinem benutzerdefinierten Pixelcode abonnieren.
Standardmäßig gibt es eine Reihe von Standardereignissen, die du abonnieren kannst. Wenn du jedoch Kundenereignisse verfolgen möchtest, die nicht Teil des Angebots an Standardereignissen sind, kannst du deine eigenen benutzerdefinierten Ereignisse aus Liquid-Vorlagendateien veröffentlichen.
Unten siehst du ein Beispiel für das Abonnieren des Standardereignisses „product_viewed“, das anzeigt, wann sich jemand ein Produkt ansieht. Wenn das Ereignis ausgelöst wird, wird es an den dataLayer gepusht.
analytics.subscribe("product_viewed", (event) => {
window.dataLayer.push({
event: "product_viewed",
product_title: event.data?.productVariant?.title,
});
});In diesem Beispiel wird der Produkttitel in der Ereignis-Payload übergeben. Du kannst eine Google Tag Manager-Variable verwenden, um den Produkttitel aus der Ereignis-Payload in einem Tag deiner Wahl zu erfassen.
Beispiel für ein benutzerdefiniertes Google Tag Manager-Pixel
Das nachstehende Beispiel ist eine vereinfachte Version eines benutzerdefinierten Google Tag Manager-Pixels, das zeigt, wie Daten an Google Tag Manager gesendet werden. Um weitere Ereignisse an deinen dataLayer zu pushen, kannst du weitere Standard- und benutzerdefinierte Ereignisse abonnieren.
// Define dataLayer and the gtag function.
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
//Initialize GTM tag
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer', 'GTM-XXXXXXX');
//Google Consent Mode v2
gtag('consent', 'update', {
'ad_storage': 'granted',
'analytics_storage': 'granted',
'ad_user_data': 'granted',
'ad_personalization': 'granted',
});
//subscribe to events
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
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.subscribe("payment_info_submitted", (event) => {
window.dataLayer.push({
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.subscribe("checkout_shipping_info_submitted", (event) => {
window.dataLayer.push({
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.subscribe("checkout_address_info_submitted", (event) => {
window.dataLayer.push({
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.subscribe("checkout_contact_info_submitted", (event) => {
window.dataLayer.push({
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.subscribe("checkout_started", (event) => {
window.dataLayer.push({
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.subscribe("product_added_to_cart", (event) => {
window.dataLayer.push({
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.subscribe("cart_viewed", (event) => {
window.dataLayer.push({
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.subscribe("page_viewed", (event) => {
window.dataLayer.push({
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.subscribe("product_viewed", (event) => {
window.dataLayer.push({
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.subscribe("search_submitted", (event) => {
window.dataLayer.push({
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.subscribe("collection_viewed", (event) => {
window.dataLayer.push({
event: "collection_viewed",
timestamp: event.timestamp,
id: event.id,
client_id: event.clientId,
url: event.context.document.location.href,
collection_id: event.data?.collection?.id,
collection_title: event.data?.collection?.title,
});
});Google Tag Manager so konfigurieren, dass Ereignisse aus deinem benutzerdefinierten Pixel empfangen werden
Nachdem du dein benutzerdefiniertes Pixel erstellt hast, musst du Google Tag Manager so konfigurieren, dass Ereignisse von deinem benutzerdefinierten Pixel empfangen werden. Dazu benötigst du in Google Tag Manager ein Tag, einen Trigger und dataLayer-Variablen.
Einige Beispiele für ausgewählte Standard-Kundenereignisse und ihre Entsprechungen in Google Tag Manager sind in der folgenden Tabelle aufgeführt:
| Shopify-Ereignis | Trigger | GTM-Ereignis |
|---|---|---|
| payment_info_submitted | Zahlungsinformationen senden | add_payment_info |
| checkout_address_info_submitted | Versandinformationen senden | add_shipping_info |
| product_added_to_cart | Artikel zum Warenkorb hinzufügen | add_to_cart |
| checkout_started | Checkout starten | begin_checkout |
| checkout_completed | Checkout abschließen | purchase |
| product_removed_from_cart | Artikel aus dem Warenkorb entfernen | remove_from_cart |
| cart_viewed | Warenkorb ansehen | view_cart |
| product_viewed | Produktdetailseite ansehen | view_item |
| collection_viewed | Liste von Artikeln ansehen | view_item_list |
Die Ereignisparameter des GTM-Tags müssen den erwarteten Namenskonventionen entsprechen, damit die dataLayer-Ereignisse deines benutzerdefinierten Pixels verarbeitet werden können.
Einige Beispiele für ausgewählte dataLayer-Ereigniseigenschaften von benutzerdefinierten Pixeln und ihre entsprechenden Ereignisparameter in Google Analytics 4 (GA4) lauten wie folgt:
dataLayer-Ereignisse von benutzerdefinierten Pixeln | GA4-Ereignisparameter |
|---|---|
| event.data?.checkout?.currencyCode | currency |
| event.data?.checkout?.totalPrice?.amount | value |
| event.data?.checkout?.order?.id | transaction_id |
| event.data?.checkout?.discountAllocations | coupon |
| event.data?.checkout?.shippingLine?.price?.amount | shipping |
| event.data?.checkout?.totalTax | tax |
| event.data?.checkout?.lineItems | items |
Hier ist ein Beispiel mit dem folgenden checkout_completed-Ereignis:
analytics.subscribe("checkout_completed", (event) => {
window.dataLayer.push({
event: "checkout_completed",
orderId: event.data?.checkout?.order?.id,
currency: event.data?.checkout?.currencyCode,
price: event.data.checkout.totalPrice.amount,
shippingLine: event.data.checkout.shippingLine.price.amount,
totalTax: event.data.checkout.totalTax,
});
});Der Trigger für Google Tag Manager ist ein benutzerdefinierter Ereignistyp mit dem Ereignisnamen checkout_completed. Das Feld Event name im Trigger muss mit dem event-Schlüssel in deinem benutzerdefinierten Pixel übereinstimmen.
orderId und currency sind die Variablen, die du in Google Tag Manager verwendest, um die Daten aus dem Ereignis zu erfassen. Sie können einer dataLayer-Variable in Google Tag Manager zugeordnet werden. Jede Ereignisvariable erfordert eine eigene dataLayer-Variable. Lege fest, dass der Trigger bei allen benutzerdefinierten Ereignissen ausgelöst wird.
Erstelle einen Tag, der den soeben erstellten Trigger verwendet. Füge unter den Ereignisparametern die Variablen hinzu, die du erfassen möchtest. Im obigen Beispiel würden orderId, currency, price, shippingLine und totalTax als dataLayer-Variablen eingerichtet. Jedes Mal, wenn der Tag ausgelöst wird, erfasst er diese dataLayer-Variablen mit dem Ereignis.
Beachte, dass in Google Tag Manager mindestens ein Tag und ein Trigger eingerichtet sein müssen, damit eine Datenübertragung stattfindet.
Alte dataLayer.push(event)-Aufrufe durch analytics.publish() ersetzen
Wenn du Google Tag Manager bereits eingerichtet hast, musst du deine dataLayer.push-Aufrufe durch Shopify.analytics.publish()-Aufrufe ersetzen. Du findest deine dataLayer.push-Aufrufe in deinen theme.liquid-Dateien im Abschnitt Layout deines Theme-Editors.
Du musst auch die dataLayer.push-Aufrufe in der checkout.liquid ersetzen. Da checkout.liquid jedoch nicht mit Shopify Extensions kompatibel ist, musst du eine UI-Erweiterung verwenden, um Daten an Webpixel zu pushen.
Unten findest du ein vereinfachtes Beispiel für ein benutzerdefiniertes Ereignis zur E-Mail-Registrierung, das mit dataLayer in theme.liquid-Dateien erfasst wird:
<script>
dataLayer.push({ event: 'email_signup', email: customer.email });
</script>Das entsprechende Shopify-Äquivalent sieht wie folgt aus und überträgt die Daten an dein benutzerdefiniertes Pixel:
<script>
Shopify.analytics.publish('email_signup', {email: customer.email });
</script>Füge dann in den Code deines benutzerdefinierten Pixels etwa Folgendes ein:
analytics.subscribe("email_signup", (event) => {
window.dataLayer.push({
'event': 'email_signup',
'email': event.customData.email,
});
});Altes dataLayer.push(data) ersetzen
Google Tag Manager bietet eine Funktion, mit der du bei jedem Ereignis ein zustandsbehaftetes dataLayer-Objekt pushen kannst. Obwohl die Pixel-Sandbox von Shopify keine entsprechende Funktion enthält, kannst du dasselbe Ergebnis erzielen, indem du dein eigenes Datenobjekt erstellst und es an benutzerdefinierte Ereignisse übergibst.
Definiere zum Beispiel ein „customData“-Objekt, bevor deine benutzerdefinierten Ereignisse veröffentlicht werden:
<script>
const customData = {email: customer.email}
</script>Gib dann, wann immer du deine benutzerdefinierten Daten einbeziehen möchtest, diese an deine publish-Methode weiter:
<script>
Shopify.analytics.publish('email_signup', customData);
</script>Tipps für die Einrichtung von Google Analytics 4
Die folgenden Tipps gelten für die Einrichtung von Google Analytics 4 (GA4) bei der Verwendung von Google Tag Manager als benutzerdefiniertes Pixel.
Sauberere Seiten-URLs
Wenn GA4 in einer Sandbox ausgeführt wird, stellst du möglicherweise fest, dass die Seiten-URLs Informationen über die Sandbox enthalten, in der es ausgeführt wird. Wenn du die Sandbox-Informationen aus diesen URLs entfernen möchtest, kannst du die automatische Seitenverfolgung von GA4 deaktivieren und stattdessen deine eigene implementieren, indem du das Standardereignis page_viewed verwendest.
analytics.subscribe('page_viewed', (event) => {
window.dataLayer.push({
'event': 'page_viewed',
'page_location': event.context.window.location.href,
'page_title': event.context.document.title,
});
});Nachdem du dein eigenes Ereignis in dataLayer veröffentlicht hast, kannst du einen GA4-page_view-Tag erstellen, der beim page_viewed-Ereignis ausgelöst wird. Am häufigsten kannst du den Tag-Typ Google Analytics: GA4-Ereignis verwenden und den Ereignisnamen auf page_view festlegen. Nachdem du den Tag-Typ und den Ereignisnamen festgelegt hast, solltest du einen Parameter für page_location hinzufügen und den Wert auf denselben Wert einstellen, den du von deinem benutzerdefinierten Pixel in deinen dataLayer übergeben hast.
Erweiterte Messung
Beim Laden von GA4 in der Pixel-Sandbox von Shopify müssen einige Ereignisse, die normalerweise automatisch abgeleitet werden, manuell eingerichtet werden. Beispielsweise können Klicks auf ausgehende Links als Teil der GA4-Einstellung „Erweiterte Messung“ aus Sicherheitsgründen nicht automatisch ausgelöst werden, wenn benutzerdefinierte Pixel verwendet werden. Es ist jedoch möglich, die Ereignisse für die erweiterte Messung von GA4 selbst als benutzerdefinierte Ereignisse zu implementieren.
Der nachfolgende Code enthält ein vereinfachtes Beispiel für die Erfassung von Klicks auf ausgehende Links:
<script>
function detectOutboundLink() {
// add your logic for determining if a link click is outbound
// if the link click is outbound then publish it
if (isOutboundLink) {
Shopify.analytics.publish('outbound_link', { link_url: link_url });
}
}
</script>Erstelle schließlich in GTM einen GA4-Tag, der den Link-Klick an GA4 sendet, indem du sicherstellst, dass der Ereignisname click lautet, damit er mit der erweiterten Ereignisbenennung von GA4 übereinstimmt.
Du kannst alle Kennzahlen der erweiterten Messung von Google auf dieselbe Weise erfassen.
Dein benutzerdefiniertes Pixel testen und debuggen
Wenn du bereit bist, dein benutzerdefiniertes GTM-Pixel zu testen, verwende den Shopify Pixel Helper, um sicherzustellen, dass alle Ereignisse, die du verfolgen möchtest, fehlerfrei zur Sandbox hinzugefügt werden.
Du kannst auch die Seitenerweiterung Google Tag Assistant verwenden, um zu testen, welche Google-Tags auf der Seite geladen werden. Die Funktion Fehlerbehebung für Tags des Google Tag Assistant ist jedoch nicht mit benutzerdefinierten Pixeln kompatibel und erkennt weder Google-Tags in einem benutzerdefinierten Pixel noch andere von GTM geladene Pixel.