Site Overlay

Prestashop 1.7 + Google Tag Manager + Analytics = Durchblick (2020)

Dieses Jahr beginnt spannend für mich. motorize.de soll um 100.000 Produkte wachsen und ich bin mir nicht ganz sicher, ob Prestashop das überhaupt packt. Eine andere Hürde habe ich aber bereits genommen und das ist die Messung der eCommerce-Performance. Und genau darum soll es hier gehen. Ich erkläre hier wie du für deinen Shop folgende Fragen beantworten kannst:

  • Welche Shop-Seiten werden besucht?
  • Welche Produkte sieht sich der Besucher an?
  • Welche Produkte werden geklickt und in welchen Kategorien?
  • Welche Produkte werden in den Warenkorb gelegt und welche wieder gelöscht?
  • Wie verhält sich der Kunde im Checkout?
    • Welche Schritte durchläuft er?
    • Wo bricht er ab?
  • Welche Produkte werden gekauft?

Voraussetzungen

  1. Einen Google Analytics Account.
  2. Einen Google Tag Manager Account.
  3. Einen eigenen Online-Shop.

Um die Google Analytics & Tag Manager Accounts, sowie den Online-Shop musst du dich selbst kümmern. Aber das Wissen, wie du das alles mit einander verbindest, bekommst du in dieser Anleitung.

Als Shop-System nutzen wir Prestashop. Deshalb zeige ich dir heute auch alles anhand von Prestashop in der Version 1.7. Wenn du ein anderes Shop-System nutzt, solltest du entsprechende Parallelen ziehen können.

Motivation

Wir haben einen Online-Shop, hatten aber keine Informationen über die Besucher. Wir wollten wissen, welche Produkte sich die Leute ansehen, was sie in der Warenkorb legen und was sie kaufen oder eben nicht kaufen. Ich wusste, dass Google Analytics alle diese Informationen aufarbeiten kann, wenn wir es vorher mit entsprechenden Daten füttern würden.

Die Frage war nur: Wie sammeln wir diese Daten in einem Prestashop und wie bekommen wir sie nach Analytics rein?

Nach kurzer Recherche war klar, dass der Google Tag Manager einen Teil dieser Aufgabe erledigen kann. Der große Vorteil von einem „Tag Manager“ ist nämlich, dass wir alle Tags mit ihm verwalten können. Also auch Facebook Pixel, Google Remarketing Tags, Google Ads Conversion Tags, Bing Ads Tracking usw.

One tool to rule them all„.

Also kaufte ich ein Prestashop Modul, dass den Tag Manager in den Shop integrieren sollte und …. war enttäuscht. Denn funktioniert hat es nicht!

Das führte dazu, dass ich mich mit diesem Thema intensiv auseinander gesetzt habe und zum Schluss ein eigenes Prestashop-Modul programmiert habe.

Wozu ein „Tag Manager“?

Eine moderne Internetseite lädt allerlei Dinge. Texte, Bilder, Videos, Skripte, usw. Eben diese Skripte müssen vom Browser geladen, interpretiert und ausgeführt werden. Das alles kostet den Browser Rechenzeit und verlangsamt den Shop. Und Kunden mögen keine langsamen Shops! Aus diesem Grund ist es sinnvoll die Skripte zu hinterfragen.

  • Muss das Skript des Zahlungsanbieters auf der Startseite mit geladen werden oder reicht es, wenn wir es nur im Checkout laden?
  • Muss das Skript für den Newsletter-Popup geladen werden, obwohl der Besucher sich bereits eingetragen hat?
  • Muss das Skript für den Zoom des Produktbildes geladen werden, obwohl sich der Besucher im Impressum befindet und gar kein Produktbild dargestellt wird?

Statt also immer und überall im Shop alles zu laden, sollten wir selektieren und die Skripte „nach Bedarf“ laden. Und genau dabei hilft uns ein „Tag Manager“.

Er lädt „Tags“ – also JavaScript-Code-Schnipsel – genau dann, wenn sie benötigt werden. Und wann das ist, können wir präzise steuern.

Wie spielt das alles zusammen?

