A/B-Tests mit dem Mutation Observer von JavaScript: Ein Game-Changer

Dieser Artikel richtet sich an technisch orientierte A/B-Testing-Nutzer

A/B-Tests sind seit langem der beste Freund des Marketers. Diese Tests ermöglichen Websites, zwei verschiedene Versionen von Inhalten zu präsentieren, um zu beurteilen, welche der beiden Varianten besser abschneidet. In der technisch versierten Welt, in der die meisten A/B-Tests die dynamische Änderung von Website-Elementen beinhalten, sticht der Mutation Observer von JavaScript hervor. Lassen Sie uns das einmal genauer unter die Lupe nehmen.

Inhalt

Was ist der Mutation Observer?

Der Mutation Observer ist eine leistungsstarke JavaScript-API, die es Entwicklern ermöglicht, Änderungen im Document Object Model (DOM) der Website zu überwachen. Unabhängig davon, ob Elemente hinzugefügt, entfernt oder geändert werden – der Mutationsbeobachter zeichnet diese Änderungen auf. Dieser wird somit zu einem unverzichtbaren Werkzeug, insbesondere wenn Sie in Ihren A/B-Tests auf dynamische Änderungen der Seite reagieren möchten.

Beispiel: Tauschen von Bildern mit dem Mutation Observer

Stellen Sie sich vor, Sie möchten testen, welches Produktbild bei den Besuchern Ihrer E-Commerce-Website besser ankommt. In Ihrem Online-Shop haben Sie zum einen Product Detail Pages (PDP, dt. Produktdetailseite) und zum anderen Product Listing Pages (PLP, dt. Produktübersichtsseite). Auf den PDPs können sich Bilder dynamisch ändern, z.B. wenn Sie auf eine andere Produktfarbe klicken. Auf der PLP können Sie zusätzlich Filter anwenden, die die Produktkarten neu rendern. Wenn Sie die Bilder also nur einmal ändern, werden nach einer Änderung die Originalbilder angezeigt und nicht die neuen Bilder, die Sie testen möchten.

Hier erfahren Sie, wie Sie den Mutation Observer nutzen können, um Bilder dynamisch auszutauschen:

  1. Zuerst verwenden wir den Mutation Observer-Konstruktor mit einer inneren Funktion, mit dem wir alle Seitenmanipulationen durchlaufen können.
  2. Als nächstes durchlaufen wir im Code für jede Seitenmanipulation alle SKUs, in denen wir das Bild ändern möchten. In der Schleife suchen wir nach dem Bild, das manipuliert wurde.
  3. Für jede Stock Keeping Unit (SKU) fragen wir das Bildelement auf der Seite ab. Wenn das Element vorhanden ist, rufen wir das neue Bild aus unserem JSON-Objekt ab und prüfen, ob der aktuelle Pfad des Bildes mit dem neuen Pfad übereinstimmt, den wir zuweisen möchten. Wenn das der Fall ist, machen wir nichts. Wir ändern das Bild nur, wenn es nicht korrekt ist. So verhindern wir eine Endlosschleife, in der versucht werden würde, das Bild zu ändern. Jetzt prüfen wir dies fortlaufend für alle anderen Produktbilder, die wir ändern möchten.
  4. (Abhängig von Ihrer Seiteneinrichtung wollen Sie die Schleife möglicherweise früher beenden, um die Leistung zu erhöhen.)
  5. Der letzte Schritt für das Setup besteht einerseits darin, das Containerelement zu erhalten, das Sie beobachten möchten. Andererseits muss die Funktion “observe” mit dem zu beobachtenden Element und den Manipulationstypen, die Sie beobachten möchten, aufgerufen werden. product detail page

Zusammenfassung

Der Mutation Observer ist mehr als nur ein passiver Beobachter, er ist ein aktiver Teilnehmer an der Optimierung der dynamischen Inhalte Ihrer Website, insbesondere für A/B-Tests. Sie können diesen nicht nur für Bilder verwenden, sondern für alle Arten von dynamischen Inhalten auf Ihrer Seite, indem Sie Content oder Layouts bearbeiten, hinzufügen oder entfernen oder einfach nur die Information verwenden, dass etwas manipuliert wurde. Nutzen Sie diese Möglichkeiten und Sie sind auf dem besten Weg zu einer personalisierten und effektiveren Nutzererfahrung.

Simon Giglhuber

Simon Giglhuber ist Experimentation-Entwickler bei Up Reply. Er ist mit Tools wie Optimizely und Dynamic Yield vertraut und hat bei der Optimierung der Online-Schnittstelle für unsere Kunden geholfen. In seinen Blogeinträgen wird sich Simon auf JavaScript-technische Details und Frontend-Aspekte konzentrieren, die für effektive A/B-Tests und Personalisierung unerlässlich sind.

Lassen Sie uns Ihr E-Commerce-Business auf die nächste Stufe heben

Erschließen Sie neue Möglichkeiten und definieren Sie die Kundenerfahrung neu durch personalisierte, datengetriebene Strategien mit Up Reply.