Google-Analytics
Shop-Front Einstellungen
In den Shop-Front Einstellungen muss unter "Code einbinden / Google Analytics & Adwords" die Auswahl "Google Analytics Enhanced Ecommerce verwenden" getroffen werden.Im Feld "Google Analytics Enhanced Ecommerce User ID" muss die von Google erhaltene User ID eingetragen werden.
Nach Änderungen muss der Shop dann neu erzeugt und publiziert werden, damit sich diese Online auswirken.
Shop-Front
An der Shop-Front sind im Standard Shop keine weiteren Anpassungen notwendig.Für vom Standard abweichende Checkout Abfolgen müssen evtl. Sections angepasst, bzw. an anderen Stellen eingefügt werden.
Standard Integration
Im Seiten Template müssen im Head Bereich das Tag "Page.EmbedGoogleAnalytics" und am Ende von Body das Tag "Page.EmbedCodeBodyEnd" enthalten sein.Produkte
Es wird die Detail Seite erfasst, sowie die Benutzer Interaktionen (z.B. Klicks auf "In den Korb")Produktlisten
Auch hier werden Benutzer Interaktionen und Produktdaten erfasst.Checkout
Im Standard werden im Checkout 5 Schritte auf folgenden Seiten erfasst:- Warenkorb / Section "GA_Checkout_Step_1"
- Login / Section "GA_Checkout_Step_2"
- Bestelloptionen / Section "GA_Checkout_Step_3"
- Bestellübersicht / Section "GA_Checkout_Step_4"
- Bestellung OK / Container "Container_OrderSubmitOK_Snippets" / Section "GA_Checkout_Purchase"
Eigene Anpassungen
Solche Anpassungen sollten nur von Experten vorgenommen werden, da diese die von Google erfassten Statistiken beeinflussen und ggf. unerwünschte Trackingdaten erzeugen.Allgemein
Um Daten richtig zu erfassen müssen folgende Schritte beachtet werden:data-ga Attribut mit GA.productID als Wert (damit später die passenden Produktdaten verwendet werden)
action Tag (weiter unten beschrieben) mit passendem CSS Selektor (CSS Query)
Es empfiehlt sich auf die Verwendung in den Standard Sections zu achten und sich daran zu orientieren.
Zudem muss bedacht werden, dass ein Mix aus Standard Sections (Standard Tracking) und eigenen Anpassungen ungewollte Effekte mit sich bringen kann.
selector
Ein gültiger CSS Selektor / CSS Query, so wie man sie auch bei z.B. jQuery verwenden würde.Der Selektor zeigt dabei i.d.R. auf das Element welches getrackt werden soll und welches das HTML Attribut "data-ga" enthält (sofern notwendig)
event
Optionaler Parameter, ein Javascript Event z.B. 'click' (Standard)Action Tags
addAddBasketListener [event] selector
Wird verwendet um das Hinzufügen eines Produkts in den Warenkorb zu tracken.Beispiel anhand der Detail Seite eines Produktes
"data-ga" Attribut wird gesetzt
...
<div class="divproductadd">
<span class="art-button-wrapper">
<span class="l"> </span>
<span class="r"> </span>
<input class="art-button" type="submit" value="{?HTMLField.InputValue}" name="{?HTMLField.InputName}" data-ga="{?GA.productID}"/>
</span>
</div>
...
"selector" verweist auf Button
...
<?mst !if Product.Exists?>
<?mst !GA.addProduct ?>
<?mst !GA.addDetailAction ?>
<?mst !GA.addAddBasketListener selector='.divproductadd input[type="submit"]' ?>
...
addRemoveBasketListener [event] selector
Wird verwendet um das Entfernen eines Produktes aus dem Warenkorb zu erfassen.
addClickListener [description] [event] selector [step]
Wird das Event (z.B. 'click') ausgelöst, so wird dies getrackt."description" kann dabei gesetzt werden, um einen Beschreibenden Text zu hinterlegen.
"step" kann gesetzt werden, sollte es sich um einen Checkout Step handeln
addCheckoutAction [step]
Trackt Informationen um welchen Checkout Step es sich handeltaddCheckoutOptionListener [description] [event] selector [step]
Hiermit werden die im Checkout getroffenen Optionen an Google übermittelt."description" kann zwecks besserer Bezeichnung gesetzt werden (kann auch Javascript Code enthalten, um z.B. auf dynamische Werte zugreifen zu können).
"step" ist der Checkout Step
<?mst !GA.addCheckoutOptionListener description="$('.divopt1shipfield select option:selected').text()" selector='.divopt1next input[type="submit"]' step='3' ?>