A/B-Tests für Websites auch ohne Google Optimize

Wir erklären eine mögliche Lösung und geben Dir alle wichtigen Infos an die Hand, um es auch auf Deiner Website einzubauen. Alles was dafür benötigt wird, ist neben einer Absprache mit dem Entwicklerteam ein funktionierender Google Tag Manager (GTM) und ein Google-Analytics-4-Account (GA4).

Was ist ein A/B-Test?

Aber gehen wir nochmal einen Schritt zurück: Was ist eigentlich ein A/B-Test? Mit dem Begriff bezeichnet man ein Experiment, in dem zwei voneinander abweichende Varianten gegeneinander getestet werden. Solche A/B-Test sind gerade im Webdesign und Online Marketing extrem beliebt.

Im Kontext einer Website werden die Nutzer in zwei Gruppen aufgeteilt, denen unterschiedliche Seiten präsentiert werden. Diese Unterschiede können zum einen optisch sein, also z. B. zwei verschiedene Fonts, verschiedene Formulierungen von Überschriften oder die Sortierung von Elementen. Genauso sind aber auch funktionale Unterschiede möglich – also beispielsweise die Verwendung verschiedene Tools zur Newsletter-Anmeldung. Zu beiden Gruppen werden dann Daten erfasst, die uns wiederum ermöglichen, Schlüsse für unsere Website zu ziehen.

Wieso machen wir einen A/B-Test?

Unser Ziel ist es, mit diesen Tests herauszufinden, wie sich Änderungen an der Website auf das Nutzerverhalten auswirken. Dabei unterscheiden sich die Fragen, die wir uns stellen, von Fall zu Fall: Welche Variante sorgt für eine längere Verweildauer? Bei welcher werden mehr Verkäufe generiert? Wo steigt der Warenkorbwert? 

Aus diesen Ergebnissen können dann Schlüsse gezogen werden, die letztlich zur Umsatzsteigerung oder Verbesserung der User Experience dienen.  Schauen wir uns das doch einmal anhand eines Beispiels an:

Wir betreiben einen Onlineshop für Tierfutter und wollen unseren Gesamtumsatz steigern. Bisher bildet unsere Startseite gleichmäßig Katzen- und Hundefutter ab – deutlich mehr unserer Kunden haben aber Hunde. Unsere Idee: Wir wollen nun testen, wie sich unser Umsatz ändern würde, wenn wir ¾ der Startseite mit Hundeprodukten füllen. Wir teilen unsere Nutzer also in einem A/B-Test in zwei Gruppen ein, die unterschiedliche Startseiten präsentiert bekommen: Eine Hälfte die alte Variante (50% Hundefutter und 50 % Katzenfutter), eine Hälfte die neue (75 % Hundefutter und 25 % Katzenfutter).

Zu jedem Nutzer erfassen wir dann die Anzahl der Kaufabschlüsse und den Warenkorbwert pro Kaufabschluss. Ob es einen Unterschied zwischen den beiden Gruppen gibt und ob dieser signifikant ist, können wir dann über statistische Tests prüfen – aber das ist ein Thema für einen späteren Blogpost. Für heute konzentrieren wir uns darauf, wie wir den A/B-Test auf Deiner Website aufsetzen.

A/B-Tests über Cookies – wie funktioniert unsere Lösung?

Unsere Lösung, um auch ohne Google Optimize einfache A/B-Tests durchzuführen, funktioniert über Cookies. Beim Besuchen der Website wird über einen Custom HTML-Tag ein Cookie geschrieben, der die Nutzer in zwei Kategorien, der Test- und Kontrollgruppe,  gleichmäßig einteilt:

<script>
  var rand_nmbr = Math.random(); //generates random number between 0 and 1
  var d = new Date();
  d.setTime(d.getTime()+1000*60*60*24*60); //determines expiration of cookie (here 60 days) should be about the length of the test
  var expires = 'expires='+d.toGMTString();
  if(rand_nmbr<0.5){
    document.cookie = 'ab_test_variant=var_a;' 
      + expires 
      +';SameSite=None;Secure;path=/;domain=.' 
      + location.hostname.replace(/^www\./i,""); 
  }
  if(rand_nmbr >= 0.5){
    document.cookie = 'ab_test_variant=var_b;' 
      + expires 
      + ';SameSite=None;Secure;path=/;domain=.'
      + location.hostname.replace(/^www\./i,""); 
  }
</script>

