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?

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

01_gwo_startseite-650x232
Nachdem man sich ein Konto erstellt hat bzw. in das Konto eingeloggt hat, legt man einen neuen Test an.

Schritt 2: Multivariates Experiment

02_gwo_test_erstellen-650x411
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.
03_gwo_multivariater_test-650x581
Man erhält eine Übersichtsseite, bei der man bestätigt, die entsprechenden Schritte durchgeführt zu haben.

Schritt 3: Eingabe der Daten

04_gwo_identifizieren_testseiten-650x595
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.
05_fehlermeldung-650x130

Schritt 4: Javascript installieren

06_installation-650x383
Als nächstes wird man gefragt, wer das JavaScript erstellt. Dies machen wir natürlich selbst.
07_javascript_tags_installieren-633x1024
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.
<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>
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:
08_fehlermeldung

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.
09_javascript_tags_manuell
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

10_javascript_tags_validiert
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

11_variationen_erstellen-650x617
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

12_testvorschau-650x636
Mit der Testvorschau kann man nun seine Eingaben überprüfen und jede einzelne Variation anzeigen lassen.
13_ursprungsversion
Ursprungsversion
14_variante
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

gwo
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



Ein Beitrag von Ralf Siepker
Ralf's avatar

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

Alle Beiträge von Ralf

Kommentare
Ralf Siepker am

GWO wird ja leider zum 1. August 2012 abgeschaltet und durch einfache A/B-Tests direkt in Google Analytics ersetzt. Das ist in der aktuellen Version jedoch keine Alternative.

Wer ein professionelles Tool sucht, sollte mal einen Blick auf http://visualwebsiteoptimizer.com/ werfen. Ein sehr gutes Tool, aber auch nicht gerade günstig. Dafür kann man aber sehr schnell Varianten umsetzen, für die man bei GWO schon einiges an Zeit brauchen würde.

Clicks am

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".

Felix am

Super Artikel! Danke für dieses ausführliche Tutorial.

» Google Website Optimizer - Web Entwicklung & SEO am

[...] 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 [...]

Vinai am

Klasse, endlich wieder eine aktuelle Referenz zu dem Thema! Danke!

Tobias Vogt am

Sehr spannendes Thema, danke!

Dein Kommentar