Google Tag Manager - Modul für PrestaShop

Einfaches Hinzufügen von Website-Tags. Unterstützung von Google Tags und Tags von Drittanbietern.

Was kann das Modul?

Verbinden Sie Ihr Google Tag Manager Konto ohne Programmierkenntnisse und automatisiert mit unserem PrestaShop Google Tag Manager Modul. Die Google Tag Manager Snippets (Head- und Body Code), werden von Google kostenlos als Script-Einbindung zur Verfügung gestellt. Sie brauchen einfach nur die Snippets kopieren und im Modul entsprechend den Platzhaltern einfügen.

Was kann das Modul?

Vorteile


Was kann das Modul?

Funktionsübersicht

Integration der Google Tag Manager Scripte ohne Programmierkenntnisse

Bei der Einrichtung des Google Tag Manageres werden Sie aufgefordert, die Scripte in Ihre Website zu integrieren. Mit dem PrestaShop Modul für den Google Tag Manager können Sie diese ganz einfach per Copy & Paste in Ihren Shop einbauen, so dass diese an der richtigen Stelle im Quellcode der Seiten auftauchen.

Nutzung der Tag Manager Tags und Tag-Bibliothek

Tags sind Codesegmente, die Sie in Ihren PrestaShop einbauen können. Das sind entweder indivduelle Scripte oder HTML-Schnipsel oder meist auch vorgefertigte Codes von Analyse-, Marketing oder Supportanbietern. Diese werden nicht direkt im Shop, sondern über die Tag Manager Benutzeroberfläche hinzugefügt.

Inzwischen gibt es eine riesige Tag-Bibliothek vorgefertigter Scriptlösungen, die als einzelne Tags im Google Tag Manger hinzugefügt werden können. Dazu zählen Tags für Google Analytics (4), Google Ads, Conversion Verknüpfung, Facebook Pixel, sowie eine nahezu unendliche Anzahl von Tags aus der Galerie für Community-Vorlagen.

grafik.png

Mächtiger DataLayer für GA4

Der DataLayer wird in verschiedene Abschnitte geteilt und richtet sich nach den Standardvorgaben. Hierbei werden die wichtigsten Parameter für das Tracking mit Google Analytics 4 auf der Seite zusammen getragen.

Hinweis
Bitte beachten Sie, dass diese Dokumentation eine Momentaufnahme darstellt und sich von älteren oder zukünftigen Versionen unterscheiden kann. Wir sind darum bemüht, unsere Dokumentation aktuell zu halten. Bei Rückfragen oder Unsicherheiten stehen wir Ihnen jederzeit gerne zur Verfügung.

Installation

Es ist wichtig, vor der Installation eines Moduls eine vollständige Sicherung Ihrer Website oder Ihres Servers durchzuführen, um Datenverluste zu vermeiden, falls etwas schiefgeht. Wenn Sie unsicher sind oder Bedenken haben, ziehen Sie die Hilfe eines erfahrenen Webentwicklers oder Administrators in Betracht.

Installation

7 Schritte zur erfolgreichen Installation

    1. Gehen Sie im PrestaShop Backoffice zur Modulverwaltung (ehemals Modul-Manager) und klicken Sie auf „Modul hochladen“
    2. Ziehen Sie nun die Moduldatei (zip-Datei) per Drag & Drop oder wählen Sie
      die Datei im System-Verzeichnisbaum aus
    3. Wählen Sie die hochzuladende ZIP-Datei aus und klicken Sie auf "OK"
    4. Ihr Modul wird installiert und erscheint in der Liste der installierten Module
    5. Warten Sie bis die Modulinstallation erfolgreich abgeschlossen ist
    6. Um mit der Einrichtung zu beginnen, klicken Sie auf "Konfigurieren". Wenn Sie mehrere Shops haben, müssen Sie jeden Shop separat konfigurieren. Bitte wählen Sie Ihren Shop direkt aus dem Menü aus, mit dem Sie beginnen möchten.
    7. Testen Sie das Modul: Gehen Sie zur Frontend-Ansicht Ihrer Website und überprüfen Sie, ob das Modul wie erwartet funktioniert.

Viel Erfolg!

Modul-Konfiguration

Ist die Modulinstallation erfolgreich abgeschlossen, ist die richtige Modul-Konfiguration entscheidend. Im Allgemeinen sind die Module intuitiv zu bedienen, sollten Sie einmal nicht weiterkommen, kontaktieren Sie gerne unseren kostenlosen Support im Rahmen des Modulkaufs.

Modul-Konfiguration

Einstellungen

Voraussetzung, um das Modul zu nutzen, ist ein Google Tag Manager Konto 

Fügen Sie eigene Tags für Conversion-Tracking, Websiteanalysen und andere Zwecke effizient hinzu und aktualisieren Sie diese zentral über die Tag-Manager-Oberfläche. Die entsprechenden Snippets und/oder Angaben finden Sie in Ihrem Google Tag Manager Konto.

