fbpx

Google Tag Manager x Shopify – E Commerce Datalayer einrichten


Zum GA4-kompartiblen E-Commerce Datalayer in wenigen Minuten

11.01.2023 | Felix Hartung | Marketing

Wenn du für deinen Shopify-Shop ein funktionierendes E Commerce Tracking mit dem Google Track Manager einrichten möchtest, wirst du wahrscheinlich schon wissen, dass du am Datalayer nicht vorbeikommst.

Vielleicht ist ja auch schon aufgefallen, dass es zahlreiche Apps gibt, die aber alle mindestens 10 € pro Monat kosten. Und genau diese Kosten kannst du dir auch sparen, wenn du das Ganze selbst in die Hand nimmst. Mit unserer Hilfe erledigst du das in wenigen Minuten.

1. GTM Basiscode einbinden

Navigiere in deinem Shopify-Shop auf „Themes“ und klicke unter deinem aktiven Theme auf die drei Punkte, um zum Themecode zu gelangen.

Snippet „google-tag-manager.liquid“ anlegen und eigenen Google Tag Manager Containercode (Den ersten) einfügen. Den findest du in deinem GTM-Account unter „Verwaltung > Google Tag Manager installieren“.

Code hinter <head> Tag im theme.liquid platzieren:

{% include 'google-tag-manager' %}

Snippet „gtm-noskript.liquid“ anlegen und eigenen Code einfügen.

Hinter <body> Tag im theme.liquid einfügen

{% include 'gtm-noskript' %}

2. Purchase Datalayer einfügen

In Checkout Einstellungen (Einstellungen > Checkout) Code einfügen und Container-ID ersetzen:

<script>
window.dataLayer = window.dataLayer || [];
dataLayer.push({ ecommerce: null });
{% if first_time_accessed %}
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "{{ order_number }}",
      value: {{ total_price | times: 0.01 }},
      tax: {{ tax_price | times: 0.01 }},
      shipping: {{ shipping_price | times: 0.01 }},
      currency: "{{ currency }}",
      items: [
       {% for line_item in line_items %}{
        item_id: "{{ line_item.product_id }}",
        item_name: "{{ line_item.title | remove: "'" | remove: '"' }}",
        currency: "{{ currency }}",
        price: {{ line_item.final_price | times: 0.01 }},
        quantity: {{ line_item.quantity }}
      },{% endfor %}
 ]
  }
});
{% endif %}
</script>
<!-- Google Tag Manager -->
<script>(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','DEINE-CONTAINERID');</script>
<!-- End Google Tag Manager -->

3. Add to Cart Datalayer einfügen

Snippet anlegen „add-to-cart-event.liquid“ und Code einfügen:

onclick="dataLayer.push({ 'ecommerce': null });dataLayer.push({
'event': 'add_to_cart',
'ecommerce': {
        'items': [{
        'item_id': '{{ product.id }}',
        'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
        'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
        'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
        'item_variant': '{{ product.selected_variant.sku }}',
        'currency': '{{ shop.currency }}',
        'price': '{{ product.price  | times: 0.01}}'
        }],
    }
});" 

Folgenden Code im Add-to-Cart Button Code vor dem schließenden > integrieren:

{% include 'add-to-cart-event' %}

4. View item Datalayer einfügen

Snippet anlegen „view-item-event.liquid“ und Code einfügen:

<script type="text/javascript">
  window.dataLayer = window.dataLayer || [];

  window.appStart = function(){
    {% assign template_name = template.name %} 

    window.productPageHandle = function(){
      var productName = "{{ product.title | remove: "'" | remove: '"' }}";
      var productId = "{{ product.id }}";
      var productPrice = "{{ product.price | money_without_currency }}";
      var productBrand = "{{ product.vendor | remove: "'" | remove: '"' }}";
      var productCollection = "{{ product.collections.first.title | remove: "'" | remove: '"' }}" 

      window.dataLayer.push({
        event: 'view_item',
        'ecommerce': {
        'items': [{
        'item_id': '{{ product.id }}',
        'item_name': '{{ product.title | remove: "'" | remove: '"' }}',
        'item_brand': '{{ product.vendor | remove: "'" | remove: '"' }}',
        'item_category': '{{ product.collections[0].title | remove: "'" | remove: '"' }}',
        'item_variant': '{{ product.selected_variant.sku }}',
        'currency': '{{ shop.currency }}',
        'price': '{{ product.price  | times: 0.01}}'
        }]
    }
      });
    };

    {% case template_name %}
    {% when 'product' %}
        productPageHandle()
    {% endcase %}
  }

  appStart();
</script>

Code nach öffnendem <head> Tag hinter Containercode einfügen:

{% include 'view-item-event' %}

5. Testen im Google Tag Manager Vorschaufenster

Klicke im Google Tag Manager auf „In Vorschau ansehen“ und gib deine Shop-URL ein. Schließe nun einen Testkauf ab.

Wenn du dein Vorschaufenster öffnest, siehst du alle ausgelösten Events auf der linken Seite und die jeweiligen Datalayer in der Mitte, wenn du den zugehörigen Reiter öffnest.

Gehe zuerst sicher, dass der GTM-Basiscode funktioniert (Google Tags found ✓). Checke dann, ob das view_item Event und der zugehörige Datalayer ausgelöst wird.

Als nächstes prüfe, ob dein add_to_cart Event ausgelöst wird und die richtigen Werte enthält.

Im letzten Schritt musst du nur noch sichergehen, dass dein purchase Event inkl. Ereignisparameter im Datalayer funktioniert.