Google Tag Manager in Magento integrieren

Google Tag Manager in Magento integrieren

Technologie

26.07.2016 / admin

Im E-Commerce ist Geschwindigkeit entscheidend. Mit dem Google Tag Manager können Shop-Manager jederzeit, einfach und ohne den Rückgriff auf Programmierer Tags für die Website erstellen und aktualisieren. – So das Werbeversprechen von Google.

Ganz so einfach ist es dann doch nicht. Denn vorab müssen, sog. Data-Layer auf der Website ausgegeben werden, auf die der Tag Manager dann zugreift. Über diese Data-Layer werden dem Tag Manager dann die relevanten Informationen wie Aufruf einer Kategorie, Artikelnummer oder Warenkorbwerte übermittelt.

Dieser Beitrag soll zeigen, wie diese Data-Layer und damit den Google Tag Manger in Magento integriert wird. Diese Anleitung basiert auf einer Google Tag Manager Magento Extension für Magento, welche die grundlegenden Data-Layer in Magento bereitstellt. Sie können die Extension hier herunterladen.

Das Konzept des Google Tag Managers basiert darauf, dass Sie als Anwender alle Tags auf der Basis benutzerdefinierter Regeln und Makros aktivieren können. Dies ermöglicht Ihnen, auf fast alle Ereignisse der Website ohne Änderungen des HTML-Codes zu reagieren und Aktionen auszulösen.

Vorbereitung: Google Einführungsvideos

Sollten Sie noch keine Erfahrungen mit dem Google Tag Managers gesammelt haben, so ist es sinnvoll, dass Sie die Einführungsvideos von Google anschauen, um das Konzept hinter dem Werkzeug zu verstehen.

1. Erste Schritte

Beginnen wir nun mit der Integration des Tag Managers in Magento:

  • Erstellen Sie ein Google Tag Manager Konto www.google.com/tagmanager bzw. rufen Sie ein bestehendes Konto auf
  • Erstellen Sie einen Container für Ihre Website
  • Migrieren Sie alle bestehenden Tags aus Ihrer Website (aus dem Quellcode Ihrer Website) in den Google Tag Manager (Alternativ können Sie auch unsere Beispiel Container importieren)
  • Installieren und konfigurieren Sie das Magento Modul (siehe Schritt Nr. 2) – dieses wird auf Ihrer Website das notwendige Container-Snippet sowie die passenden Datenschichten hinzufügen

2. Magento Modul installieren

3. Modul Konfiguration

Öffnen Sie Ihren Container im Google Tag Manager Account und kopieren Sie Ihre Container ID.

gtm_containerid_alt

Rufen Sie die Modul Konfiguration in unserer Magento Extension für den Tag Manager auf: System -> Konfiguration -> DMF -> Google API -> Google Tag Manager

Stellen Sie “Enable” auf “Ja”.

aktivierung

Schreiben Sie die Containter ID in das Feld “Container Public ID”.

konfiguration1

Aktivieren Sie die notwendigen Data-Layers.

konfiguration2

4. Data-Layer einrichten

Unser Magento Google Tag Manager Modul verfügt bereits über diverse vorkonfigurierte Data-Layer für verschiedene Services:

  • Google Analytics E-Commerce Tracking
  • Criteo
  • Intelliad
  • Zanox

Weitere Formate für individuelle Anforderungen eines Tracking-Pixels an die Data-Layer können einfach über den Programmcode hinzugefügt werden.

Data layer: Transactions

Dieser Data-Layer aktiviert die Transaktionsinformationen, also Bestellungen etc.
(siehe auch support.google.com/tagmanager/ answer/3002596)

Folgende Variablen stellt das Modul zur Verfügung:

Variablenname Beschreibung
transactionId Bestellungsnummer
transactionTotal Gesamtsumme inkl. Steuern
transactionSubTotal Gesamtsumme zzgl. Steuern
transactionShipping Zahlungskosten
transactionTax Steuern
transactionDate Bestellungsdatum
transactionPaymentType Versandart
transactionCurrency Währung
transactionShippingMethod Zahlungsart
transactionPromoCode Gutschein-Code
transactionProducts Bestellte Artikel

Die zusätzlichen Felder transactionType und transactionAffiliation können benutzerdefinierte Werte abhängig des Store View abbilden. Diese Felder können leer gelassen werden, oder dem Google Tag Manager erlauben, verschiedene Tags für verschiedene Store/Website zu verwenden.

