Zum Hauptinhalt springen

Experiment JavaScript & Experiment CSS

Zuletzt aktualisiert am 23. Okt. 20262 Min. Lesezeit
Inhaltsverzeichnis

Kurz gefasst​

Mit Experiment JavaScript und Experiment CSS kannst du JavaScript- und CSS-Code über alle Varianten eines Experiments, einschließlich des Originals, ausliefern. Experiment-Code wird immer vor dem Code der einzelnen Varianten ausgeführt.

Das ist immer dann nützlich, wenn Code für jeden Besucher im Experiment identisch laufen muss, zum Beispiel um ein Tracking-Skript auf allen Varianten zu laden. Experiment-Code ist für erfahrene Nutzer mit Programmiererfahrung gedacht.

Varify-Dashboard mit geöffnetem Drei-Punkte-Menü eines Experiments, das den Bereich „Code applied for all variations“ mit den Einträgen Add Experiment JavaScript, Add Experiment CSS und Add Reset JavaScript zeigt

Wo du Experiment JS und Experiment CSS findest​

Du findest beide Funktionen in der Experimentübersicht deines Dashboards:

  1. Klicke auf das Drei-Punkte-Menü oben rechts im Experiment.
  2. Wähle unter Code applied for all variations Add Experiment JavaScript oder Add Experiment CSS.
  3. Gib deinen Code ein und speichere ihn.

Das Badge neben jedem Eintrag zeigt an, ob bereits Code hinzugefügt wurde.

Wie Experiment-Code funktioniert​

  • An jede Variante ausgeliefert: Experiment-Code wird auf alle Varianten des Experiments und auf das Original angewendet.
  • Zuerst ausgeführt: Experiment-Code wird immer vor dem Varianten-Code ausgeführt. Code oder Styles, die du innerhalb einer Variante hinzufügst, können daher auf dem aufbauen, was Experiment-Code bereits eingerichtet hat.
  • Gleicher Code, gleiches Ergebnis für alle: Da der Code an alle Varianten ausgeliefert wird, erzeugt er keinen Unterschied zwischen ihnen. Nutze ihn für Dinge, die für alle gelten sollen, und nutze den Varianten-Code (siehe Add JavaScript und Add CSS) für die Änderungen, die du testen möchtest.

Anwendungsbeispiele​

Ein Tracking-Skript auf allen Varianten ausführen​

Ein typischer Anwendungsfall für Experiment JavaScript ist ein Tracking-Skript, das zu jeder Variante hinzugefügt werden soll. Anstatt das Skript in jede Variante zu kopieren, fügst du es einmal als Experiment JavaScript hinzu.

// Runs on the original and on all variations
window.dataLayer = window.dataLayer || [];

window.dataLayer.push({
  event: 'experiment_loaded',
});

Styles für alle Varianten gemeinsam nutzen​

Mit Experiment CSS kannst du Styles definieren, die in jeder Variante benötigt werden, zum Beispiel für ein Element, das du per JavaScript hinzufügst.

.promo-note {
  font-size: 14px;
  color: #333;
}

Helper-Funktionen verwenden​

Die Varify-Helper-Funktionen funktionieren auch in Experiment JavaScript. Du kannst sie zum Beispiel verwenden, um auf Elemente im DOM zu warten oder um zu verhindern, dass Code im Editor ausgeführt wird. Alle verfügbaren Funktionen und Beispiele findest du im Artikel Code Helpers.

window.varify.helpers.waitFor('.product', (element) => {
  // Runs as soon as the element is available in the DOM
});

JavaScript Reset hinzufügen​

Im selben Menü findest du auch Add Reset JavaScript. Es entfernt Code, den du hinzugefügt hast, was besonders bei Single Page Applications hilfreich ist. Weitere Informationen findest du im Artikel Add JavaScript Reset.

Auf dieser Seite