Falls Sie zum ersten Mal den Google Tag Manager nutzen, legen Sie sich bitte ein Konto an und folgen für die weitere Einrichtung dieser Anleitung.

Typischerweise stellt der Google Tag Manager zwei Snippets zur Verfügung, die man auf jeder Seite einer Website einbinden soll:

  1. Der Head Code (Head Tag): Ein kurzer JavaScript-Code, der in den `<head>` Bereich jeder Seite eingefügt wird. Dieser Code lädt die GTM JavaScript Datei (`gtm.js`) in den Browser des Nutzers und sollte möglichst oben im <head> platziert werden, um eine möglichst schnelle Bearbeitung der im GTM konfigurierten Tags zu gewährleisten.

  2. Der Body Code (Body Tag): Ein zusätzliches Stückchen Code, das direkt nach dem Öffnen des `<body>` Tags platziert wird. Dieser Code ist im Wesentlichen ein iframe-Tag, der sicherstellt, dass bestimmte Tags korrekt funktionieren, selbst wenn JavaScript im Browser des Benutzers deaktiviert ist.

  3. grafik.png
Konfiguration des Google Tag Manager Moduls

Bitte fügen Sie hier die o.a. Codes per Copy & Paste an entsprechender Stelle ein

grafik.png

Tag Manager Head Code 

Der Head Code (Head Tag) ist ein kurzer JavaScript Code, der in den <head> Bereich jeder Seite eingefügt wird. Dieser Code lädt die GTM JavaScript Datei (gtm.js) in den Browser des Nutzers und sollte möglichst oben im <head> platziert werden, um eine möglichst schnelle Bearbeitung der im GTM konfigurierten Tag zu gewährleisten.

Body Code

Der Body Code (Body Tag) ist ein zusätzliches Stückchen Code, das direkt nach dem Öffnen des `<body>` Tags platziert wird. Dieser Code ist im Wesentlichen ein iframe-Tag, der sicherstellt, dass bestimmte Tags korrekt funktionieren, selbst wenn JavaScript im Browser des Benutzers deaktiviert ist.

Hook 

Damit das Modul ordnungsgemäß funktioniert, muss hinter jedem <head>-Tag im Theme ein Hook eingefügt werden. Dieses Modul erledigt dies automatisch während der Installation. Allerdings kann es vorkommen, dass der Hook nicht korrekt hinzugefügt oder wieder gelöscht wurde. Hier können Sie sehen, ob der Hook richtig montiert ist:

Was ist der Unterschied zwischen dem Tag Manager Head Code und dem Body Code?

Der Google Tag Manager (GTM) erfordert das Einfügen von zwei verschiedenen Snippets an verschiedenen Stellen im HTML-Dokument einer Webseite. Dies sind der Head Code und der Body Code, und sie haben jeweils unterschiedliche Funktionen und Platzierungsvorgaben.

1. Head Code: Dieser Teil des GTM-Codes wird im `<head>`-Bereich der Webseite eingefügt. Der Zweck des im `<head>`-Bereich eingefügten Codes besteht darin, die GTM-JavaScript-Datei (`gtm.js`) so früh wie möglich während des Ladens der Webseite zu laden. Dadurch wird gewährleistet, dass alle Tags, die so konfiguriert sind, dass sie beim Laden der Seite ausgelöst werden (z.B. verschiedene Tracking-Pixel oder Analyseskripte) möglichst, umgehend aktiviert werden. Da der Head-Bereich zuerst geladen wird, wenn eine Webseite besucht wird, ermöglicht dieser Code das schnellstmögliche Tracking von Ereignissen oder Benutzerverhalten von Beginn des Seitenladens an.

2. Body Code: (auch als NoScript-Tag bezeichnet): Dieses Snippet wird direkt nach dem Starttag `<body>` platziert. Während der Head Code JavaScript verwendet, ist der Body Code in Form eines iFrame-Snippets angegeben, das auch dann funktioniert, wenn der Benutzer JavaScript deaktiviert hat oder wenn es aus irgendeinem Grund nicht funktioniert. Obwohl der Head Code in der Regel für die überwiegende Mehrheit aller Tracking-Fälle ausreicht, ermöglicht der Body Code zusätzliche Redundanz und Sicherheit, damit Tracking- und Analysetags auch ohne JavaScript zumindest in irgendeiner Form abgefeuert werden können (wenn auch eingeschränkt). Es handelt sich im Wesentlichen um eine Fallback-Option.

Es ist wichtig, dass beide Codes korrekt implementiert werden, um sicherzustellen, dass der GTM wie beabsichtigt funktioniert und um die Vorteile beider Implementierungsmethoden zu nutzen. Je nachdem, welche Tags man im GTM eingerichtet hat, können einige davon auf den Head Code angewiesen sein, um korrekt zu funktionieren, wohingegen andere auch mit dem Body Code funktionieren könnten.