Data layer: Visitors

Aktivierte Kundeninformationen für die Datenschicht:

Variablenname Beschreibung
visitorLoginState “Logged in” oder “Logged out”
visitorType Kundengruppe
visitorLifetimeValue Summe aller Bestellungen
visitorExistingCustomer “Yes” wenn der Kunde schon Bestellungen hat, oder “No”
visitorHashedEmail Hached Email

Trigger

Mithilfe von Triggern wird in Webcontainern bestimmt, ob die zugehörigen Tags ausgelöst oder nicht ausgelöst werden. Siehe hierzu auch support.google.com/tagmanager/ answer/6106961

Es gibt im Wesentlichen zwei Arten von Tags:

  1. Die erste Art von Tags sind auf Pageview eingestellt. Sie enthalten Informationen, die beim Laden der Seite gesammelt und automatisch mit dem GA Pageview gesendet werden.
  2. Die andere Art von Tags wird angewendet, nachdem die Seite geladen wird. Sie erfordern in der Regel eine Benutzeraktion wie z.B. Klick auf den Button usw.

Mit Aktivierung des Magento Tag Manager Moduls erhalten Sie per Default die Variable “pageType” im Magento-Shop, die Sie nun in den Regeln verwenden können.

Mögliche Werte des “pageType”s:

Wert Beschreibung
home Startseite
category Kategorieansicht
product Produkt-Detailseite
cart Warenkorb
success Danke-Seite

Regeln

Mit Hilfe der Regeln kann man einstellen, bei welchem Seitenaufruf (also auf welchem Dokument oder bei welcher Aktion) ein Tag aktiviert werden soll. Achtung: Sind für einen Tag keine Regeln definiert, so wird es nie auf der Seite angezeigt werden und keine Tracking-Daten senden. Damit der Tag nach dem Laden des Seitens aktiviert ist, muss man event gleich gtm.dom einstellen.

Wichtig ist, dass man, wenn alle Anpassungen gemacht sind, die Version veröffentlicht.

So kann man prüfen, ob der Magento Tag Manager Tag verwendet wird

Der Tag Manager bietet die Möglichkeit einer Vorschau und des Debugging. Details hierzu sind hier nachzulesen:
Manager-Hilfe -> Vorschau und Debugging support.google.com/tagmanager/ answer/2695660

Die Beispiel Container importieren

Um Zeit zu sparen, haben Sie jetzt die tolle Möglichkeit, unsere fertigen Container Beispiele in den Tag Manager zu importieren. Der Google Tag Manager wird danach selbst alle notwendigen IDs ersetzen, Sie müssen nichts mehr machen.

So importieren Sie die Container:

gtm_importieren

Beispiele

Die folgenden Code-Snippets zeigen beispielhaft, wie die Tags verschiedener Anbieter im Tag Manager konfiguriert sein müssen. Die definierten Parameter korrespondieren mit den Data-Layern der Magento Extension.

Criteo

Criteo Homepage Tag

  • Tag-Name: Criteo Homepage Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Homepage Rule”
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js" async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
 { event: "setAccount", account: {{CriteoPartnerID}} },
 { event: "setHashedEmail", email: {{CriteoHashedEmail}} },
 { event: "setSiteType", type: {{CriteoSiteType}} },
 { event: "viewHome" }
);
</script>

Criteo Listing Tag

  • Tag-Name: Criteo Listing Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Listing Rule”
1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js"
async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
 { event: "setAccount", account: {{CriteoPartnerID}} },
 { event: "setHashedEmail", email: {{CriteoHashedEmail}} },
 { event: "setSiteType", type: {{CriteoSiteType}} },
  { event: "viewList", item: {{CriteoProductID}} }
);
</script>

Criteo Product Tag

  • Tag-Name: Criteo Product Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Product Rule”
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js"
async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
 { event: "setAccount", account: {{CriteoPartnerID}} },
 { event: "setHashedEmail", email: {{CriteoHashedEmail}} },
 { event: "setSiteType", type: {{CriteoSiteType}} },
 { event: "viewItem", item: {{CriteoProductID}} }
); </script>

