Türchen 22: Magento und Google Website Optimizer
Beim Website-Optimierungstools handelt es sich um ein Tool von Google, mit dem man die Effiktivität einer Website bzw. eines Magento-Shops verbessern kann, indem man testet, ob durch Änderungen am Inhalt der Seite mehr Conversions erzielt werden. Hierbei legt man fest, welche Seiten oder Teile der einer Seite getestet werden sollen. Hierzu zählen z.B. Überschriften, Bilder, Banner, Werbetexte und ganze Blöcke. Somit lässt sich messbar feststellen, welcher Inhalt den Benutzer am besten anspricht. Vielfach wird nur seitens des Shopbetreibers oder Webdesigners/Programmierers geraten, was besser sein könnte. Ob dies tatsächlich der Fall ist, sind häufig Vermutungen, jedoch keine messbaren Resultate.
Warum Google Website Optimizer?
- GWO ist kostenlos (www.google.com/websiteoptimizer)
- GWO basiert auf Google Analytics
Was sind A/B-Tests?
A/B-Tests testen Varianten kompletter Websites. Die Ursprungsversion wird dabei mit einer oder mehreren Testvarianten verglichen. Der Google Website Optimizer sorgt dafür, das beide Seiten gleich viel Traffic bekommen.
Was sind multivariate Tests?
Bei multivariaten Tests werden mehrere Bereiche gleichzeitig getestet und zu Kombinationen zusammengefasst. Testet man z.B. eine Überschrift, einen Banner und einen Kategorietext, so werden hieraus die Kombinationen erstellt und GWO sorgt dafür, das jede einzelne Variation gleich viel Besucher erhält.
Allgemeine Voraussetzungen
- Magento
- Konto bei Google
- Besucher muss JavaScript und Cookies aktiviert haben
- falls nicht aktiviert, wird dieser nicht gezählt
Google Website Optimizer ist/war in Magento vorhanden
Der Google Website Optimizer ist seit Magento 1.1 verfügbar und bezieht sich auf Produkte, Kategorien und CMS-Seiten. Leider konnten mit diesem Modul jedoch keine seitenübergreifenden Tests durchgeführt werden. Will man z.B. den Warenkorb-Button auf jeder Listen- und Detailseite ändern, ist dies mit Hausmitteln nicht möglich gewesen. Mit dem Update auf Magento 1.6.1 wurde dieses Modul auch wieder entfernt und wird zukünftig als Core-Extension verfügbar sein, siehe Changelog. Deshalb werde ich auf diese Funktionen nicht weiter eingehen.
Umsetzung per Hand
Damit man komplette Workflows und seitenübergreifende Experimente durchführen kann, ist ein wenig Handarbeit notwendig. Dieses möchte ich hier Schritt für Schritt illustrieren.
Schritt 1: Erstellen eines neues Experiments
Nachdem man sich ein Konto erstellt hat bzw. in das Konto eingeloggt hat, legt man einen neuen Test an.
Schritt 2: Multivariates Experiment
Auf der nächsten Seite wird man gefragt, ob man einen A/B-Test oder einen multivariaten Test anlegen möchte. Für dieses Beispiel konzentriere ich mich auf die multivariaten Tests.
Man erhält eine Übersichtsseite, bei der man bestätigt, die entsprechenden Schritte durchgeführt zu haben.
Schritt 3: Eingabe der Daten
Im weiteren Schritt gibt man den Namen des Experiments ein, welche Seite man testen möchte und auf welcher Seite sich das Script befindet wird, das eine erfolgreiche Conversion zählt.
Wichtig:
Diese Daten dienen GWO nur zur Überprüfung, ob das später zu installierende JavaScript an die richtige Stelle kopiert wurde. Da die Success-Seite bei Magento für Google nicht erreichbar ist, werden wir in einem der nächsten Schritte diese Prüfung per Hand vornehmen.
Bestätigt man dann in dieser Stelle mit dem Button weiter, erfolgt eine Fehlermeldung. Hier muss man bestätigen, das die eingegebenen URLs richtig sind.
Schritt 4: Javascript installieren
Als nächstes wird man gefragt, wer das JavaScript erstellt. Dies machen wir natürlich selbst.
Somit erhalten wir jetzt verschiedene Scripte, die wir in unsere Magento-Templates integrieren müssen.
- Kontroll- und Trackingscript
- Seitenbereiche
- Conversionscript
Schritt 5: JavaScript zum Einbau in die eigene Seite
Es gibt verschiedene Möglichkeiten, die Scripte zu installieren. Zur Illustration wähle ich an dieser Stelle mal den einfachen Weg und gehe davon aus, das die Templates in app/design/frontend/default/default/template liegen. Eine alternative Möglichkeit wäre z.B. die Einrichtung von statischen Blöcken, die per XML eingebunden und über das Backend gepflegt werden können.
Kontroll- und Trackingscript: app/design/frontend/default/default/template/page/head.phtml
Dieser Bereich wird direkt in den oberen Bereich geschrieben.
<!-- Google Website Optimizer Control Script -->
<script>
function utmx_section(){}function utmx(){}
(function(){var k='0327200871',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>
<!-- End of Google Website Optimizer Control Script -->
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['gwo._setAccount', 'UA-5234811-12']);
_gaq.push(['gwo._trackPageview', '/0327200871/test']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
Seitenbereiche: app/design/frontend/default/default/template/catalog/product/list.phtml
Im Kopf der list.phtml habe ich einen Bereich definiert, mit dem ich allgemein das CSS dieser Seite beinflussen möchte.
<script>utmx_section("Green Button")</script>
<style type="text/css"></style>
</noscript>
Im weiteren Verlauf des Templates habe ich einen Seitenbereich um den Text des Warenkorb-Buttons gelegt, um diesen anders zu belegen.
<p><button type="button" title="<?php echo $this->__('Add to Cart') ?>" class="button btn-cart" onclick="setLocation('<?php echo $this->getAddToCartUrl($_product) ?>')">
<span><span><script>utmx_section("Add to Cart")</script><?php echo $this->__('Add to Cart') ?></noscript></span></span>
</button></p>
Conversionscript: app/design/frontend/default/default/template/checkout/success.phtml
Im der Success-Seite wird das Script direkt im oberen Bereich platziert.
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['gwo._setAccount', 'UA-5234811-12']);
_gaq.push(['gwo._trackPageview', '/0327200871/goal']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
Automatische Validierung schlägt fehl
Klickt man nun auf den Button “Seite überprüfen”, so erhält man eine Fehlermeldung, die je nach der Erreichbarkeit der Website wie folgt aussieht:
Schritt 6: Validierung per Hand
Die Validierung muss per Hand erfolgen, da z.B. checkout/success normalerweise nicht erreichbar ist. Deshalb habe ich mir zweite HTML-Dateien per Hand angelegt, die anschließend an dieser Stelle hochgeladen werden.
webguys.html enthält den gespeicherten Source einer beliebigen Kategorie-Seite
webguys_success.html enthält das blanke Conversion-Script (siehe app/design/frontend/default/default/template/checkout/success.phtml)
Schritt 7: Erfolgreiche Validierung
Nach dem Upload per Hand validiert nun die Seite und man kann nun im nächsten Schritt seine Varianten anlegen.
Schritt 8: Anlegen der Varianten
GWO erkennt nun durch den Upload unserer Datei die Seitenbereiche. An dieser Stelle kann man nun neue Variationen hinzufügen.
Im Seitenbereich “Add to Cart” habe ich eine Variation “Buy it now” hinzugefügt. Hier wird einfach nur der Text Add to Cart ausgetauscht.
Buy it now
Im Seitenbereich “Green Button” habe ich eine Variation “Green Button” hinzugefügt. Hier wird per CSS der Button verändert.
<style type="text/css">button.button span {background-color: #A9EA00; border-color: #008800;}</style>
Die Beispiele sind an dieser Stelle natürlich relativ einfach gehalten. In aktuellen Projekten werden z.B. komplette DIV-Blöcke ausgetauscht. Dabei werden alle Versionen für die eine Seite erstellt und die Varianten per CSS mit display:none; ausgeblendet. In den Seitenbereichen von GWO werden dann bei den Varianten der Ursprungsblock versteckt und die Variante dargestellt, so das man hier wenig Overhead hat.
Schritt 9: Preview der Varianten
Mit der Testvorschau kann man nun seine Eingaben überprüfen und jede einzelne Variation anzeigen lassen.
Ursprungsversion
Variante mit grünen Button
Schritt 10: Start des Experiments
Wenn man alles geprüft hat, kann man den Test starten. Folgender Ablauf ergibt sich im Browser des Besuchers
- Javascript wird ausgeführt und Cookie gesetzt
- GWO schaut nach, ob der Kunde bereits eine Variante angezeigt bekommen hat und liefert diese wieder aus
- anonsten wird gleichmässig verteilt ausgeliefert
- per JS wird der Inhalt der Varianten nachgeladen und in die Sections eingesetzt
- an dieser Stelle lassen sich alle möglichen Inhalte einsetzen: Text, Bilder, CSS, Javascript
- somit können z.B. komplette Seitenelemente, z.B. div-Blöcke ausgetauscht werden
Schritt 11: Die Auswertung
Nach einer Laufzeit von mindestens 24 Stunden erkennt man erste Ergebnisse in seinem Google-Konto. Hierbei werden alle Kombinationen aufgeführt und man erkennt, wie diese im Vergleich zu Ursprungsversion konvertieren. Man erkennt Gewinner und Verlierer und eine mögliche Verbesserung wird dargestellt. Somit kann man seine Entscheidungen auf Basis von Fakten fällen, nicht nur auf Vermutungen. Folgende Punkte sollte man jedoch beachten.
- pro Variante sollten mindestens 100 Conversion erfolgen, um ein aussagekräftige Ergebnis zu haben
- bei 12 Varianten benötigt man somit 1200 Conversions
- innerhalb von GWO gibt es ein Tool zum Berechnen der benötigten Conversion
Fazit
Mithilfe von Google Website Optimizer ist es möglich, verschiedene Varianten seines Magento-Shops zu testen und festzustellen, welche Variante am besten konvertiert. Man verlässt sich nicht nur auf sein Gefühl, sondern kann messbare Ergebnisse heranziehen. Um das Prinzip besser zu verstehen, sollte man sich die zahlreichen Hilfestellungen sowie den unten aufgeführten Techie Guide anschauen.
Weiterführende Links
- Google Website Optimizer
- Goolge Techie Guide
- 35 Resources for Getting most out of GWO
- Top Myths about GWO
Der Autor
Ralf Siepker ist freiberuflicher Magento-Entwickler, arbeitet als Programmierer seit 1993 und beschäftigt sich mit PHP und eCommerce seit 1997. Der erste Einsatz von Magento erfolgte Mitte 2008. Anfang 2011 hat er sich selbständig gemacht und konzentriert sich ganz auf Magento. Zu seinem Schwerpunkt zählen Dienstleistungen wie die Umsetzung von Magento-Shops, Modul- und Theme-Entwicklung, Beratung, Support, Migration und Schulungen. Sie erreichen ihn unter http://www.mageconsult.de. Desweiteren bloggt er in unregelmäßigen Abständen unter http://www.magelounge.de
Sehr spannendes Thema, danke!
Klasse, endlich wieder eine aktuelle Referenz zu dem Thema! Danke!
[...] um den Google Website Optimizer korrekt einzusetzen. Doch zum Glück gibt hat Ralf Siepker unter http://www.webguys.de/magento/turchen-22-magento-und-google-website-optimizer/ eine sehr detaillierte Anleitung mit vielen Screenshots veröffentlicht, mit der man den Website [...]
Super Artikel! Danke für dieses ausführliche Tutorial.
Vielen vielen Dank. Ausführlicher kann glaube ich eine Anleitung nicht sein. Respekt! Ein grossen Dank an den Autor und natürlich an den “Webguys”.