Skip to content

Digital Analytics Blog

von Marcus Stade

Menu
Menu
workflow-checkout-abtest

A/B Testing im Checkout Funnel: Dynamische Produktempfehlungen und Hinweis-Banner testen

Posted on 25. August 201925. August 2019 by mstade

Der Checkout-Funnel in Online-Shop ist nicht nur technisch sehr komplex, sondern bietet auch strategisch viele Optionen. Einerseits soll sich im Checkout-Funnel der potentielle Käufer leicht zurechtfinden und nicht durch fehlende Zahlungsmethoden, technische Probleme oder mangelnde Usability noch vor dem Kauf abspringen. Andererseits kann im Checkout auch versucht werden, den Umsatz zu erhöhen. Hinweise zu versandkostenfreier Lieferung bei höheren Warenkorbsummen oder Vorschläge zu weiteren Produkt sind beliebte Maßnahmen. Diese lenken aber den potentiellen Käufer gegebenenfalls im Checkout wieder ab und verhindern den Kaufabschluss. Die Frage stellt sich, welche Methodik bessere Umsätze erzielt. Zum Glück gibt es Google Optimize.

In unserem Demoshop (WordPress mit WooCommerce) soll die Frage beantwortet werden, ob ein Hinweis zum versandkostenfreien Versand ab 50 Euro Warenkorb und der Vorschlag passender Produkte die Umsätze erhöht oder eher senkt, da mehr potentielle Käufer abspringen. Dabei sollen keine Änderungen am Shop direkt vorgenommen werden. Google Optimize ermöglicht das in Kombination mit anderen Produkten.

demoshop-checkout-original
Originalseite des Demoshops

Google Optimize kann einfach in eine Webseite eingebunden werden und ermöglicht die Durchführung von A/B Tests, Multivarianten-Test und vielen mehr. Für das beschriebene Szenario ist ein A/B Test sinnvoll. Das heißt, das wir 50% der User, die auf die Webseite gehen und die Bedingungen erfüllen, die Originalseite sehen, die anderen 50% sehen die mit Optimize veränderte Webseite.

Im Datalayer des Shops ist bereits das Enhanced E-Commerce JSON für Google Analytics und eine Variable mit dem Warenkorbwert namens ecomm_totalvalue vorhanden. Die Werte sind hier für den Checkout-Step nach dem Warenkorb interessant.

demoshop-datalayer-checkout
DataLayer im Checkout des Demoshops

Auf Basis eines Warenkorbwertes unter 50 EUR in ecomm_totalvalue wird der User für den A/B ausgewählt und es wird der Wert im einzublendenden Hinweis „Noch XX Euro bis zur versandkostenfreien Lieferung!“ berechnet. Aus dem Enhanced E-Commerce JSON entnehmen wir die Produkte im Warenkorb und blenden passende Produkte ein.

Der Workflow

Um keine Änderungen am Shop vornehmen zu müssen, wird der Google Tag Manager und Google Optimize auf der Seite genutzt. Im Backend werden aus der Google Cloud Platform die Cloudfunctions und Big Query genutzt, um Produktvorschläge zu generieren. Insgesamt sieht der Workflow wie folgt aus:

workflow-checkout-abtest

Schritt 1: Google Optimze Setup

In Google Optimize erstellen wir zuerst einen A/B Test, unter Angabe der Seite des Checkouts:

demoshop-optimze-createexperience
Erstellen des Tests in Google Optimize

und erstellen im nächsten Schritt eine Variante:

demoshop-optimze-addvariant
Erstellen einer Variante in Google Optimize

Mit Edit neben der Variante bringen wir den Code auf die Seite:

demoshop-optimze-editvariant
Variante im Browser modifzieren

Das Original wird modiziert:

demoshop-checkout-original

In der zu testenden Variante wird der Gutschein-Hinweis durch den Produkthinweis ersetzt:

demoshop-optimze-addhtml
HTML für das Hinweis-Template

HTML Code für das Template inkl. der Produkte:

<div style="background-color: #008000; color: #FFFFFF; padding: 10px;">
  <b> Bestelle für <span id="insertgtmcart"></span> EUR mehr und erhalte deine Lieferung versandkostenfrei!</b>
</div>

<div><div style="width:50%; float:left; background-color: #FFFFFF; padding: 10px;">
  <b><span id="insertgtmtitle1"></span></b><img id="recopic1" src="" width="50" style="float:right;"><br><span id="insertgtmprice1"></span> EUR
