A/B-Tests einfach mit dem etracker Tag Manager umsetzen

Einleitung

Haben Sie sich schon einmal gefragt, ob ein roter „Kaufen“-Button häufiger geklickt wird als ein grüner? Oder ob eine andere Überschrift auf Ihrer Webseite die Absprungrate senken könnte? Im Webcontrolling gibt es darauf eine klare Antwort: Raten Sie nicht – testen Sie es!

Mit A/B-Tests spielen Sie zwei oder mehr Varianten einer Webseite zufällig an Ihre Besucher aus. Die eine Hälfte sieht Version A (das Original), die andere Hälfte Version B (die veränderte Variante). Am Ende entscheiden die nackten Zahlen in Ihren Reports, welche Version erfolgreicher war. Der Vorteil für Sie liegt auf der Hand: Sie optimieren Ihre Website datenbasiert, steigern die Conversion Rate und holen das Maximum aus Ihrem Traffic heraus.

Die Hürde: Fehlende Funktionen im CMS oder Shop-System

Die Theorie klingt einfach, doch in der Praxis scheitert es oft an der Technik. Viele Content-Management-Systeme (CMS) oder Shop-Systeme bieten von Haus aus keine integrierte Funktion für A/B-Tests. Die Folge? Teure Drittanbieter-Tools müssen her oder die IT-Abteilung muss aufwendig Anpassungen direkt im Website-Code vornehmen. Das kostet Zeit, Budget und Nerven.

Die Lösung: A/B-Testing direkt über den etracker Tag Manager

Wir haben gute Nachrichten für Sie: Mit dem etracker Tag Manager haben Sie bereits alles an Bord, was Sie für erfolgreiche A/B-Tests benötigen!

Sie benötigen kein zusätzliches Modul, keine Programmierkenntnisse und vor allem keinen Zugriff auf den Quellcode Ihrer Website. Der etracker Tag Manager übernimmt das Ausspielen der Varianten quasi „on the fly“ im Browser des Nutzers.

Im Folgenden erfahren Sie, wie Sie ein solches Setup grundsätzlich vorbereiten und wie elegant das Zusammenspiel im Hintergrund funktioniert.

Die Vorbereitung: Was Sie sich vorab überlegen sollten

Bevor Sie den Tag Manager öffnen, legen Sie das Fundament für Ihren Test. Beantworten Sie dafür einfach folgende fünf Fragen:

• Welches Webseiten-Element soll verändert werden? (z. B. die Hauptüberschrift, die Corporate-Farbe eines Buttons oder ein Teaser-Bild)
• Wie genau soll dieses Element in der Variante B aussehen? Definieren Sie hier die konkrete Anpassung, also beispielsweise den neuen Text für die Überschrift oder den exakten Farbwert des Buttons.
• Wie soll die Verteilung des Traffics sein? Entscheiden Sie, wie viel Prozent Ihrer Besucher die neue Variante sehen sollen (klassisch 50/50 oder bei riskanteren Tests vielleicht erst einmal 80/20 zugunsten des Originals).
• Soll sich die Variante für den Besucher gemerkt werden? In der Regel ja, damit ein Nutzer bei einem wiederholten Besuch nicht plötzlich ein anderes Design sieht.
• Was soll das Ziel des Tests sein? Überlegen Sie, woran Sie den Erfolg messen (z. B. mehr Klicks auf ein Element oder mehr Absendungen eines Formulars). Gegebenenfalls bietet es sich an, hierfür vorab eine passende Conversion in etracker einzurichten.

Die Auswertung: Wer gewinnt?

Für die anschließende Erfolgsmessung der Varianten wird die jeweilige Gruppe über ein Dimension-Tag an etracker Analytics übermittelt. Dieses übergibt die Information, in welcher Gruppe sich der Nutzer befindet (z. B. "red"), als "Eigene Dimension" vom Typ „User“ an etracker Analytics.

In Ihren etracker Reports können Sie anschließend das Verhalten der Vergleichsgruppen detailgenau analysieren. Sie sehen sofort, welche Variante zu mehr Klicks, längerer Verweildauer oder höheren Umsätzen geführt hat, und können Ihre Webseite dauerhaft und erfolgreich optimieren.