Log-Einstellungen

In diesem Abschnitt finden Sie die Logs, die das Modul schreibt. Dazu zählen Konfigurationen, Installationen und ggf. Fehler, je nach eingestellten Log-Level. Mit dem Button "Logdateien löschen", werden sämtliche Logdateien entfernt.

grafik.png

Hinweis
Bitte beachten Sie, dass diese Dokumentation eine Momentaufnahme darstellt und sich von älteren oder zukünftigen Versionen unterscheiden kann. Wir sind darum bemüht, unsere Dokumentation aktuell zu halten. Bei Rückfragen oder Unsicherheiten stehen wir Ihnen jederzeit gerne zur Verfügung.


DataLayer für GA4

Der Begriff "Data Layer" bezieht sich auf eine Schicht von Daten, die auf einer Webseite oder in einer mobilen App existieren und Informationen über Ereignisse und Interaktionen der Benutzer, die auf der Seite oder in der App stattfinden, speichern und bereitstellen.

DataLayer für GA4

GA4-Data Layer

Was ist ein GA4-Data Layer?

Beim Bezug auf GA4 (Google Analytics 4) spricht man von der Art und Weise, wie Events und benutzerspezifische Daten auf einer Webseite erfasst und mittels eines strukturierten Formats im Google Tag Manager (GTM) verfügbar gemacht werden, bevor sie an Google Analytics 4 weitergeleitet werden.

Der Data Layer dient als zentrale Ablagestelle für die Daten, die von unterschiedlichen Tags verwendet werden. Anstatt dass jedes Tag individuell Daten aus dem Dokument sammelt, schreibt das Dokument oder die Anwendung relevante Informationen in den Data Layer, und Tags können dann darauf zugreifen.

In der GA4-Implementierung sieht ein Zugriff auf den Data Layer über das `dataLayer`-Objekt meistens so aus:

```javascript
// Zuerst initiiert man den Data Layer, falls noch nicht vorhanden
window.dataLayer = window.dataLayer || [];

// Ein Ereignis mit zusätzlichen Parametern wird zum Data Layer hinzugefügt
window.dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
        'currency': 'USD',
        'value': 30.00,
        'items': [...]
    }
});
```

In diesem Beispiel wird ein Kaufereignis (`purchase`) mit zusätzlichen E-Commerce-Parameter, wie der Währung (`currency`), Wert (`value`) und Produktdaten (`items`), in den Data Layer eingefügt. Diese können dann durch GA4-konfigurierte Tags im Google Tag Manager ausgelesen und für die Analyse verwendet werden.

Fazit: Der Einsatz eines Data Layers bietet erhebliche Flexibilität und Skalierbarkeit für Tracking und Datenanalyse, da er es ermöglicht, Daten strukturiert und konsistent zu erfassen und zugänglich zu machen, ohne direkt in das HTML oder JavaScript der Webseite eingreifen zu müssen.

DataLayer für GA4

DataLayer Ereignisse

Was sind DataLayer Ereignisse?

DataLayer-Ereignisse sind spezielle Ereignisse, die dazu verwendet werden, Informationen oder Benutzerinteraktionen auf einer Webseite an den Data Layer zur Verarbeitung oder Analyse zu senden. Sie sind ein zentraler Bestandteil dynamischer und komplexer Tracking-Setups, insbesondere bei der Arbeit mit Tools wie Google Tag Manager (GTM) und Google Analytics.

Der Data Layer ist eine abstrakte Datenstruktur, die typischerweise als JavaScript-Array (`dataLayer`) implementiert wird. Er fängt wichtige Informationen über das Verhalten des Nutzers oder den Zustand der Webseite ein, wie zum Beispiel Käufe, Formularabsendungen, Scroll-Tiefe oder Video-Interaktionen.

Welche DataLayer Ereignisse sind aktuell im Google Tag Manager Modul verfügbar?

Diese Liste wird stetig erweitert und aktuell gehalten. Von daher kann es möglich sein, dass weitere Ereignisse zur Verfügung stehen als hier aufgeführt:

add_address_info
Beschreibung: Click „Next“-Button on Address-Page or Address-Form
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

add_payment_info
Beschreibung: Click „Buy“-Button on Order review page
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

add_promo_code
Beschreibung: Click „Add“ next to the Promo Code
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

add_shipping_info
Beschreibung: Click „Next“-Button on Shipping page
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

add_to_cart
Beschreibung: Click „Add to cart“-Button
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

add_to_wishlist
Beschreibung: Click on „Heart“-Icon on category or product page (gc_wishlist module)
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

begin_checkout
Beschreibung: Click „Next“-Button on Cart page
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