</div>
      
<div style="width:50%; float:right; background-color: #FFFFFF; padding: 10px;">
  <b><span id="insertgtmtitle2"></span></b><img id="recopic2" src="" width="50" style="float:right;"><br><span id="insertgtmprice2"></span> EUR
</div>
      
</div>

Die dynamischen Felder (<span id=“…“></span>) sind im Template noch leer und werden durch den Google Tag Manager noch ersetzt. Um sicher zu sein, dass der Google Tag Manager dies nicht zu früh erledigt, wird ein Javascript eingefügt, das Optimize ausführt, wenn das Template auf der Seite vorhanden ist und das Ersetzen der Daten im Google Tag Manager startet. Das erfolgt durch:

demoshop-datalayer-event
Auslösen eines DataLayer Events über Optimize
dataLayer.push({
 'event': 'window'
});

Dieses Event wird dann im Google Tag Manager benötigt. Um das Setup in Optimze abzuschließen, fehlen noch zwei Einstellungen. Einerseits sollen nur User für den Test ausgewählt werden, deren Warenkorbwert unter 50 EUR liegt. Den Warenkorbwert finden wir in der DataLayer-Variablen ecomm_totalvalue. Google Optimize kann direkt darauf zugreifen. Unter dem Menüpunkt Audience Targeting kann die Regel DataLayer Variable gewählt werden:

demoshop-datalayer-variable
dataLayer Variablen in Google Optimize nutzen

Nachdem die Variable erstellt wurde:

demoshop-datalayer-variableconfig
dataLayer Variablen in Google Optimize erstellen

kann diese als Bedingung genutzt werden.

demoshop-datalayer-variablerule
dataLayer Variablen in Google Optimize für Regeln nutzen

Zudem muss Google Optimize mit Google Analytics verbunden werden:

demoshop-optimize-analytics
Google Analytics mit Google Optimize verbinden

Im gewählten View sollte Enhanced E-Commerce aktiviert sein, da sonst Umsätze und Transaktionen nicht als Ziele des Tests gewählt werden können:

demoshop-optimize-objectives
Objectives in Google Optimize

Als Ziele des Tests wird der Umsatz und sekundär die Transaktionen festgelegt:

demoshop-optimize-testobjectives
Test-Objectives in Google Optimize

Damit ist das Google Optimize Setup abgeschlossen. Bevor der Test gestartet werden sollte, muss noch der Google Tag Manager, die Cloudfunction und Big Query eingerichtet werden.

Schritt 2: Big Query

Big Query wird in diesem Fall als Produktdatenbank genutzt. Die Tabelle für diesen Test sieht folgendermaßen aus:

demoshop-schema-bigquery
Big-Query Schema für Produktempfehlungen

Pro Produktnummer sind in der Tabelle mehrere passenden Produktnummern sowie der Produktname, Bild, URL und Preis aufgeführt. Die Priorität gibt die später die Reihenfolge der zurückgelieferten Produkte an.

optimize_bigquery_preview
Beispieldaten für Produktempfehlungen in Big Query