Datenschutz und Einwilligung beim Einsatz von LocalStorage

Bei der technischen Umsetzung gilt es, zwei wichtige Aspekte bezüglich der Datenspeicherung und des Datenschutzes zu beachten:

• Dauerhaftigkeit der Speicherung: Im Gegensatz zum SessionStorage (der beim Schließen des Browsertabs gelöscht wird) bleibt der im folgenden Beispiel-Skript verwendete LocalStorage standardmäßig auch über die aktuelle Sitzung hinaus im Browser des Besuchers bestehen. Dadurch wird sichergestellt, dass wiederkehrende Nutzer auch bei späteren Besuchen dauerhaft derselben Testvariante zugeordnet bleiben.
• Datenschutzrechtliche Einordnung: Da durch das Skript Daten lokal auf dem Endgerät des Nutzers gespeichert und personenbezogene Daten verarbeitet werden, greifen die Vorgaben des TDDDG sowie der DSGVO. Hierbei muss vorab evaluiert werden, ob der A/B-Test als primär „nutzerorientiert“ eingestuft werden kann. Dient der Test hingegen eher den Interessen des Website-Betreibers, darf die Ausspielung des Tests erst nach erteilter Einwilligung (Opt-In) erfolgen.

Für die Praxis bedeutet das: Liegt keine pauschale Erlaubnis vor, muss über den Tag Manager sichergestellt werden, dass das Custom Event Tag ausschließlich an Nutzer ausgespielt wird, die der Kategorie „Statistik“ im Consent Manager zugestimmt haben.

So funktioniert das Setup im Tag Manager, kurz zusammengefasst

Um den Test technisch umzusetzen, nutzen wir die Bordmittel unseres Tag Managers in Kombination mit den Einstellungen in etracker Analytics. Das Prinzip ist logisch aufgebaut und erfordert das Zusammenspiel von insgesamt fünf Komponenten:

1. Der Trigger: Dieser bestimmt, wann und wo der Test stattfinden soll – beispielsweise genau dann, wenn ein Besucher die entsprechende Webseite aufruft.
2. Ein Custom Event Tag (Benutzerdefiniertes JavaScript): Dieses Tag übernimmt die eigentliche Logik. Es prüft blitzschnell im Hintergrund, ob der Besucher der Website bereits einer Variante (A oder B) zugeordnet wurde. Wenn nicht, nimmt das Tag basierend auf Ihrer gewünschten Verteilung (z. B. 50/50) eine zufällige Zuordnung vor, merkt sich das Ergebnis im LocalStorage des Browsers und überschreibt das Webseiten-Element für den Nutzer der Variante B visuell.
3. Eine Eigene Dimension: Diese legen Sie außerhalb des Tag Managers in etracker Analytics an, um in den Reports eine neue benutzerspezifische Analysegruppe anzeigen zu können.
4. Eine Web Storage Variable: Diese wird im Tag Manager erstellt, um den Wert der Gruppe (z. B. „green“ oder „red“) direkt aus dem LocalStorage des Browsers auszulesen.
5. Ein Dimension-Tag: Dieses Tag verknüpft die Variable mit der Eigenen Dimension und sorgt schließlich dafür, dass die Information, in welcher Gruppe sich der Nutzer befindet, vollautomatisch an Ihre Reports übermittelt wird.

Noch einfacher für JustRelate "Home" Kunden: Erstellung per KI-Prompt

Für alle Kunden, die unsere Plattform JustRelate „Home“ im Einsatz haben, wird das Aufsetzen eines solchen A/B-Tests sogar noch komfortabler. Sie müssen die benötigten Komponenten (Tags, Trigger, Variablen, Eigene Dimensionen) nicht einmal manuell konfigurieren.

Beschreiben Sie Ihr Vorhaben einfach in natürlicher Sprache innerhalb unseres AI Assistenten. Die künstliche Intelligenz erstellt dann im Handumdrehen die passenden Elemente für Sie.

(Klicken Sie auf das Vorschaubild, um den Screenshot in voller Größe anzuzeigen / herunterzuladen.)

