Zum Hauptinhalt springen
Flackern hat in der Regel zwei Hauptursachen:
  • Das Skript wird geladen und ausgefuehrt, nachdem der Browser die Seite oder Teile davon bereits angezeigt hat. Dieses Timing-Problem haengt direkt damit zusammen, wie Kameleoon auf Ihrer Website implementiert wurde. Wenn Kameleoon zu spaet laedt oder in ein Tag-Management-System integriert ist, kann das Flackern nicht vermieden werden.
  • Die Engine, die die Variationen des Experiments verarbeitet, ist zu langsam und fuehrt die Aenderungen nicht schnell genug aus.
Das Skript von Kameleoon enthaelt eine einzigartige Anti-Flicker-Engine, die sicherstellt, dass A/B-Tests reibungslos laufen, sodass Testvariationen ohne Verzoegerungen angezeigt werden, was zu einer verbesserten Nutzererfahrung und zuverlaessigeren Testergebnissen fuehrt.

​
Wesentliche Vorteile der Technologie:​

Hier sind einige Gruende, warum die Anti-Flicker-Technologie von Kameleoon einzigartig und leistungsstark ist:
  • Asynchrones Snippet: Kameleoon laedt sein Skript asynchron von einem zuverlaessigen CDN (Cloudflare), um ein nicht blockierendes erstes Seitenladen zu gewaehrleisten, und nutzt das Browser-Caching fuer schnellere nachfolgende Seitenladevorgaenge. Kameleoon haelt ein Service Level Agreement (SLA) von ueber 99,99 % ein.
  • Geringe Skriptgroesse: Die mit TypeScript erstellte Anwendungsdatei hat eine Groesse von nur 29 kB (mit Brotli komprimiert), was die Ladezeit beim ersten Seitenaufruf minimiert.
  • Praeprozessor-Ansatz: Das Kameleoon-Skript wird nur aus den Komponenten generiert, die fuer Ihre spezifische Einrichtung erforderlich sind, basierend auf den Funktionen und Optionen, die Sie verwenden.
  • Einzigartige Anti-Flicker-Engine: Die Engine erfasst DOM-Ereignisse in Echtzeit und veraendert die Anzeige der an einer Experiment-Variation beteiligten Komponenten, bevor sie vollstaendig gerendert werden.
  • Reduzierte Netzwerkaufrufe: Das Skript fasst mehrere Tracking-Ereignisse in einem einzigen Beacon-Aufruf zusammen, wodurch die Gesamtzahl der erforderlichen Netzwerkaufrufe erheblich reduziert wird.
  • Einzelnes Skript-Laden: Im Gegensatz zu anderen Plattformen, die mehrere Dateien benoetigen, laedt Kameleoon ein einziges konsolidiertes Skript. Dies reduziert die Anzahl der HTTP-Anfragen.
  • Verzoegertes Laden von Experimenten: Kameleoon ermoeglicht es Ihnen, im Einzelfall auszuwaehlen, welche Experimente zum Zeitpunkt des ersten Seitenaufrufs in die Anwendungsdatei engine.js (frueher kameleoon.js genannt) aufgenommen werden sollen, und nicht essentielle Experimente bis nach dem ersten Laden zu verschieben.
  • Echtzeit-Update: Um haeufigere Updates zu ermoeglichen, ohne durch Browser-Caching behindert zu werden, aktualisiert die Funktion Live Update Experiments jedes mit “LIVE-UPDATE” markierte Experiment innerhalb einer Minute.

​
Wie Sie Flackern in Ihren Experimenten verhindern​

Um Flackern beim Laden der Anwendungsdatei zu beseitigen, verwenden Sie das asynchrone Tag mit Anti-Flicker-Schutz. Das Snippet enthaelt eine “blockierende CSS-Regel”, die zunaechst alle Inhalte der Seite ausblendet, waehrend das Skript vom Browser heruntergeladen wird. Kameleoon entfernt diese Regel, sobald der Anwendungscode geladen wird, was in der Regel weniger als 50 Millisekunden dauert. Wenn der Anwendungscode nicht innerhalb des angegebenen Timeouts (Standard 1000 Millisekunden) geladen wird, wird die Regel ebenfalls entfernt, um zu verhindern, dass eine leere Seite unbegrenzt angezeigt wird. Dieser Ansatz stellt sicher, dass Kameleoon Ihre Website in keiner Situation stoeren kann.
Der Timeout wird ueber die JavaScript-Variable kameleoonLoadingTimeout verwaltet, die Sie im Kameleoon-Installations-Tag anpassen koennen. Standardmaessig ist diese Variable auf 1000 Millisekunden gesetzt. Kameleoon empfiehlt, diesen Wert beizubehalten. Diese Variable gibt die maximale Zeit an, in der das Kameleoon-Installations-Tag verhindern kann, dass Ihre Website angezeigt wird, waehrend es auf das Laden der Kameleoon-Anwendungsdatei wartet.Im Falle eines Timeouts bestimmt die gewaehlte Konfiguration, was als Naechstes geschieht, sobald der Kameleoon-Code schliesslich geladen wird. Sie haben in den erweiterten Bestaetigungseinstellungen Ihres Kameleoon-Projekts zwei Optionen:
  1. Kameleoon vollstaendig deaktivieren: Wenn ein Timeout auftritt, werden fuer diesen spezifischen Besucher keine Experimente oder Personalisierungen ausgefuehrt.
  2. Code von Kameleoon normal ausfuehren: In diesem Fall wird der Code spaet ausgefuehrt, was zu Flackern auf der Seite fuehren kann.