Ebene 1.
Der Kunde löst im Shop unterschiedliche Ereignisse aus. Beispielsweise ruft er Kategorien auf, klickt Produkte an, legt Produkte in den Warenkorb oder kauft etwas.
Ebene 2.
Der Shop sendet diese Ereignisse an den Google Tag Manager.
Ebene 3.
Der Tag Manager übersetzt diese Ereignisse und leitet sie an Google Analytics weiter.
  • Die erste Ebene ist nicht weiter erklärungsbedürftig.
  • Die dritte wird uns ebenfalls keine Kopfschmerzen bereiten, denn es sind beides Google Produkte, die sich prächtig verstehen.
  • Ebene 2. sollten wir uns allerdings mal näher ansehen…

Wie schicken wir Daten zum Google Tag Manager?

Für JavaScript-Coder kommt hier die Kurzfassung:

dataLayer.push({'event': 'purchase', ...});

Für jeden Nicht-Entwickler, kommt hier der Versuch einer verbalen Umschreibung:

Der Google Tag Manager ist ein Skript, das wir in unseren Shop einbauen. (Ähnlich dem eines Popups mit dem sich Kunden in den Newsletter eintragen können). Und wir können mit dem diesem Skript auf eine ganz bestimmte Weise kommunizieren. Nämlich über den s.g. DataLayer.

Der DataLayer ist – wenn du so willst – der direkte (und einzige) Draht zum Tag Manager. Du kannst ihn dir wie eine Schnittstelle vorstellen, über die wir mit dem Tag Manager kommunizieren. Und über die wir dem Tag Manager Nachrichten senden.

Das Beispiel oben ist solch eine Nachricht. (Nämlich, dass ein Kunde gerade etwas gekauft hat.) Und unsere Aufgabe ist es jetzt alle interessanten Shop-Ereignisse für den Tag Manager zu „übersetzen“ und über den DataLayer als Nachrichten zu „versenden“.

Wie installieren wir den Google Tag Manager?

Sobald du dich im GTM (Google Tag Manager) eingeloggt hast, solltest du ein Konto erstellen und öffnen. Oben rechts findest du eine kryptische Zahlen- & Buchstabenfolge. Irgendetwas mit GTM-XXXXX. Das ist die „Google Tag Manager ID“.

Wenn du sie anklickst, öffnet sich ein Dialog mit der Anweisung, WIE der Tag Manager zu installieren ist.

Dort steht, dass das erste Script in den Header-Teil und das zweite Script in den Body-Teil deiner Seite einzufügen ist. Also in etwa so:

<html>
	<head>
		...
		GTM SCRIPT Nr. 1
		...
	</head>
	<body>
		...
		GTM SCRIPT Nr. 2
		...
	</body>
</html>

Wenn du technisch versiert bist und dich in deinem Shop gut auskennst, dann wirst du die entsprechenden Stellen in deinem Template finden und die Code-Schnipsel einfügen können.

Wenn nicht, dann wirst du Hilfe benötigen. Das wäre also ein guter Zeitpunkt, um deinen IT-Menschen anzurufen.

Wie testen wir den Google Tag Manager?

Ob die Operation gelungen ist oder nicht überlassen wir nicht dem Zufall. Ich habe mir gleich angewöhnt alles mit dem „Debugger“ zu testen. Klick dafür den Button „Preview“. (Auf Deustch heiß der Button „In Vorschau ansehen“) …

… und lade deinen Shop anschließend im Browser neu. Es sollte sich so ein Fenster öffnen. (Wichtig: Google Tag Manager und deinen Shop solltest du im selben Browser öffnen. Also nicht mit zwei verschiedenen Browsern arbeiten.)

Links (unter Summary) sehen wir die Nachrichten, die an den GTM gesendet wurden. Der Shop hat offenbar auch ohne unser Eingreifen bereits drei Nachrichten verschickt…

  1. Die erste, als der Browser das GTM Skript heruntergeladen hat: Page View.
  2. Die zweite, als der Browser die Seite interpretiert hat: DOM Ready.
  3. Die dritte, als das Browser-Fenster für uns bereit war: Window Loaded.