Ein Ansatz zum Aufbau dieser Tabelle kann die Häufigkeit von gemeinsam gekauften Produkten sein. (Siehe: https://www.marcusstade.de/produktkauftracking-mit-bigquery-welche-produkte-werden-haeufig-zusammen-gekauft/) Mit dem Aufbau der Tabelle steht diese nun zur Verfügung. Mit einer Cloudfunction werden nun die Daten abgerufen.

Schritt 3: Cloudfunction

Das Setup der Cloudfunction ist recht einfach. Diese erhält die Produktnummern im Warenkorb, getrennt mit |, als GET Parameter und wandelt diese in ein SQL Statement für den Big Query Table um. Das Ergebnis dieses SQL Statements wird als String wieder zurückgegeben.

Die Daten werden an die Cloudfunction vom Google Tag Manager gesendet und in diesem zurückgeliefert. Die Cloudfunction namens reco-cart sieht dann so aus:

demoshop-optimze-cloudfunction
Beginn der Cloudfunction für Produktempfehlungen

Hier werden die GET Parameter in die Variable products eingelesen und an die Funktion weitergerecht, die den Big Query Table abfragt. Zudem wird das Ergebnis der Abfragen und der Header für die Cross-Origin-Resource-Sharing zurückgeliefert.

Die Funktion findreco_bq baut dann das SQL Statement zusammen. Dabei werden nur Produkte als Empfehlung ausgegeben, die nicht im Warenkorb aktuell liegen. Zwei Produkte, nach Priorität absteigend, werden zurückgeliefert. Der gesamte Code (Python) sieht dann folgendermaßen aus:

demoshop-optimze-cloudfunction-gesamt
Die gesamte Cloudfunction

Zusätzliche Validierungen sind hier sicherlich sinnvoll, bevor dieser produktiv eingesetzt werden kann. Zudem bietet es sich für produktiven Einsatz an, Fallback Produkte zu definieren, die genutzt werden, falls nicht zwei Produkte zurückgeliefert werden können.

Schritt 4: Google Tag Manager

Im Google Tag Manager werden zwei Schritte vollzogen. Einerseits die Berechnung der Differenz zwischen Warenkorb und versandkostenfreier Lieferung. Über ein Custom HTML-Tag wird die Differenz berechnet und in den Platzhalter eingefügt:

demoshop-gtm-cart
Custom HTML Tag im Google Tag Manager zum Einfügen der EUR Werte

Der Trigger für dieses Event ist der von Google Optimize ausgelöste dataLayer.push mit dem Event „window“. Das Ergebnis sieht dann so aus:

demoshop-gtm-cart-result
Ergebnis des Custom HTML Tags bei einem Warenkorbwert von 18.00 Euro

Der zweite Teil ist der Aufruf der Cloudfunction und das Verarbeiten der zurückgelieferten Produkte. Der Aufruf der Cloudfunction erfolgt asynchron mit allen Produkten im Warenkorb. Die Produkte im Warenkorb werden mit einer Javascript-Variablen erfasst:

demoshop-gtm-productids
Erstellen eines String mit den ProduktIDs im Warenkorb getrennt mit |

Diese werden dann asynchron per Javascript in einem Custom HTML Tag an die Cloudfunction gesendet. Sobald das Ergebnis vorliegt, werden die Werte wieder in das Template eingefügt:

demoshop-gtm-productids-tag
Custom HTML Tag zum Abfragen und Einfügen der Produktempfehlungen

Das Ergebnis auf der Shop Seite sieht dann wie folgt aus:

demoshop-gtm-productids-result
Ergebnis des Custom HTML Tags das das Produkttemplate befüllt

Das Design kann natürlich individuell angepasst werden. Nachdem die Cloudfunction deployed, und der Google Tag Manager Workspace veröffentlicht wurde, kann der Test in Google Optimize gestartet werden. Nach einigen Tagen sollten dort Daten auflaufen.

1 thought on “A/B Testing im Checkout Funnel: Dynamische Produktempfehlungen und Hinweis-Banner testen”

  1. Pingback: BP 3.02: Google Analytics und Google Ads Podcast

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Keep in Touch

Supporter: InPignus GmbH

ImPignus

mohrstade

mohrstade.de

Analytics Pioneers

Schlagwörter

App+Web App-Tracking Basic Big Query Customer Data Platform DataQuality DataStudio Events Google Analytics für Firebase ITP Machine Learning Property PWA Quick-Tipp User-Journey Wordpress Überblick

Podcast Empfehlung:

beyond pageview

Neueste Beiträge

  • Tag Management Platform: Commanders Act Platform X – DataCollection (Teil 2)
  • Tag Management Platform: Übersicht (Teil 1)
  • IP und User Agent Identifier: Nachteile
  • GA4 Recipes: Machine Learning Features für Predictive Audiences in anderen Tools nutzen, am Beispiel von Tealium AudienceStream
  • Quick Tipp: GA4 Configuration Tag vs. Universal Analytics Setting Variable – Sequence matters

Kategorien

  • Allgemein
  • Cloud
  • Dashboard
  • Firebase Analytics
  • Google Analytics
  • Google Analytics 4 (App+Web)
  • Google Optimize
  • Google Tag Manager
  • Machine Learning
  • Matomo
  • Tag Management

Links

  • Datenschutzerklärung
  • Hear Me Speak
  • Impressum
  • Meet & Eat
  • Über den Blog
©2023 Digital Analytics Blog | Built using WordPress and Responsive Blogily theme by Superb