Schritt-für-Schritt-Anleitung: So richten Sie Ihren ersten A/B-Test ein

Folgen Sie diesen Schritten, um den A/B-Test und die dazugehörige Auswertung aufzusetzen. Passen Sie dabei lediglich das zu ändernde Website Element und die gewünschten Varianten sowie die Verteilung an Ihre Bedürfnisse an.

Erstellen des Triggers

Zuerst definieren wir, wann und auf welcher Seite der A/B-Test aktiv werden soll. Erstellen Sie dazu im etracker Tag Manager einen neuen Trigger. Wählen Sie als Bedingung beispielsweise den gezielten Seitenaufruf der Webseite aus, auf der das zu testende Element liegt.

Erstellen des Custom Event Tags

Nun legen wir das Herzstück des Tests an: Das Tag, welches die Logik steuert und das Design im Browser des Nutzers anpasst. Erstellen Sie ein neues Tag vom Typ Custom Event Tag.

• Wichtig für die Ausführung: Verknüpfen Sie dieses Tag mit dem in Schritt 1 erstellten Trigger.
• Wichtige Einstellung: Stellen Sie in den Tag-Optionen ein, dass dieses Tag im HTML BODY ausgeführt werden soll, damit das Webseiten-Element beim Ausführen des Codes bereits im Browser geladen ist.

Fügen Sie in dieses Tag das folgende JavaScript-Code ein:

<script>
(function() {
  // 1. Definition of the LocalStorage key and the test variants
  var STORAGE_KEY = 'ab_button_color';
  var variants = ['green', 'red'];

  // 2. Check if the visitor has already been assigned to a variant
  var variant = localStorage.getItem(STORAGE_KEY);
  if (!variant) {
    // If not, randomly assign green (50% chance) or red (50% chance) zugeordnet
    variant = variants[Math.random() < 0.5 ? 0 : 1];
    localStorage.setItem(STORAGE_KEY, variant);
  }

  // 3. Function for the visual adjustment of the element on the website
  function applyVariant() {
    // The CSS selector targets the specific element
    var el = document.querySelector('#cc-m-12550600721 > div > a');
    if (el) {
      el.style.backgroundColor = variant; // Background color is set to the determined variant
    }
  }

  // 4. Ensure that the script only runs once the element is loaded
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', applyVariant);
  } else {
    applyVariant();
  }
})();
</script>

Wichtiger Hinweis zum Kopieren dieses Codes: Bitte beachten Sie, dass es sich hierbei um ein konkretes Anwendungsbeispiel handelt. Wenn Sie diesen Code für Ihre eigene Website kopieren, müssen Sie den CSS-Selektor, den Stil (oder den Inhalt des Elements) sowie die entsprechenden Werte an Ihre Bedürfnisse anpassen.

Was passiert in diesem Code? Das Skript definiert zunächst einen festen Speicherplatz (ab_button_color) im Browser des Nutzers sowie die zwei Testfarben Grün und Rot. Beim Seitenaufruf wird blitzschnell geprüft, ob der Nutzer schon einmal da war und bereits eine Farbe zugewiesen bekommen hat. Ist das nicht der Fall, entscheidet der Zufall (zu jeweils 50 Prozent), ob der Nutzer Gruppe „Grün“ oder Gruppe „Rot“ zugeordnet wird. Diese Entscheidung wird im LocalStorage dauerhaft gemerkt. Schließlich sucht das Skript über den von Ihnen hinterlegten CSS-Selektor nach dem exakten Element auf Ihrer Website und ändert die Hintergrundfarbe.

Eigene Dimension in etracker Analytics anlegen

Damit die Daten nicht nur im Browser des Nutzers bleiben, sondern auch in Ihren Reports auftauchen, müssen wir etracker Analytics darauf vorbereiten. Navigieren Sie außerhalb des Tag Managers in Ihrem etracker Account zu Account > Datenanreicherung > Eigene Dimensionen und legen Sie eine neue Dimension vom Typ "User" an (z. B. mit dem Namen „A/B-Test Btn-Color“).

LocalStorage-Variable im Tag Manager anlegen