Lass uns mal die erste Nachricht mit dem Namen Page View anklicken und uns die Variablen ansehen.

Offenbar sammelt der Tag Manager Informationen über unseren Shop. Und diese Informationen legt er in Variablen ab. Weil das so ist, können wir diese Variablen im GTM auslesen…

Wir finden sie 1:1 im GTM wieder. (Noch brauchen wir sie nicht, aber es ist gut zu wissen, wo wir sie finden können.)

Was sind Tag Manager „Ereignisse“ (Events)?

Wann der Manager einen „Tag“ (also ein Skript) in die Seite laden soll, steuern wir über Ereignisse. Die s.g. Events. Hier einige Beispiele für Events:

  • Besucher hat irgendeine Seite aufgerufen.
  • Besucher hat eine Produktseite aufgerufen.
  • Besucher hat in das Suchfeld ein Stichwort eingegeben.
  • Besucher hat eine Tastenkombination gedrückt.
  • Besucher hat Link geklickt.
  • Besucher hat die Seite bis nach ganz unten gescrollt.
  • Besucher hat Produkt in den Warenkorb gelegt.
  • Besucher hat die Zahlung per Kreditkarte ausgewählt.
  • Besucher hat ein Produkt gekauft.
  • Besucher hat sich in den Newsletter eingetragen.

Jede Aktion, die ein Besucher in unserem Shop macht, ist ein Ereignis. Und alle Ereignisse, für die wir uns interessieren, können wir zum Tag Manager senden, der darauf hin Tags (Skripte) ausführt, die mit diesem Ereignis verknüpft sind. Beispiele:

Ereignis: Besucher meldet sich im Newsletter an.
Tag: Sende „Lead“ an den Facebook Pixel.

Ereignis: Besucher legt Produkt in den Warenkorb.
Tag: Sende das Produkt an Google Analytics.

Ereignis: Besucher schließt Einkauf ab.
Tag 1: Sende Bestellinformationen an Google Analytics.
Tag 2: Sende Bestellinformationen an das Affiliate Partner Netzwerk.

Wie messen wir E-Commerce Ereignisse in Google Analytics?

Da ich den Tag Manager in einen Online-Shop integriert habe, interessieren mich natürlich in erster Linie alle Ereignisse rund um Produkte und Kunden. Also eCommerce Ereignisse.

Google Analytics ist perfekt geeignet, um eCommerce Daten zu sammeln und auszuwerten. Aber diese Funktionalität muss zuvor aktiviert werden. Stell also sicher, dass sowohl das E-Commerce als auch das Enhanced E-commerce Feature aktiviert sind:

Später werden wir unter Conversions > E-Commerce all die interessanten Zahlen finden, die uns interessieren.

Da sowohl der Tag Manager als auch Analytics aus dem Haus Google kommen, verstehen sie sich auf anhieb. Ich bin bei meiner Umsetzung dem Enhanced Ecommerce (UA) Developer Guide gefolgt, (den auch du wenigstens mal überfliegen solltest).

Die Theorie steht. Jetzt zur Praxis…

Das „PageView“ Ereignis.

Das „PageView“-Ereignis hat nicht speziell mit eCommerce zu tun. Es wird einfach auf jeder Seite ausgelöst. Denn wir wollen jede Bewegung der Besucher unserer Seite protokollieren.

Wir wollen wissen woher sie kommen, wohin sie gehen. Wie lange sie auf welche Seite bleiben. Wo sie aussteigen, usw. Und aus diesem Grund führen wir Analytics immer dann aus, wenn eine Seite geladen wird.

Im Google Tag Manager ist das ein Standardereignis und nennt sich „All Pages“ vom Typ „Page View“.

So viele Screenshots, wie ich hierfür benötige, kann ich gar nicht machen. Deshalb habe ein kleines Video gedreht, in dem ich dir zeige, wie man das „PageView“ Ereignis abgreift und zu Google Analytics weiterleitet:

Du siehst, dass bei mir im Browser drei Seiten geöffnet sind. Mein Online-Shop, der Google Tag Manager und Google Analytics.

  1. Öffne den Tag Manager und erstelle einen neuen Tag. Hier würde ich mir gleich angewöhnen sprechende Namen zu verwenden, weil es mit steigender Zahl an Tags unübersichtlich wird und sprechende Namen weiterhelfen.
  2. Als Trigger wählst du das PageView-Ereignis „All Pages“. Das bedeutet, dass dieser Tag auf allen Seiten des Shops ausgeführt wird.
  3. Als Tag Konfiguration wähle Google Analytics: Universal Analytics.
  4. Wir können unterschiedliche Arten von Tracking umsetzen. Aber uns interessiert der einfache PageView.
  5. Im nächsten Schritt teilen wir Analytics mit, welches Konto die Ereignisse empfangen soll. Dies passiert über eine spezielle Analytics-Variable, die wir dafür erstellen.
  6. Diese Variable hat ein Feld mit dem Namen Tracking ID. Damit ist die ID aus den Property Settings in Analytics gemeint.
  7. Wir speichern alles und aktualisieren die Vorschau. Die Vorschau selbst ist ein super Tool. Damit siehst nur du die Änderungen. Die Besucher deiner Seite bekommen davon nichts mit.

Das wars schon. Jetzt testen wir, ob das Ereignis auch wirklich greift und zu Google Analytics weitergeschickt wird. Klick dafür in deinem Shop rum. Mit einer kleinen Verzögerung sollten die Daten in der Echtzeit-Ansicht von Analytics zu sehen sein.

Im Tag Manager Debugger Fenster siehst du auch, dass unser Tag mit dem Namen „GA | PageView“ auf der Seite ausgelöst wurde.

Das bedeutet, dass sobald wir die Seite neu geladen haben, der Tag Manager ein kleines Script in die Seite „geschleust“ hat, welches an Google Analytics unseren Besuch sendet.

Das „Product Details“ Ereignis.

Kommen wir zum ersten wirklich spannendem Ereignis: Welche Produkte schaut sich unser potenzieller Kunde denn eigentlich an?

Laut dem Developer Guide können wir dem Tag Manager mit Hilfe des DataLayers eine Nachricht mit Informationen über das Produkt senden.

Diese Nachricht hat einen ganz bestimmten Aufbau und wenn wir das 1:1 so umsetzen, wie beschrieben, kann Analytics mit dieser Info etwas anfangen.

So sieht die Beispiel-Nachricht aus:

dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},
      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});

Du musst nicht alle Informationen mitgeben. Eigentlich ist nur die ID des Produkts wichtig. Aber je mehr Daten Analytics sammeln kann, desto genauer ist das Bild von unserem Shop.

Außerdem: Welche Information über das Produkt ist für dich persönlich einfacher zu verarbeiten „Name: Triblend Android T-Shirt“ oder „id: 12345“?

Spätestens an dieser Stelle musst den Software-Entwickler in dir wecken. Denn auf jeder Detailseite eines Produkts, brauchen wir eins kleines JavaScript.

Mein Modul für Prestashop erzeugt beispeilsweise dieses kleine Skript und packt es in jede Produkt-Detailseite:

<script>
  window.dataLayer = window.dataLayer || [];
  window.gtmData = {
    "page":"product",
    "langauge": {"id":2},
    "shop":{"id":1},
    "currency":{"code":"EUR"},
    "products":[{
      "id":1, 
      "name":"Hummingbird printed t-shirt",
      "price":22.7528,
      "category": "Men",
      "brand": "Studio Design"
    }]
  };
    
  var product = gtmData.products[0];
  
  dataLayer.push({
    'event': 'ssgtm.product.details',
    'ecommerce': {
      'currencyCode': gtmData.currency.code,
      'detail': {
        'products': [{
          'name': product.name,
          'id': product.id,
          'price': product.price,
          'category': product.category,
          'brand': product.brand
        }]
      }
    }
  });
</script>

Der eigentlich interessanteste Teil des Codes ist dataLayer.push({…}). Du musst die Informationen über das Produkt irgendwie abgreifen und JavaScript-Code erzeugen, das so aussieht, wie oben gezeigt.

