Funktionsweise der Optimize-Laufzeit

Informationen zu den Vorgängen im Browser des Besuchers und zum Anwenden von Änderungen

Wenn ein Nutzer Ihre Website besucht, finden jedes Mal drei Schritte statt, die im Folgenden behandelt werden.

Themen in diesem Artikel:

Asynchroner Download

Das Optimize-Containerskript ist asynchron und beeinträchtigt daher nicht die normale Funktionsweise Ihrer Website. Der Optimize-Container wird parallel zu weiteren Skripts und Ressourcen Ihrer Seite heruntergeladen und blockiert diese nicht. Andere Skripts, die zuerst heruntergeladen wurden, lassen sich ohne Verzögerung ausführen.

Normalerweise wird der Inhalt Ihrer Seite von Optimize geändert, sodass die Priorität wichtig ist.

Daher empfehlen wir, die Optimize-Installation oben im <HEAD>-Abschnitt zu einzufügen. So kann die Anwendung so schnell wie möglich ausgeführt werden, ohne von anderen Skripts und Bibliotheken Ihrer Seite blockiert zu werden.

Die falsche Positionierung von Optimize kann zum Seitenflackern, einem längeren Ausblendungszeitraum und Container-Timeouts führen, wenn Sie das Snippet gegen Seitenflackern verwenden.

Snippet gegen Seitenflackern

Wenn eine HTML-Seite durch JavaScript-Code geändert wird, flackert sie häufig: Besucher können vorübergehend die ursprüngliche Version der Seite sehen, bevor sie geändert wird.

Bei einem Tool wie Optimize könnte das die Besucher verwirren. Vielleicht erkennen sie sogar, dass ein Test läuft. Das kann sich negativ auf Ihre Website und die Testergebnisse auswirken. Aus diesem Grund gibt es bei Optimize verschiedene Mechanismen, um das Flackern zu vermeiden.

Eine wichtige Rolle spielt dabei das Snippet gegen Seitenflackern, das aufgrund der asynchronen Natur von Optimize erforderlich ist.

Bei einem synchronen Skript werden das Parsing und die Anzeige der Seite im Browser blockiert. Im schlimmsten Fall funktioniert die Website dann nicht mehr. Ein asynchrones Skript kann jederzeit ausgeführt werden, auch wenn die Seite wieder sichtbar ist – und es droht kein Totalausfall der Website. Beim Ausführen des asynchronen Skripts kann es zum Flackern kommen.

Das Snippet gegen Seitenflackern dient als Mechanismus, der dafür sorgt, dass Ihre Seite vorübergehend ausgeblendet wird, damit ausreichend Zeit zum Herunterladen des Optimize-Containers bleibt. Bei korrekter Installation auf einer typischen Seite hat das Ausblenden der Seite keine spürbare Auswirkung, da der Optimize-Container parallel mit anderen Skripts und Ressourcen der Seite heruntergeladen wird, die das Rendern blockieren.

Aber das Ausblenden der Seite ist nicht der einzige Mechanismus, mit dem das Flackern verhindert wird. Dies verschwindet nämlich normalerweise, bevor die Seite tatsächlich im Browser zur Verfügung steht, um durch Optimize geändert zu werden.

Das Timeout für das Ausblenden der Seite entspricht nicht der tatsächlichen Verzögerung. Es ist vielmehr eine Worst-Case-Garantie. Außerdem bezieht sich der empfohlene Wert nicht auf die Website- oder Optimize-Leistung, sondern hauptsächlich auf die Netzwerkgeschwindigkeit der Besucher, falls z. B. die Signalstärke schlecht ist oder ein anderes Problem vorliegt.

Wenn der Optimize-Container beim Auftreten des Timeouts nicht zusammen mit anderen Seitenressourcen heruntergeladen und – je nach Netzwerkgeschwindigkeit und -bedingungen – auf dem Gerät des Besuchers ausgeführt wurde, geschieht Folgendes: Das Ausblenden der Seite und alle angewendeten Optimize-Tests werden beendet und der Besuch wird einfach aus dem Test-Traffic ausgeschlossen.

Sobald der Optimize-Container heruntergeladen wurde, wird das globale Ausblenden der Seite beendet. Die Testregeln werden vom Container ausgewertet und dann bleiben nur die Elemente ausgeblendet, die an den ausgewählten Testvarianten beteiligt sind. Dieser Fall kann auch eintreten, wenn diese Elemente noch nicht auf der Seite zu sehen sind.

Page-hiding-snippet-flow-diagram

Ausrichtungsregel auswerten

Sobald der Optimize-Container heruntergeladen wurde, werden die Ausrichtungsregeln aller Tests ausgewertet, die für die Aktivierung mit der Standardoption zum Laden der Seite konfiguriert wurden. Bei Tests ohne eine standardmäßige Aktivierung wird auf Aktivierungsereignisse gewartet.

Die Testmodellseite, über die Sie den Optimize-Editor starten können, ist nicht für die Ausrichtung relevant, obwohl sie ursprünglich als Standard-Ausrichtungsregel zugewiesen wurde. Auf der Seite "Testdetails" können Sie genau sehen, welche Regeln für einen Test gelten.