Criteo Basket Tag

  • Tag-Name: Criteo Basket Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Basket Rule”
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js"
async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
 { event: "setAccount", account: {{CriteoPartnerID}} },
 { event: "setHashedEmail", email: {{CriteoHashedEmail}} },
 { event: "setSiteType", type: {{CriteoSiteType}} },
 { event: "viewBasket", item: {{CriteoProductID}} }
); </script>

Criteo Transaction Tag

  • Tag-Name: Criteo Transaction Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Success Rule”
1
2
3
4
5
6
7
8
9
10
<script type="text/javascript" src="//static.criteo.net/js/ld/ld.js"
async="true"></script>
<script type="text/javascript">
window.criteo_q = window.criteo_q || [];
window.criteo_q.push(
 { event: "setAccount", account: {{CriteoPartnerID}} },
 { event: "setHashedEmail", email: {{CriteoHashedEmail}} },
 { event: "setSiteType", type: {{CriteoSiteType}} },
 { event: "trackTransaction" , id: {{transactionId}}, item: {{CriteoProductID}} }
); </script>

Intelliad

Intelliad Transaction Tag

  • Tag-Name: Intelliad Transaction Tag
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Success Rule”
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script language="JavaScript" type="text/javascript">
    //<!--[CDATA[
    var ia_tp="t23.intelliad.de/tc2.js";
    var ia_v="{{transactionTotal}}"; // conversion value (i.e. "2.5") [mandatory]
    var ia_vz="sa"; // conversion type (possible values: sale ---> "sa", lead -> "le", signup -> "si", pageview -> "pa", download -> "do") [mandatory]
    var ia_vv="{{transactionCurrency}}"; // conversion currency code(ACCORDING ISO 4271 i.e. "EUR" or "USD") [optional,if not given "EUR" is used as default]
    var ia_po="{{transactionId}}"; // orderId [optional]
    var ia_c1=""; // custom value 1 [optional]
    var ia_c2=""; // custom value 2 [optional]
    var ia_c3=""; // custom value 3 [optional]
    var ia_c4=""; // custom value 4 [optional]
    var ia_pi="{{IntelliadProductIds}}"; // productIds (if more than 1 seperate with | e.g. "12356|56899") [optional]
    var ia_cl="XXXXXXXXXXXXXXXXX";
    var ia_rand = Math.floor(Math.random()*11111139435231);
    var ia_link=ia_tp+'?cl='+ia_cl+'&v='+ia_v+'&vz='+ia_vz+'&vv='+ia_vv+'&po='+ia_po+'&c1='+ia_c1+'&c2='+ia_c2+'&c3='+ia_c3+'&c4='+ia_c4+'&pi='+ia_pi+'&rand='+ia_rand;
    document.write('<sc'+'ript src="'+'http'+(document.location.protocol=='https:'?'s':'')+'://'+ia_link+'"></sc'+'ript>');
//]]>
</script>
<noscript>
<img src="//t23.intelliad.de/tc.php?cl=XXXXXXXXXXXXXXXXX&v={{transactionTotal}}&vz=sa&vv=&po={{transactionId}}&c1=&c2=&c3=&c4=&pi={{IntelliadProductIds}}" width="1" height="1" alt="intelliAd" />
</noscript>
  • Achtung “document.write” unterstützen, muss auf “Ja” gestellt sein!

Zanox

Zanox Tracking Code Sale

  • Tag-Name: Zanox Tracking Code Sale
  • Tag-Typ: “Benutzerdefiniertes HTML-Tag”
  • Auslösungsregeln: “Success Rule”
1
2
3
4
5
<script type="text/javascript" src="https://ad.zanox.com/pps/?XXXXXXXXXXXXXXXXX&mode=[[1]]&CustomerID=[[{{VisitorID}}]]&OrderID=[[{{transactionId}}]]&CurrencySymbol=[[{{transactionCurrency}}]]&TotalPrice=[[{{transactionSubtotal}}]]&PartnerID=[[{{ZanoxPartnerID}}]]">
</script>
<noscript>
<img src="https://ad.zanox.com/pps/?XXXXXXXXXXXXXXXXX&mode=[[2]]&CustomerID=[[{{VisitorID}}]]&OrderID=[[{{transactionId}}]]&CurrencySymbol=[[{{transactionCurrency}}]]&TotalPrice=[[{{transactionSubtotal}}]]&PartnerID=[[{{ZanoxPartnerID}}]]" width="1" height="1" />
</noscript>