Google Ads Conversion Tracking in Shopify

Deshalb benötigt man Conversion-Tracking für Google Ads

Conversion-Tracking ermöglicht, das Nutzerverhalten auf der Website genauer zu analysieren. Man kann den Erfolg einer Marketingkampagne präzise nachvollziehen und Optimierungen vornehmen. Das ist unerlässlich, um die Zielgruppe besser zu verstehen und noch um sie gezielter ansprechen und überzeugen zu können.

Ausführlichere Informationen dazu, wie man Conversions in Google Ads anlegt, findet man im Artikel „Google Ads Conversion-Tracking einrichten & verstehen„.

Hier geht es spezifisch um die technische Implementierung für Shopify-Shops.

Übersicht und Vergleich der Möglichkeiten, Google Ads Conversion-Tracking aufzusetzen

Es gibt verschiedene Möglichkeiten, Conversion-Tracking in Shopify aufzusetzen:

• mit den neuen Kundenereignissen (auf Englisch “Customer Events”), welche Conversions direkt an Google Ads senden
• mithilfe des Google Tag Manager, den man mithilfe der neuen Kundenereignisse integriert
• mit dem Vertriebskanal “Google und YouTube”
• mit “zusätzlichen Skripten”, die man unter Einstellungen hinterlegt (JavaScript oder HTML) und JavaScript-Code direkt im Theme

Einen allgemeinen Vergleich und Diskussion der Kundenereignisse in Shopify enthält unser Artikel „Conversion-Tracking in Shopify„.

Kundenereignisse direkt an Google Ads

Kundenereignisse via Google Tag Manager

Vertriebskanal “Google und YouTube”

“zusätzliche Skripte”

Vertriebskanal “Google & YouTube” aufsetzen

Für alle großen Anbieter gibt es Apps oder einen Vertriebskanal, der einem das Tracking sehr erleichtern. So auch für Google Ads. Diese sind sehr einfach einzurichten. Man verbindet seinen Account beim jeweiligen Anbieter. Fertig.

Die Apps haben aber auch große Nachteile:

• Es gibt nur sehr wenige Einstellungsmöglichkeiten. Alles, was über die Standardeinstellungen hinaus geht, funktioniert nicht.
• Die Apps sind alt und werden nur sehr selten aktualisiert. Der Google-Vertriebskanal verfügt zum Beispiel nicht mal über Erweiterte Conversions geschweige denn Cart Data oder Informationen, ob der Käufer ein neuer oder wiederkehrender Kunde ist

Vertriebskanal konfigurieren und Conversions anlegen.

Im Suchfeld oben nach “Google” suchen und dann “Google und YouTube” auswählen:

Nach der Installation muss man das Google-Konto verknüpfen, das Zugriff auf Google Ads hat.

Dann die “Google Ads-Conversion-Analyse” starten:

Und in nächsten Schritt das passende Konto im Dropdown auswählen, auf “Verknüpfen” drücken, dann auf “Einrichtung abschließen”.

Jetzt wurden diese drei Conversions in Google Ads angelegt:

Kundenereignisse für Conversions direkt an Google Ads anlegen

Neben der App (mit allen ihren Nachteilen, siehe oben) kann man das Google Ads Conversion-Tracking auf zwei verschiedene Arten aufsetzen:

1. Die Conversion direkt per gtag an Google Ads senden
2. Einen dataLayer push schicken und dann die Conversion aus dem Google Tag Manager schicken

Den zweiten Ansatz beschreiben wir weiter unten.

Neues Pixel in Shopify anlegen

1) Unter Einstellungen > Kundenereignisse wählt man Benutzerdefiniertes Pixel hinzufügen.

Consent einstellen

Nachdem man dem Pixel einen Namen gibt, erhält man diese Ansicht.

Unter “Erlaubnis” trägt man ein, welchen Consent man von Besuchern benötigt. Für Google Ads ist dies “Marketing”.

Wichtig: Das Cookie-Consent-Tool muss Shopify kommunizieren, dass der Consent vorhanden ist. Bei “externen” Consent-Tools wie CookieBot funktioniert dies häufig nicht.

JavaScript-Code einfügen

Abschließend fügt man den passenden JavaScript-Code ein.

Hier eine grobe Beschreibung, was der Code macht.

• In Zeile 1-4 lädt man die für Google Ads benötigte JavaScript-Bibliothek
• In Zeile 6-10 kommuniziert man Google, dass der Consent Mode V2 aktiv ist.
• In Zeile 12-15 definiert man das Google-Ads-Tag
• Und abschließend definiert man, dass die Conversion genau dann feuert, wenn Shopify das Event “checkout_completed” auslöst:

Weitere Shopify-Events, denen man “zuhören” kann, sind

• page_viewed (irgendeine Seite aufgerufen)
• product_viewed
• product_added_to_cart
• checkout_started
• payment_info_submitted

Die komplette Liste findet man hier: https://shopify.dev/docs/api/web-pixels-api/standard-events