Schauen wir uns die Nachricht an den Tag Manager mal im Detail an:

  1. Als erstes lösen wir ein Event aus. Der Name des Events ist beliebig wählbar. Bei mir heißt er ssgtm.product.details, aber du kannst ihn nennen wie du willst.
  2. Danach kommen die eCommerce Felder, wie im Developer Guide beschrieben. Alle Felder, die dich interessieren, musst du mit Werten aus deinem Shop füttern.

Im nächsten Schritt kümmern wir uns darum, wie die Informationen vom Tag Manager nach Analytics gelangen. Und dafür gibt es wieder ein kleines Video…

Und das sind die Schritte, die ich im Video gezeigt habe:

  1. Im Tag Manager bearbeiten wir zunächst die Analytics Variable. Wir müssen zwei Dinge aktivieren: Erstens das erweiterte eCommerce. Und zweitens definieren wir, dass alle eCommerce Informationen aus dem DataLayer zu holen sind.
  2. Dann erstellen wir einen Trigger. Ein Trigger ist ein anderes Wort für Ereignis oder Event. Ich nenne ihn „Product Details Event“ und wähle „Custom Event“ als Event-Typ.
  3. Jetzt kommt der Event-Name aus dem JavaScript unseres Shops. In meinem Fall ssgtm.product.details. Dieser ist in der „Event“-Variable des Tag Managers gespeichert, sobald der Shop die Nachricht über den DataLayer abschickt.
  4. Jetzt brauchen wir nur noch einen Tag, der bei diesem Ereignis ausgeführt wird und an Analytics die Informationen über das Produkt weiterleitet. Ich nenne ihn „GA | Page Details View“. Als Trigger wählen wir den neuen Trigger mit dem Namen „Product Details Event“ und der Tag-Typ ist wieder Google Analytics.
  5. Dieses Mal konfigurieren wir Analytics anders und wählen „Event“ als „Track Type“. In die vier Felder kannst du eintragen was du willst. Es sind Information über das Ereignis selbst, die uns später in Analytics begegnen werden. Ich trage „Ecommerce“ als Kategorie und „Product Details View“ als Action ein. Ich könnte auch noch ein Label eintragen. Beispielsweise den Namen des Produkts und auch eine Wert angeben. Aber das ist optional.
  6. Die Google Analytics Variable darf nicht fehlen. In ihr ist die Information gespeichert, dass wir eCommerce Tracking haben wollen und auch dass die DataLayer als Daten-Quelle zu nehmen ist.

Jetzt speichern wir den Tag, aktualisieren die Vorschau und laden die Produktseite in unserem Shop neu. Wenn wir jetzt in der Echtzeit-Ansicht auf den Menüpunkt „Events“ klicken, dann geht das neue „Product Details View“-Event nach einigen Sekunden Verzögerung ein.

Ein weiteres Ereignis…

Ab hier ist es Fleißarbeit. Denn das Muster wiederholt sich und bleibt gleich:

  1. An der richtigen Stelle der Seite über den DataLayer eine Nachricht an den Tag Manager senden und sich dabei am Enhanced Ecommerce (UA) Developer Guide orientieren.
  2. Im Tag Manager einen Trigger definieren (benutzerdefiniertes Ereignis).
  3. Beim Trigger einen Google Analytics Tag ausführen.

Für die meisten wird die eigentlich Herausforderung darin liegen an der richtigen Stelle des Shops die Informationen abzugreifen und das JavaScript zu integrieren, das dem Tag Manager die benötigten Daten schickt.

Wenn du nicht gerade ein Software-Entwickler bist, dann wird es auf jeden Fall zu einer Herausforderung. Zumal man nicht immer Zugang zum Dateisystem des Shops hat und evtl. gar nicht die Dateien anpassen darf.

Ich kann dir an dieser Stelle nur mit meinem Modul weiterhelfen. Schreib mir einfach ein Kommentar dazu.

Viel Erfolg bei der Integration vom Tag Manager und Analytics in deinem Shop!

Beitragsbild von Akela999 auf Pixabay

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.