create_account
Beschreibung: Click „Create account“ Link on Login Page
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

go_to_account
Beschreibung: Click on Name/Account-Link in menu (nav)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

go_to_cart
Beschreibung: Click „To cart“-Button in Add-to-Cart Popup Layer
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

go_to_login
Beschreibung: Click on Login-Link in menu (nav)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

go_to_wishlist
Beschreibung: Click on Wishlist-Link in menu (gc_wishlist module)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

login
Beschreibung: Click „Login“-Button on Login page
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: nein

logout
Beschreibung: Click on Logout-Link in menu (nav)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

logout_account
Beschreibung: Click on Logout-Link in account
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

password_forgotten
Beschreibung: Click „Password forgotten“ Link on Login Page
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

purchase
Beschreibung: Show order confirmation page
Ereignis-Trigger: view
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

remove_from_cart
Beschreibung: Click on „Bin“-Icon on cart page (product line)
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

remove_from_wishlist
Beschreibung: Click on „Bin“-Icon in Wishlist Detail page (gc_wishlist module)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

search
Beschreibung: Search action in Nav or at search page / 404 Search page, Submitting the search form
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

sign_up
Beschreibung: Click „Next“-Button on Sign up page / Event on new user registration
Ereignis-Trigger: click
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: nein

step1_button_continue_create
Beschreibung: Click on Continue-button (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_button_continue_login
Beschreibung: Click on Continue-button (for logged users in step 1)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_button_continue_login
Beschreibung: Click on Continue-button (Sign in form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_newsletter_off
Beschreibung: Click on deselect checkbox for checkbox Newsletter (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_newsletter_on
Beschreibung: Click on checkbox for checkbox Newsletter (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_optin_off
Beschreibung: Click on deselect checkbox  „Partner offers“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_optin_on
Beschreibung: Click on select checkbox „Partner offers“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_privacy_off
Beschreibung: Click on deselect checkbox „Customer data privacy“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_privacy_on
Beschreibung: Click on select checkbox „Customer data privacy“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_psgdpr_off
Beschreibung: Click on deselect checkbox „terms and conditions (psgdpr)“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_checkbox_psgdpr_on
Beschreibung: Click on select checkbox „terms and conditions (psgdpr)“ (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_birthday
Beschreibung: Click on enter/change Birthday (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_company
Beschreibung: Click on enter/change Company (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_email_create
Beschreibung: Click on enter/change Email (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_email_login
Beschreibung: Click on enter/change Email (Sign in form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_firstname
Beschreibung: Click on enter/change First Name  (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_lastname
Beschreibung: Click on enter/change Last Name (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_password_create
Beschreibung: Click on enter/change password (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_password_login
Beschreibung: Click on enter/change password (Sign in form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_input_siret
Beschreibung: Click on enter/change Identification number (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step1_radio_gender
Beschreibung: Click on a radio button Social title (Create Guest/Account form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_button_confirm_addresses
Beschreibung: Click on continue-button addresses (Checkout Step 2: Addresses)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_checkbox_use_same_address_off
Beschreibung: Click on check use_same_address (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_checkbox_use_same_address_on
Beschreibung: Click on uncheck use_same_address (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_address1
Beschreibung: Click on enter/change Street (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_address2
Beschreibung: Click on enter/change Address 2 field (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_city
Beschreibung: Click on enter/change city (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_company
Beschreibung: Click on enter/change Company (Address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_firstname
Beschreibung: Click on change firstname (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_lastname
Beschreibung: Click on change lastname (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_phone
Beschreibung: Click on enter/change Phone (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_postcode
Beschreibung: Click on enter/change zip (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_street_number
Beschreibung: Click on enter/change Street number (address form) (gc_mandatoryfield required)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_input_vat_number
Beschreibung: Click on enter/change Vat number (Address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_radio_id_address_delivery
Beschreibung: Click on choose delivery address (Checkout Step 2: Addresses)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_radio_id_address_invoice
Beschreibung: Click on choose invoice address (Checkout Step 2: Addresses)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step2_select_country
Beschreibung: Click on enter/change country (address form)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step3_button_confirm_shipping
Beschreibung: Click on continue-button shipping (Checkout Step 3: Shipping)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step3_input_delivery_message
Beschreibung: Click on write a delivery message (Checkout Step 3: Shipping)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step3_radio_delivery_option
Beschreibung: Click on choose delivery method (Checkout Step 3: Shipping)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_button_confirm_payment
Beschreibung: Click on „Order now“ Button (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_conditions_off
Beschreibung: Click on deselect checkbox terms and conditions (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_conditions_on
Beschreibung: Click on checkbox terms and conditions (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_gdpr_off
Beschreibung: Click on deselect checkbox gdpr delivery (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_gdpr_on
Beschreibung: Click on checkbox gdpr delivery (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_virtual_off
Beschreibung: Click on deselect checkbox virtual product (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_checkbox_virtual_on
Beschreibung: Click on checkbox virtual product (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

step4_payment_option
Beschreibung: Click on choose payment options (Checkout Step 4: Payment)
Ereignis-Trigger: click
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_address_info
Beschreibung: Show address page (Step 2)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_authentication
Beschreibung: Show login page
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_cart
Beschreibung: Show cart page
Ereignis-Trigger: view
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

view_item
Beschreibung: show product page
Ereignis-Trigger: view
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

view_item_list
Beschreibung: Show category page
Ereignis-Trigger: view
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

view_password
Beschreibung: Show password forgotten page
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_payment_info
Beschreibung: Show payment page / Order Review (Step 4)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_registration
Beschreibung: Show registration page (Create Account)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_personal_info
Beschreibung: Show personal page (Step 1)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_promotion
Beschreibung: show promotion detail page
Ereignis-Trigger: view
Ereignis-Typ: empfohlen
Ecommerce-Ereignis: ja

view_promotion_list
Beschreibung: show promotion overview
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_my-account
Beschreibung: Show the account page
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_shipping_info
Beschreibung: Show Shipping page (Step 3)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

view_wishlist
Beschreibung: Show wishlist page (gc_wishlist module)
Ereignis-Trigger: view
Ereignis-Typ: benutzerdefiniert
Ecommerce-Ereignis: nein

DataLayer für GA4

Benutzerdefinierter Events im GTM

Was sind GA4 E-Commerce Events? Und wie richte ich sie ein?

E-Commerce-Events in Google Analytics 4 (GA4) sind speziell definierte Ereignisse (DataLayer Ereignisse), die verwendet werden, um E-Commerce-bezogene Benutzerinteraktionen auf einer Website oder in einer mobilen App zu erfassen. Diese Ereignisse helfen dabei, Käuferverhalten, Conversion-Raten, Produktdetails und viele andere wichtige E-Commerce-Metriken zu analysieren, die für das Verständnis von Verkaufstrends und Kundenerlebnissen wichtig sind.

Wir verwenden in den Praxisbeispielen eigene Benennungen, die beim Einrichten auch benutzerdefiniert festgelegt werden können. Wichtig ist, dass Tags und Trigger eindeutig zugeordnet und ausgelöst werden können. 

Um E-Commerce-Events in GA4 zu erfassen und zu nutzen, sollten Sie in der Regel folgende Schritte durchgehen:

  1. Einrichtung der erforderlichen GA4- und GTM-Konten: Sorgen Sie dafür, dass Ihr GA4-Property korrekt konfiguriert ist und dass der Google Tag Manager auf Ihrer Website implementiert ist.
  2. Implementierung des Data Layers: Die E-Commerce-Informationen müssen im DataLayer Ihrer Website entsprechend der GA4-Spezifikationen verfügbar gemacht werden. Dazu gehört das Einfügen von Skripten auf Ihrer Website, die die erforderlichen Daten an den DataLayer senden. 
  3. Erstellung von E-Commerce-Events: In GA4 erstellen Sie dann spezielle Ereignisse basierend auf den Daten, die im Data Layer erfasst wurden. Für E-Commerce-Szenarien stellen Sie sicher, dass Ereignisse wie `view_item`, `add_to_cart`, `begin_checkout`, `purchase` und mehr, je nachdem, welche Aktionen Sie erfassen möchten, einbezogen werden. Wir erleichtern Ihnen die Arbeit, indem wir bereits definierte E-Commerce Events im Google Tag Manager Tool als DataLayer vorkonfiguriert haben.
  4. Tag-Konfiguration im GTM: Sie müssen GTM-Tags erstellen, die mit den E-Commerce-Ereignissen und -Variablen verbunden sind. Die Daten werden dann beim Auftreten des Ereignisses aus dem Data Layer extrahiert und an GA4 gesendet.

Die Einrichtung eines benutzerdefinierten Events im Google Tag Manager (GTM) ist ein mehrstufiger Vorgang, der das Erstellen von Triggern und Tags beinhaltet, um Nutzerinteraktionen zu erfassen, die nicht standardmäßig von GTM erfasst werden.

Wenden wir uns nun der konkreten Umsetzung in der Praxis zu:

(1) Öffnen Sie Ihr Google Tag Manager Konto
(2) Rufen Sie die  Rubrik "Tags" auf

grafik.png
(3) Sofern Sie noch kein passendes Tag angelegt haben, wie in diesem Beispiel "GA4 - E-Commerce Events", müssen Sie zuerst das Tag anlegen, damit das GA4-Ereignis an Google Analytics übermittelt werden kann. Relevant ist hierfür die "Mess-ID" {{GA4 Mess-ID}} und der Ereignisnamen {{Event}}.

grafik.png

Das angelegte Tag kann nur durch einen sogenannten Trigger ausgelöst werden. In diesem Praxisbeispiel durch den Trigger "Custom - all ecommerce events".

Auslösende Trigger können unter der Rubrik Trigger angelegt werden. 

grafik.png

(4) Dort werden die benutzerdefinierten Events (DataLayer Ereignisse) eingepflegt. Im Screenshot sind die bereits im Modul hinterlegten Ereignisse vorzufinden, die Sie weiter unten als zusammengefasste Liste per Copy + Paste einfach übernehmen können. Die Liste kann selbstverständlich x-beliebig und individuell erweitert werden. 

grafik.png

Zusammengefasst wird das Tag (1) durch den Trigger (2) ausgelöst, das die Daten an GA4 sendet

grafik.png

Durch diese Maßnahmen sollten nun alle Events automatisiert im Google Analytics erfasst werden!

Benutzerdefinierte Ereignisse aus dem Google Tag Manager Modul

add_address_info | add_payment_info | add_promo_code | add_shipping_info | add_to_cart | add_to_wishlist | begin_checkout |cart_sidebar_link_addpromo | cart_sidebar_link_showcart_sidebar | cart_sidebar_link_showpromo | create_account | go_to_account |go_to_cart | go_to_login | go_to_wishlist | login | logout | logout_account | password_forgotten | purchase | remove_from_cart |remove_from_wishlist | search | sign_up | step1_button_continue_create | step1_button_continue_login |step1_button_continue_login | step1_checkbox_newsletter_off | step1_checkbox_newsletter_on | step1_checkbox_optin_off I step1_checkbox_optin_on | step1_checkbox_privacy_off | step1_checkbox_privacy_on | step1_checkbox_psgdpr_off |step1_checkbox_psgdpr_on | step1_input_birthday | step1_input_company | step1_input_email_create | step1_input_email_login |step1_input_firstname | step1_input_lastname | step1_input_password_create | step1_input_password_login | step1_input_siret |step1_link_forgot_pw | step1_link_guest | step1_link_signin | step1_radio_gender | step2_button_confirm_addresses |step2_checkbox_use_same_address_off | step2_checkbox_use_same_address_on | step2_input_address1 | step2_input_address2 |step2_input_city | step2_input_company | step2_input_firstname | step2_input_lastname | step2_input_phone | step2_input_postcode | step2_input_street_number|step2_input_vat_number|step2_link_add_address|step2_link_edit_address|step2_link_cancel_address |step2_link_delete_address|step2_link_different_invoice_address | step2_link_edit_address | step2_link_edit_personal_info |step2_radio_id_address_delivery | step2_radio_id_address_invoice | step2_select_country | step3_button_confirm_shipping |step3_input_delivery_message | step3_link_edit_address_info | step3_link_edit_personal_info | step3_radio_delivery_option |step4_button_confirm_payment | step4_checkbox_conditions_off | step4_checkbox_conditions_on | step4_checkbox_gdpr_off |step4_checkbox_gdpr_on | step4_checkbox_virtual_off|step4_checkbox_virtual_on | step4_link_edit_address_info |step4_link_edit_addresses | step4_link_edit_personal_info | step4_link_edit_shipping | step4_link_edit_shipping_info |step4_payment_option | view_address_info | view_authentication | view_cart | view_item | view_item_list | view_password |view_payment_info | view_registration | view_personal_info | view_promotion | view_promotion_list | view_my-account |view_shipping_info | view_wishlist

Stand: April 2024


Einige der grundlegenden E-Commerce-Ereignisse in GA4 schließen ein:

- `view_item` oder `view_item_list`: Wird gesendet, wenn ein Benutzer ein Produkt oder eine Liste von Produkten ansieht.
- `add_to_cart` und `remove_from_cart`: Erfassen, wenn ein Benutzer ein Produkt in den Warenkorb legt oder daraus entfernt.
- `begin_checkout`: Markiert den Beginn des Checkout-Prozesses.
- `add_shipping_info`: Wird verwendet, wenn ein Benutzer Versandinformationen hinzufügt.
- `add_payment_info`: Erfasst den Teil des Checkout-Prozesses, bei dem Zahlungsinformationen hinzugefügt werden.
- `purchase`: Das wichtigste Ereignis, das am Ende des Checkout-Prozesses ausgelöst wird und für die Aufzeichnung der vollständigen Transaktion steht.

Jedes dieser Ereignisse kann zusätzliche Parameter enthalten, die weitere Einzelheiten zu den Produkten in einer Transaktion, wie z. B. die Produkt-ID, den Namen, die Kategorie, die Marke, die Varianten sowie der Währungscode und der Wert eines Einkaufs, übermitteln.

Um E-Commerce-Events in GA4 tatsächlich zu implementieren, müssen die entsprechenden JavaScript-Codes oder GTM-Einstellungen auf der Website angepasst werden und oft ist eine koordinierte Zusammenarbeit zwischen Entwicklern, Marketingspezialisten und Datenanalysten erforderlich, um sicherzustellen, dass alle Daten korrekt erfasst und gemeldet werden.


DataLayer für GA4

Neuen Tag/Trigger anlegen

Diese Anleitung ist ein Exkurs zu den allgemeinen Konfigurationseinstellungen und erklärt Schritt für Schritt, wie man einen neuen Tag / einen neuen Trigger anlegt. 

Die Einrichtung eines benutzerdefinierten Events im Google Tag Manager (GTM) ist ein mehrstufiger Vorgang, der das Erstellen von Triggern und Tags beinhaltet, um Nutzerinteraktionen zu erfassen, die nicht standardmäßig von GTM erfasst werden.

Hier ist eine allgemeine Schritt-für-Schritt-Anleitung:

Grundvoraussetzung: Sie haben bereits einen Universal-Google-Tag angelegt (früher Google Analytics Tag). 

grafik.png

Wichtig sind zudem die Variablen, die später benötigt werden, wenn noch nicht vorhanden

grafik.png


Schritt 1: Erstellen des Custom Event Triggers
1. Loggen Sie sich in Ihren Google Tag Manager Account ein und wählen Sie den entsprechenden Container aus.
2. Gehen Sie zum 'Workspace'-Bereich.
3. Klicken Sie im linken Menü auf 'Trigger'.
4. Wählen Sie 'Neu', um einen neuen Trigger zu erstellen.
5. Geben Sie dem Trigger einen aussagekräftigen Namen.

grafik.png

6. Als Trigger-Typ wählen Sie 'Benutzerdefiniertes Ereignis'.

grafik.png


7. Geben Sie den Ereignisnamen ein, den Sie erfassen möchten, z.B. 'Custom - all ecommerce events'. Beachten Sie, dass der Ereignisname mit dem Namen übereinstimmen muss, den Sie im Code Ihrer Webseite senden, typischerweise über `dataLayer.push({'event': 'eventName'})`.

Schritt 2: Einrichten des Tags
1. Gehen Sie zurück zum 'Workspace' und klicken Sie im linken Menü auf 'Tags'.
2. Klicken Sie auf 'Neu', um ein neues Tag zu erstellen.
3. Vergeben Sie einen Namen für das Tag, der die Funktion beschreibt, z.B. "PrestaShop Ecommerce Events". Wählen Sie sodann einen Tag-Typ aus, um mit der Einrichtung zu beginnen.

grafik.png

Nachdem Sie Google Analytics angeklickt haben, wählen Sie bitte im nächsten Schritt "Google Analytics: GA4-Ereignis" aus

grafik.png

Für die Mess-ID wählen Sie bitte den Google-Tag {{GA4 MESS-ID}} und für den Ereignisnamen den Google Tag {{Event}} aus.

grafik.png

Als Nächstes fügen Sie unter "Weitere Einstellungen" die Datenquelle "Data Layer" aus und setzen den Haken auf "E-Commerce-Daten senden"

grafik.png

Anschließend fügen Sie den definierten Trigger hinzu

grafik.png

4. Wählen Sie im Abschnitt 'Triggering' den Trigger aus, den Sie ebenfalls erstellt haben, damit das Tag feuert, wenn das benutzerdefinierte Ereignis ausgelöst wird.

Abschließend Speichern nicht vergessen!


DataLayer für GA4

Empfohlene Ereignisse

Empfohlene Ereignisse von Google

In Google Analytics 4 (GA4) unterscheidet Google zwischen empfohlenen (recommended) Ereignissen und automatisch erfassten Ereignissen. Empfohlene Ereignisse sind solche, die nicht automatisch getrackt werden, aber von Google vorgeschlagene Benennungs- und Parameterrichtlinien haben, um sicherzustellen, dass man die vollen analytischen Fähigkeiten der Plattform nutzt. Diese erweitern die automatische Erfassung von Events und bieten mehr Tiefe und Flexibilität für die Analyse.

Die empfohlenen Ereignisse variieren je nach Art der Website oder App (z.B. E-Commerce, Bildungsinhalte, Arbeits-/Jobseiten etc.). Die Benennung und Parametrisierung dieser Ereignisse gemäß den Google-Richtlinien ermöglicht es GA4, diese Ereignisse korrekt zu interpretieren und bessere Insights sowie Reporting-Optionen zu bieten.

Einige Beispiele für empfohlene Ereignisse für verschiedene Branchen und Website-Typen umfassen:

Für E-Commerce-Websites:
- `view_item_list` - User sieht eine Liste von Produkten oder Angeboten.
- `view_item` - Details eines Produkts werden angesehen.
- `add_to_cart` - Ein Produkt wird zum Wagen hinzugefügt.
- `remove_from_cart` - Ein Produkt wird aus dem Wagen entfernt.
- `begin_checkout` - Der Checkout-Prozess wird begonnen.
- `add_shipping_info` - Nutzer fügt Versandinformationen hinzu.
- `add_payment_info` - Nutzer fügt Zahlungsinformationen hinzu.
- `purchase` - Eine Kauftransaktion wird abgeschlossen.

Die empfohlenen Ereignisse von Google, insbesondere für E-Commerce Events, sind bereits als Standard Data Layer im Modul Google Tag Manager berücksichtigt!

Außerhalb dieser Kategorien gibt es viele weitere empfohlene Ereignisse für zusätzliche Szenarien, und Google aktualisiert seine Liste regelmäßig. Um die genauen Spezifikationen und aktuellen empfohlenen Ereignisse für GA4 zu finden, sollten Nutzer die offizielle Dokumentation von Google konsultieren oder das GA4-Setup-Assistenten innerhalb der Google Analytics-Benutzeroberfläche nutzen, welche die relevanten Ereignisnamen und zugehörigen Parameter anzeigt.

Die Verwendung der empfohlenen Ereignisse, kombiniert mit den richtigen Parametern, ermöglicht es GA4, leistungsstarke Analysefunktionen wie maschinelles Lernen und vorhersagende Metriken bereitzustellen und diese optimal für die persönlichen Geschäftsziele zu nutzen.

DataLayer für GA4

Schnittstelle Cookie Consent Manager

Wenn Sie unser Modul "Cookie & Consent Manager"nutzen, lässt sich das Modul ganz einfach mit dem Google Tag Manager durch Aktivierung der Schaltfläche "Google Consent Mode v2" aktivieren. 

grafik.png


Übersetzungen & Sprachen

Die Übersetzungen können direkt aus der Modulkonfigurationsansicht vorgenommen werden. Klicken Sie dazu einfach auf Übersetzen und wählen Sie anschließend die gewünschte Sprache aus. Zur Auswahl stehen Deutsch und Englisch.

Übersetzungen & Sprachen

Übersetzungen

Die Übersetzungen können direkt in der Modulkonfigurationsansicht vorgenommen werden. Klicken Sie dazu einfach auf Übersetzen und wählen Sie anschließend die gewünschte Sprache aus. Zur Auswahl stehen alle von Ihnen installierten Sprachen. Deutsch und Englisch werden mit dem Modul mitgeliefert.

 

grafik.png

Modul-Kompatibilität

Das Modul "Google Tag Manager" ist kompatibel mit PrestaShop 8.x. und 1.7.x Spezifizierte technischen Angaben sind auf der Modulverkaufsseite zu finden und werden regelmäßig gepflegt.

Modul-Kompatibilität

Kompatibilität mit PrestaShop

Google Tag Manager für PrestaShop 8

Google Tag Manager für PrestaShop 1.7

Hinweis: Falls Sie eine PrestaShop 1.7. Version nutzen, können die Screenshots lt. dieser Dokumentation abweichen.

Lizenz

Module und Plugins für verschiedene Plattformen und Software können unterschiedliche Arten von Lizenzen haben. Es ist wichtig, die Lizenzbedingungen des jeweiligen Moduls zu kennen und einzuhalten, um rechtliche Probleme zu vermeiden und die Entwickler angemessen zu unterstützen.

Lizenz

Lizenz Google Tag Manager


Fazit / Downloads

Der Google Tag Manager (GTM) bietet zahlreiche Vorteile, die besonders für Marketing-Teams, Webentwickler und Analysten von Interesse sind. Diese Vorteile machen den Google Tag Manager zu einer leistungsstarken Lösung für Website-Tag-Management, die Flexibilität, Geschwindigkeit und Effizienz erhöhen und dabei helfen kann, das Online-Marketing effektiver zu gestalten.

Fazit / Downloads

Hilfreiche Links und Downloads

Aktuelle Modul-Downloads
Google Tag Manager PrestaShop 8 Modul

Hinweis
Bitte beachten Sie, dass diese Dokumentation eine Momentaufnahme darstellt und sich von älteren oder zukünftigen Versionen unterscheiden kann. Wir sind darum bemüht, unsere Dokumentation aktuell zu halten. Bei Rückfragen oder Unsicherheiten stehen wir Ihnen jederzeit gerne zur Verfügung.

Falls Sie Unterstützung bei der Optimierung Ihres PrestaShop-Shops benötigen, zögern Sie nicht, Gurkcity zu kontaktieren. Unser Support-Team steht Ihnen nicht nur bei der Modulinstallation zur Seite, sondern bietet Ihnen auch umfassende Dienstleistungen als PrestaShop Full-Service-Agentur an.