Der JavaScript-Code würde für die wichtigsten Events so aussehen:

Erweiterte Conversions für Google Ads einrichten

Auch erweiterte Conversions für Google Ads kann man ganz einfach abdecken. Hierfür definiert man die E-Mail-Adresse, Telefonnummer und Adresse mithilfe des Befehls gtag('set', 'user_data', {....}).

Weitere Informationen zum Thema (auch zur Frage nach dem Datenschutz) findet man unserem Artikel zu Erweiterten Conversions.

Informationen zum Warenkorb an Google Ads übergeben

Google Ads lässt einen Informationen übergeben, welche Produkte gekauft wurden. Damit kann man insbesondere auswerten, ob angeklickte Produkte auch gekauft wurden.

Wichtig ist hier, dass die gleichen Produkt-IDs an Google Ads übergeben werden, die im Merchant Center hinterlegt sind. Dort findet man diese Information unter “Produkte”.

Wichtig: Die Produkt-ID setzt sich aus den Variablen variant.id und variante.product.id zusammen, wenn man die Content API verwendet, um die Daten aus Shopify ins Merchant Center zu importieren.

Weitere Informationen zum Thema “Cart Data” findet man unserem Artikel zu “Google Ads E-Commerce Tracking”.

Fertiger JavaScript-Code zum direkt kopieren

Es muss jeweils die passende Conversion ID und Conversion Label eingetragen werden. 

In diesem JavaScript-Code legt man die Conversion ID einmal ganz oben fest. Die einzelnen Conversion Labels trägt man unten ein.

Wie man die Conversions in Google Ads anlegt, zeigt unser Artikel “Google Ads Conversion-Tracking einrichten & verstehen”.

analytics.subscribe("checkout_completed", (event) => {

var cb_id = "AW-12345";

script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=' + cb_id);
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', cb_id);

gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

   cb_first_name = "";
    cb_last_name = "";
    cb_city = "";
    cb_postal_code = "";
    cb_country = "";
  
  if( event.data.checkout.shippingAddress != null) {
    cb_first_name = event.data.checkout.shippingAddress.firstName;
    cb_last_name = event.data.checkout.shippingAddress.lastName;
    cb_city = event.data.checkout.shippingAddress.city;
    cb_postal_code = event.data.checkout.shippingAddress.zip;
    cb_country = event.data.checkout.shippingAddress.country;
  }
  gtag('set', 'user_data', {
    "email": event.data.checkout.email,
    "phone_number": event.data.checkout.phone,
    "address": {
        "first_name" : cb_first_name,
        "last_name" : cb_last_name,
        "city" : cb_city,
        "postal_code" : cb_postal_code,
        "country": cb_country
    }
  });
       
  gtag('event', 'conversion', {
    'send_to': cb_id + '/wfBXCLajmrUZEP6UqIsD',
    'value': event.data.checkout.totalPrice.amount,
    'transaction_id': event.data.checkout.order.id,
    'currency': event.data.checkout.currencyCode
  });

  var data = event.data.checkout.lineItems;
  var cb_remarketing_items = data.map((eachItem) => {
    var Item = {
      id: "shopify_DE_" + eachItem.variant.id + "_" + eachItem.variant.product.id,
      google_business_vertical: 'retail'
    };
    return Item;
  });
      
  gtag('event','purchase', {
      'value': checkout.totalPrice.amount,
      'items': cb_remarketing_items
  });
});