Wechseln Sie zurück in den etracker Tag Manager. Wir müssen dem Tag Manager beibringen, wie er den Wert aus dem Browser des Nutzers ausliest. Erstellen Sie eine neue Variable vom Typ "Web Storage". Als Speicher-Typ wählen Sie Local Storage und tragen bei „Key“ exakt den Schlüsselnamen aus unserem Skript ein: ab_button_color.

Dimension-Tag zur Datenübergabe erstellen

Jetzt verknüpfen wir die Variable mit der Dimension. Erstellen Sie ein neues Tag vom Typ "Dimension".

• Nutzen Sie hierbei exakt denselben Trigger aus Schritt 1 (den Seitenaufruf).
• Wählen Sie im Tag die in Schritt 3 angelegte Eigene Dimension aus und befüllen Sie diese mit dem Wert der in Schritt 4 erstellten Web Storage Variable.

Sobald Sie die Änderungen im Tag Manager publiziert haben, wird bei jedem qualifizierten Seitenaufruf die jeweilige Gruppe des Nutzers vollautomatisch an etracker Analytics übermittelt.

Live-Test in den Browser-Entwicklertools (Debugging)

Um direkt zu sehen, ob das Setup funktioniert, müssen Sie nicht erst auf die Datenverarbeitung in den Reports warten. Öffnen Sie einfach Ihre Webseite, machen Sie einen Rechtsklick und wählen Sie „Untersuchen“ (oder drücken Sie F12), um die Entwicklertools des Browsers zu öffnen. Wechseln Sie in den Reiter "Network" (Netzwerk) und geben Sie in das Filterfeld den Begriff cntcc ein.

Wenn Sie die Seite nun neu laden (im Debug Modus darauf achten, dass “Tags tatsächlich auslösen” aktiviert ist), sehen Sie den etracker-Tracking-Aufruf. Klicken Sie darauf und suchen Sie in den Parametern nach Einträgen wie et_seg1 bis et_seg5 (je nachdem, an welcher Stelle Sie Ihre Eigene Dimension angelegt haben). Dort sehen Sie direkt den übergebenen Wert ("green" oder "red").

Die Auswertung in den etracker Reports

Nachdem der Test über einen ausreichenden Zeitraum aktiv war, können Sie mit der Analyse der Daten beginnen. Öffnen Sie hierzu Ihre Reports in etracker Analytics. Durch das Hinzufügen der neuen Dimension, dem Konfigurieren eines Filters oder dem Anlegen von Segmenten lässt sich die Performance von Variante A und Variante B direkt gegenüberstellen.

Sie sehen auf einen Blick, welche Option zu mehr Conversions, einer höheren Klickrate oder einer längeren Verweildauer geführt hat, und können Ihre Webseite auf Basis dieser validen Nutzerdaten gezielt optimieren.

Die neue “Eigene Dimension” im Report anzeigen:

Sie können die neue Eigene Dimension in Ihre Reports mit aufnehmen und an eine beliebige Position in der Reihenfolge der Dimensionen bewegen.

Die neue “Eigene Dimension” in einem Filter anwenden:

Rechts oben in den Reports haben Sie die Möglichkeit nach bestimmten Dimensionen zu filtern, oder diese auszuschließen.

Segmente basierend auf der “Eigenen Dimension” erstellen:

Mit Hilfe von Segmenten können Sie ebenfalls nach der eigenen Dimension in Kombination mit den entsprechenden Werten filtern und die Segmente dann gleichzeitig im Report anzeigen.

Fazit: Datengestützte Optimierung leicht gemacht

A/B-Tests müssen weder teuer noch technisch komplex sein. Mit dem etracker Tag Manager steht Ihnen ein mächtiges Werkzeug zur Verfügung, um Optimierungspotenziale auf Ihrer Website ohne Anpassungen am Quellcode aufzudecken. Von der strategischen Vorbereitung über das technische Setup bis hin zur statistisch abgesicherten Auswertung in den etracker Analytics Reports lässt sich der gesamte Prozess nahtlos abbilden. Nutzen Sie diese Möglichkeit, um Design-Entscheidungen nicht länger aus dem Bauch heraus zu treffen, sondern Ihre Conversion Rate nachhaltig auf Basis echter Nutzerdaten zu steigern.