Nutzer werden beim ersten Besuch einer Seite (es muss nicht der erste sein) einer Variante zugewiesen, nachdem der Test gestartet wurde. Die Zuweisung erfolgt nach dem Zufallsprinzip basierend auf der Google Analytics-Client-ID und den Variantengewichtungen. Die Variante bleibt bis zum Ende des Tests zugewiesen, während Aktionen, die zu einem späteren Zeitpunkt erfolgen (also Ziele) dieser Variante zugeordnet werden.

Wenn Sie die Testgewichtungen ändern, werden die Besucher nicht neu zugewiesen. Selbst wenn Sie die Gewichtung einer Variante auf null setzen, kann es für sie dennoch Traffic von Besuchern geben, die ihr vor dieser Änderung zugewiesen waren.

Die Tests sind unabhängig voneinander. Ein einzelner Besuch kann an mehreren Tests teilnehmen. Es darf aber nicht zu Nebeneffekten kommen. Es ist durchaus in Ordnung, mehrere Tests auf derselben Seite, aber in verschiedenen Bereichen durchzuführen, um Verzerrungen zu vermeiden. Diese entstehen z. B., wenn mit der Variante eines Tests für eine Variante eines anderen Tests geworben wird.

Hinweis: Optimize-Varianten werden nach dem Best-Effort-Prinzip angewendet. Selbst wenn einige oder alle CSS-Selektoren Ihrer Varianten nicht vorhanden sind oder aufgrund von Fehlern in den JavaScript-Änderungen Ausnahmen auftreten, wird der Besuch weiterhin als Teil der Testvariante erfasst.

Schließlich werden einige Ihrer Ausrichtungsregeln möglicherweise serverseitig ausgewertet, sodass der Test vollständig im heruntergeladenen Container gelöscht wird.

Targeting rule evaluation flow diagram

Ausgewählte A/B- und MVT-Varianten anwenden

Sobald die Varianten des Containers ausgewählt wurden, wird versucht, sie anzuwenden. Eine Variante ist definiert als eine Liste von Änderungsvorgängen (im Optimize-Editor zu sehen), die in einer bestimmten Reihenfolge angewendet werden. Es werden einige Optimierungen vorgenommen, wenn es keine Konflikte gibt.

Jede Änderung ist auf einen CSS-Selektor ausgerichtet, der einem oder mehreren Elementen entsprechen kann. Vom Optimize-Editor wird erkannt, ob eine Änderung auf mehrere Elemente ausgerichtet ist.

Häufig ist das Element einer Änderung während der Optimize-Ausführung nicht auf der Seite zu sehen. In einem solchen Fall wird dafür gesorgt, dass es ausgeblendet bleibt, indem eine erforderliche CSS-Regel hinzufügt und anschließend die Ausführung der Änderungsliste pausiert wird.

Sobald dieses Zielelement verfügbar ist, wird die Änderung angewendet, die CSS-Regel zum Ausblenden entfernt und versucht, die nächste Änderung in der Liste auf die gleiche Weise anzuwenden.

Sobald die Seite vom Browser als bereit gekennzeichnet wurde (nach dem DOMContentElement-Ereignis), wird in Optimize noch einmal versucht, alle verbleibenden Änderungen anzuwenden. Wird das Element einer Änderung zu diesem Zeitpunkt nicht gefunden, wird es einfach ignoriert. In Optimize wird dann der nächste Eintrag in der Liste bearbeitet.

Hinweis: Stiländerungen werden normalerweise mit CSS-Regeln implementiert, sodass der oben beschriebene Prozess für sie nicht durchlaufen werden muss. Stattdessen werden sie sofort angewendet, sobald Optimize geladen wird und ein zusätzliches Ausblenden nicht erforderlich ist.

JavaScript-Änderungen verfügen ebenfalls über einen Ziel-CSS-Selektor und werden ausgeführt, sobald das Element dieses Selektors vom Browser verfügbar gemacht wurde.

Die Implementierung einer vollständigen Variante in Optimize mit einer einzelnen JavaScript-Änderung (z. B. mit jQuery) in <BODY> wird nicht empfohlen, da Ihr Code möglicherweise später als geplant ausgeführt wird. Versuchen Sie, den Zielselektor eines JavaScript-Codes auf die Elemente zu beschränken, die Sie ändern möchten, oder auf das kleinstmögliche übergeordnete Containerelement.

Eine Änderung kann auch einen CSS-Selektor enthalten, der auf mehrere Elemente ausgerichtet ist, die zu unterschiedlichen Zeiten auf einer Seite erscheinen können. Sie werden bei der Auslieferung von Optimize geändert, aber am Ende werden alle eingeblendet. Hinweis: Im Optimize-Editor können mehrerer Elemente durch Klicken bei gedrückter Umschalttaste ausgewählt werden.

Application of variants flow diagram

War das hilfreich?
Wie können wir die Seite verbessern?