analytics.subscribe("checkout_started", (event) => {
  gtag('event', 'conversion', {
    'send_to': cb_id  + '/wohwCLyjmrUZEP6UqIsD'
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  gtag('event', 'conversion', {
    'send_to': cb_id + '/5bYbCLmjmrUZEP6UqIsD'
  });
});

analytics.subscribe("product_viewed", (event) => {
  gtag('event', 'conversion', {
    'send_to': cb_id + '/ojN0CL-jmrUZEP6UqIsD'
  });
});

Kundenereignisse via Google Tag Manager an Google Ads senden

Statt die Conversions direkt an Google Ads zu senden, kann man mithilfe der Kundenereignisse

• den Google Tag Manager laden und
• den dataLayer mit den relevanten Informationen (wie Warenkorbwert) befüllen

Neues Pixel für GTM und dataLayer anlegen

Unter Einstellungen > Kundenereignisse wählt man “Benutzerdefiniertes Pixel” hinzufügen.

Consent einstellen

Unter “Erlaubnis” trägt man ein, welchen Consent man von Besuchern benötigt. Den Google Tag Manager kann man (laut der Ansicht vieler Datenschützer) auch ohne Consent ausspielen. Das heißt, man wählt “Nicht erforderlich”.

JavaScript-Code einfügen

Wer vor allem Google Ads Conversion messen möchte, für den reicht der einfache Standard-Code, den Shopify selbst zur Verfügung stellt. Es muss nur die GTM-ID angepasst werden.

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}

(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');

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

analytics.subscribe("checkout_completed", (event) => {
  var data = event.data.checkout.lineItems;
  var cb_remarketing_items = data.map((eachItem) => {
    var Item = {
      id: "shopify_DE_" + eachItem.variant.id + "_" + eachItem.variant.product.id,
      google_business_vertical: 'retail'
    };
    return Item;
  });

   cb_first_name = "";
    cb_last_name = "";
    cb_city = "";
    cb_postal_code = "";
    cb_country = "";
  
  if( event.data.checkout.shippingAddress != null) {
    cb_first_name = event.data.checkout.shippingAddress.firstName;
    cb_last_name = event.data.checkout.shippingAddress.lastName;
    cb_city = event.data.checkout.shippingAddress.city;
    cb_postal_code = event.data.checkout.shippingAddress.zip;
    cb_country = event.data.checkout.shippingAddress.country;
  }

  window.dataLayer.push({
    event: "purchase",
    timestamp: event.timestamp,
    id: event.id,
    token: event.data?.checkout?.token,
    url: event.context.document.location.href,
    client_id: event.clientId,
    user_data: {
      "email": event.data.checkout.email,
      "phone_number": event.data.checkout.phone,
      "address": {
          "first_name" : cb_first_name,
          "last_name" : cb_last_name,
          "city" : cb_city,
          "postal_code" : cb_postal_code,
          "country": cb_country
      }
    },
    remarketing_items: cb_remarketing_items,
    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
  });
});


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
  });
});

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
  });
});

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
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  window.dataLayer.push({
    event: "add_to_cart",
    timestamp: event.timestamp,
    id: event.id,
    client_id: event.clientId,
    url: event.context.document.location.href,
    value: 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_view",
    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,
  });
});

Tags für Conversions im GTM anlegen

Um Google Ads Conversions im GTM anzulegen, wird eine Conversion Verknüpfung benötigt. Dazu im GTM ein neues Tag vom Typ “Conversion Verknüpfung” erstellen. Als Trigger “Alle Seiten” wählen.

Damit die Conversions getrackt werden können, ein neues Tag vom Typ “Google Ads Conversion Tracking” hinzufügen. 

Hier die Conversion ID und das Conversion Label eintragen. 

Diese findet man in der Google Ads Oberfläche unter “Zielvorhaben”. Klickt man auf die Conversion und öffnet das Dropdown für die Tag-Einrichtung, kann man ID und Label finden.

Anschließend müssen im Tag nur noch die Variablen für Umsatz, Transaktions-ID und Währung hinterlegt werden. Die drei Werte kommen aus dem dataLayer, den wir vorher in den Kundenereignissen befüllt haben.

Um zu übergeben, welche Produkte gekauft wurden, gibt es die Option “Verkaufsdaten auf Produktebene angeben” in den Tag Einstellungen. Hier die Werte eintragen, unter anderem die Merchant ID und die dataLayer Variable, mit der die gekauften Artikel ausgelesen werden.

Weiterhin kann man in den Tag Einstellungen festlegen, dass Erweiterte Conversions gemessen werden sollen. Hierzu die entsprechende Option aktivieren.

Damit die Nutzerdaten mitgesendet werden, muss eine Variable vom Typ “Von Nutzern bereitgestellte Daten” erstellt werden. Den Typ stellt man auf Code. Als Datenquelle verwendet man auch hier wieder, den dataLayer. Der dataLayer den wir zuvor in den Kundenereignissen eingefügt haben, enthält bereits Informationen zur E-Mail Adresse, Telefonnummer und Anschrift.

Ist das Google Ads Conversion Tracking Tag fertig eingestellt, fehlt nur noch der Trigger. Hierzu einen neuen Trigger vom Typ “Benutzerdefiniertes Ereignis” erstellen und den Ereignisnamen eintragen, wie er auch im dataLayer steht.

Für “purchase” sieht der Trigger beispielsweise so aus:

Legt man ein Conversion-Tag für „add_to_cart“ an, sieht der Trigger so aus:

Qualitätssicherung der Kundenereignisse im GTM

Die Qualitätssicherung kann man nicht im Tag Assist machen, da die Kundenereignisse in einem Iframe ausgespielt werden. Man erhält im Tag Assist die Meldung, dass der GTM nicht gefunden wurde.

Um zu überprüfen, ob das Tracking funktioniert, öffnet man die Vorschau des Google-Tag-Managers und öffnet die Dev-Tools mit F12. Hier zum Reiter “Netzwerk” navigieren. Filtert man nun nach dem Conversion Label und führt eine Conversions aus, findet man einen Eintrag, dass eine Conversions mit diesem Label gesendet wurde.

Zusätzlich kann man sehen, welche Parameter mitgesendet wurden, z.B. die Währung und der Warenwert. 

Ist der Parameter “eitems” vorhanden, wird auch die Information gesendet, welche Produkt gekauft wurden.

Wenn Erweiterte Conversions aufgesetzt wurden, sollte der Parameter “em” mit einem mehr als 20-stelligen String angezeigt werden.