Beachten Sie, dass Timeouts unter ueblichen Bedingungen (z. B. bei angemessener Internetgeschwindigkeit) relativ selten sein sollten und nur bei etwa 2-3 % Ihrer Besucher auftreten, sofern der Standard-Timeout-Wert nicht angepasst wird.
Obwohl nicht empfohlen, koennen Sie auch das synchrone Tag implementieren. Im Falle des synchronen Ladens werden automatische Garantien bereitgestellt, solange das Tag im HTML-<head>-Abschnitt enthalten ist. Diese Garantie besteht, weil der Browser keinen Inhalt rendert, bis die Kameleoon-Anwendungsdatei vollstaendig heruntergeladen und ausgefuehrt wurde. Das blockierende Laden von Ressourcen gilt jedoch nicht als gute Praxis. Selbst wenn die richtige Methode implementiert ist, koennen Flackereffekte auftreten, wenn die zugrunde liegende Engine einer A/B-Test-Loesung nicht darauf optimiert ist, sie zu verhindern. Kameleoon stellt diese Optimierungen automatisch fuer alle Aenderungen sicher, die ueber den grafischen Editor vorgenommen werden. Fuer Variationen, die benutzerdefinierten JavaScript-Code verwenden, stehen APIs zur Verfuegung, um eine reibungslose Erfahrung zu garantieren. Verwenden Sie diese APIs korrekt, um Probleme zu vermeiden. Fuehren Sie alle Aenderungen an einem Element oder alle Aktionen, die auf das Erscheinen eines Elements auf der Seite warten, mit der JavaScript-API-Methode durch, insbesondere mit Kameleoon.API.Core.runWhenElementPresent(), anstatt handgeschriebene Poller oder anderen benutzerdefinierten Code zu verwenden.
Beruecksichtigen Sie beim Implementieren von JavaScript-Code fuer eine Variation die gewuenschten Aenderungen und die spezifischen DOM-Elemente, auf die sie sich beziehen sollen. Sobald Sie den passenden CSS-Selektor fuer diese Elemente identifiziert haben, schliessen Sie den Aenderungsaufruf in eine Callback-Funktion ein, die Sie an Kameleoon.API.Core.runWhenElementPresent() uebergeben. Dieser Ansatz hat zwei wesentliche Vorteile: Erstens stellt er sicher, dass der Code zum richtigen Zeitpunkt ausgefuehrt wird, erst nachdem die Elemente im DOM vorhanden sind, was potenzielle Probleme verhindert, die entstehen koennten, wenn Ihr Code vorzeitig ausgefuehrt wird. Zweitens beseitigt er das Risiko unerwuenschter Flackereffekte.

​
Auswirkungen der Flacker-Verwaltung auf die Leistung​

Obwohl Leistungsueberwachungsloesungen wertvolle Erkenntnisse liefern, bieten sie kein vollstaendiges Bild, insbesondere fuer Experimentations-Plattformen. Echte Leistung bedeutet, das richtige Gleichgewicht zwischen Geschwindigkeit, Genauigkeit und einer nahtlosen Nutzererfahrung zu finden. Kameleoon erreicht dieses Gleichgewicht effektiv: Das Experiment-Snippet ist speziell darauf ausgelegt, sowohl die Leistung als auch die Nutzererfahrung zu optimieren. Kameleoon laedt ein einzelnes Skript, das die Engine und alle von Ihnen auf der Plattform eingerichteten Konfigurationen enthaelt, einschliesslich Experimente, Ziele und benutzerdefinierte Skripte. Anschliessend werden keine zusaetzlichen Skripte geladen. Das vorruebergehende Deaktivieren der Anti-Flicker-Engine koennte die Leistungswerte in Ueberwachungstools verbessern, beeintraechtigt jedoch die Nutzererfahrung und die Genauigkeit der Ergebnisse durch das Auftreten von Flackern. Dieser Kompromiss ist inakzeptabel.