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.
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:
- Zuerst verwenden wir den Mutation Observer-Konstruktor mit einer inneren Funktion, mit dem wir alle Seitenmanipulationen durchlaufen können.
- 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.
- 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.
- (Abhängig von Ihrer Seiteneinrichtung wollen Sie die Schleife möglicherweise früher beenden, um die Leistung zu erhöhen.)
- 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.
Marcel ist ein erfahrener Entwickler mit mehr als zehn Jahren Erfahrung in den Bereichen A/B-Tests und Personalisierungsentwicklung. Dank seines umfassenden Wissens in den Bereichen Full-Stack- und Martech-Entwicklung sowie verteilter Softwaresysteme unterstützt er Unternehmen dabei, sichere, datengesteuerte Experimentier-Ökosysteme aufzubauen, die messbares Wachstum ermöglichen.