Dabei erzeugen wir zunächst eine zufällige Zahl zwischen 0 und 1 (Zeile 2) und basierend auf dieser bekommen die Nutzer einen Cookie mit unterschiedlichen Variablen zugeteilt. Ist ihre Zufallszahl kleiner als 0,5 ist ‘ab_test_variant’ gleich ‘var_a’ (Zeile 7 bis 12) ist die Zahl größer gleich 0,5 ist ‘ab_test_variant’ gleich ‘var_b’ (Zeile 13 bis 18).  

Achtung: Da wir hier mit einer Zufallsvariable arbeiten, funktioniert die gleichmäßige Verteilung in Testgruppen besser, je größer die Anzahl der Nutzer ist.

Zudem setzen wir einen Verfallszeitpunkt für den Cookie – in dem Beispielcode 60 Tage (Zeile 3 bis 5).

Unseren Custom HTML-Tag, der den Cookie erzeugt, bauen wir über den Google Tag Manager ein, sodass der Code jederzeit einfach angepasst werden kann.

Wichtig ist es dabei, dass wir darauf achten, den Code nur einmal pro Nutzer auszuführen. Das können wir entweder direkt im HTML-Code regeln oder wir nutzen dafür den Trigger des Custom-HTML-Tags im Google Tag Manager. Im Folgenden beschreiben wir die erste Möglichkeit. Dafür erstellen wir erst die Variable des First Party Cookies, also die Variable über die wir unsere beiden Gruppen aufsplitten.

Diese Variable können wir nun im Custom-HTML-Tag nutzen, um den Cookie nur zu setzen, wenn er nicht zuvor bereits gesetzt wurde. Wir ergänzen unseren Code also noch um eine If-Clause (Zeile 2 + 20), sodass er dann folgendermaßen aussieht:

<script>
  if(!{{1st Party Cookie - ab_test_variant}}){
    var rand_nmbr = Math.random(); //generates random number between 0 and 1
    var d = new Date();
    d.setTime(d.getTime()+1000*60*60*24*60); //determines expiration of cookie (here 60 days) should be about the length of the test
    var expires = 'expires='+d.toGMTString();
    if(rand_nmbr<0.5){
      document.cookie = 'ab_test_variant=var_a;' 
        + expires 
        +';SameSite=None;Secure;path=/;domain=.' 
        + location.hostname.replace(/^www\./i,""); 
    }
    if(rand_nmbr >= 0.5){
      document.cookie = 'ab_test_variant=var_b;' 
        + expires 
        + ';SameSite=None;Secure;path=/;domain=.'
        + location.hostname.replace(/^www\./i,""); 
    }
  }
</script>

Basierend auf der Einteilung des Cookies in ‘var_a’ und ‘var_b’ werden dann auf der Website verschiedene Elemente geladen – an dieser Stelle benötigt es die Zusammenarbeit mit dem Entwicklerteam, um diese Abhängigkeit von dem Cookiewert einzubauen. In unserem Online-Tierfutter-Beispiel würden abhängig von dieser Variable dann die verschiedenen Startseiten geladen.

Wie bekommen wir die Testgruppen in GA4?

Der Cookie wird nicht nur als Variable für den Aufruf der Website genutzt – über ihn können auch in GA4 die Nutzer den beiden Varianten zugeordnet werden. Dafür müssen wir lediglich im GTM die First-Party-Cookie-Variable im GA4 Config Tag als Event-Parameter zusätzlich übergeben.  Achtung: Sollte die Website eine Single Page Application (SPA) sein, dann sollte die Variable auch allen weiteren GA4-Tags hinzugefügt werden, damit sie bei jedem Event auf dem neuesten Stand ist. 

Nun können wir in GA4 die Nutzer in Startseite A und Startseite B aufteilen – und haben so den kompletten Baukasten der Google-Analytics-Werte zur Verfügung. Sei es die durchschnittliche Sitzungsdauer, Anzahl der Klicks, die Anzahl der Abschlüsse oder den durchschnittlichen Warenkorbwert.

Für einen oberflächlichen Überblick reicht dies bereits als Test. Wir können direkt ablesen, bei welcher Variante der Warenkorbwert im Schnitt höher ist oder wo mehr Abschlüsse getätigt werden.

Der nächste Schritt wäre es dann, mögliche Unterschiede über tiefergehende statistische Tests auf ihre Signifikanz zu prüfen – ein Thema, dem wir uns in Teil 2 widmen werden.

‍