Mit der Optimize JavaScript API können Sie eigenen JavaScript-Code verwenden, um mithilfe von Callback-Funktionen Änderungen an Varianten vorzunehmen. Diese Änderungen lassen sich mit Änderungen aus dem visuellen Editor von Optimize kombinieren. Das bietet sich besonders dann an, wenn Sie Code entwickeln müssen, mit dem zusätzliche Aktionen zeitgleich mit der Anwendung der Änderungen ausgeführt werden. Auch für die allgemeine Fehlersuche kann die API sehr nützlich sein.
Themen in diesem ArtikelImplementierungs-Callbacks registrieren
Mit der Optimize Client API können Sie eine eigene Testimplementierung verwenden, die auf JavaScript-Code von Ihrer Website beruht. Der Optimize-Editor ist dann nicht erforderlich. Sie müssen einen eigenen Mechanismus zum Verhindern von Flackern implementieren, da Ihr JavaScript-Code möglicherweise erst aufgerufen wird, nachdem die Seite bereits für den Besucher geladen wurde.
Sie dürfen nicht vergessen, dass Optimize asynchron geladen wird. Daher kann kein synchroner Code verwendet werden, um zu prüfen, ob ein Test enthalten ist. Zwar treten nicht immer Probleme auf, doch ist die Ausführungsreihenfolge nicht garantiert.
Stattdessen müssen Sie die Implementierung als Callback umsetzen:
// Muss in Skripts nach der Optimize- oder Google Tag Manager-Installation
// oder der Initialisierung der dataLayer-Variablen eingefügt werden
// Nicht erforderlich, wenn die gtag-Implementierung von Google Analytics verwendet wird
function gtag() {dataLayer.push(arguments)}
function implementExperimentA(value) {
if (value == '0 ] {
// Code für Besucher (Original) bereitstellen
} else if (value == '1') {
// Code für Besucher (erste Variante) bereitstellen
} else if (value == '2') {
// Code für Besucher (Abschnittsvariante) bereitstellen
}
...
}
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA
});
Sie können einen Implementierungs-Callback für einen Test mit einer bestimmten ID registrieren. Diese finden Sie auf der Detailseite des Tests.
Berücksichtigen Sie außerdem, dass Ihr Callback möglicherweise aufgerufen wird, bevor die vollständige DOM-Struktur verfügbar ist. Wenn Sie also Elemente auf Ihrer Seite ändern müssen, ist es möglicherweise erforderlich, den Status der Seite zu überprüfen und die Implementierung so zu registrieren, dass sie später als Event-Handler des Ereignisses DOMContentLoaded ausgeführt wird. Falls jQuery in der Seite enthalten ist, können Sie dazu auch beispielsweise jQuery.ready verwenden. Beispiel:
function implementExperimentA(value) {
...
else if (value == '2') {
// Vorausgesetzt, auf der Seite ist jQuery eingebunden
$( document ).ready(function() {
$('#my_element').text('Hallo von Variante 2');
})
}
...
}
Multivariate Tests (MVT)
Bei MVTs sind in dem Wert, der von Ihrem Test zurückgegeben wird, die Indexe aller Abschnittsvarianten enthalten. Sie sind durch einen Bindestrich („-“) getrennt.
function implementExperimentA(value) {
var sections = value.split(„-“);
if (sections[0] == '0') {
// Code für ersten Abschnitt für Besucher im Original bereitstellen
} else if (sections[0] == '1') {
// Code für den ersten Abschnitt für Besucher (erste Variante) bereitstellen
}
...
if (sections[1] == '0') {
// Code für den zweiten Abschnitt für Besucher (Original) bereitstellen
} else if (sections[1] == '1') {
// Code für den zweiten Abschnitt für Besucher (erste Variante) bereitstellen
}
}
Mehrere Tests durchführen
Sie können auch einen einzelnen Callback verwenden, mit dem mehrere Tests implementiert werden:
function implementManyExperiments(value, name) {
if (name == '<experiment_id_A>') {
// Implementierung für Test A bereitstellen
if (value == '0') {
// Code für Besucher (Original) bereitstellen
} else if (value == '1') {
// Code für Besucher (erste Variante) bereitstellen
...
} else if (name == '<experiment_id_B>') {
// Implementierung für Test B bereitstellen
...
}
gtag('event', 'optimize.callback', {
callback: implementManyExperiments
});
Ressourcen für die Fehlerbehebung
Mit der Optimize JavaScript API haben Sie auch Zugriff auf die globale Variable google_optimize. Sie umfasst die GET-Methode und kann hilfreich bei der Fehlersuche sein. So lässt sich beispielsweise prüfen, ob ein Test für einen bestimmten Seitenbesuch aktiv ist, selbst wenn…
- Änderungen nicht sichtbar sind. Das kann z. B. der Fall sein, wenn sie in Inhalten angewendet wurden, die aktuell ausgeblendet sind.
- es Probleme gibt und die Zielelemente z. B. nicht mehr auf der Seite vorhanden sind.
- an einigen Varianten keine Änderungen vorgenommen wurden.
- der Besucher dem Original zugewiesen wurde.
Wenn Sie Fehler in einem Test beheben möchten, müssen Sie in Optimize auf der Detailseite des Tests zuerst die Test-ID abrufen. Sehen Sie dann nach, welche Variante dem Test zugewiesen ist. Dazu machen Sie folgende Eingabe in den Chrome-Entwicklertools > Tab „Console“:
console.log(google_optimize && google_optimize.get('<experiment_id_A>'));
google_optimize ist eventuell nicht definiert, wenn es keine aktiven Tests gibt.Wenn in den Entwicklertools auf dem Tab „Console“ undefined (nicht definiert) als Ergebnis angezeigt wird, ist der Test auf der Seite nicht aktiv. Mögliche Gründe:
- Die Ausrichtungsregeln stimmen nicht überein.
- Der Besucher wurde nicht in der Variantengewichtung berücksichtigt.
- Der Besucher wurde aufgrund von Browserbedingungen ausgeschlossen, z. B. weil er das Browser-Add-on zur Deaktivierung von Google Analytics installiert hat.
- Wenn das Snippet zum Ausblenden von Seiten installiert ist: Die Netzwerkgeschwindigkeit des Besuchers ist langsamer als das Zeitlimit für „async-hide“. Weitere Informationen
- Der visuelle Editor ist in einem anderen Browsertab geöffnet. Im Bearbeitungsmodus können keine Tests ausgeführt werden. Weitere Informationen
- Sie sehen eine Vorschau der Variante eines anderen Tests. Im Vorschaumodus kann nur ein Test ausgeführt werden.
- Für den Test wird die benutzerdefinierte Aktivierung verwendet und er wurde noch nicht aktiviert.
- Für den Test wird die benutzerdefinierte Aktivierung verwendet. Er wurde zwar aktiviert, später aber wieder deaktiviert (Ausrichtungsregeln stimmen nicht mehr überein).
In den Entwicklertools auf dem Tab „Console“ wird folgendes Ergebnis angezeigt:
- 0: Der Test wurde ausgeführt und ist aktiv. Der Besucher wurde Variante 0 (Original) zugewiesen.
- 1: Der Test wurde ausgeführt und ist aktiv. Der Besucher wurde Variante 1 zugewiesen.
- 2: Der Test wurde ausgeführt und ist aktiv. Der Besucher wurde Variante 2 zugewiesen.
- Und so weiter.
Wenn Sie alle derzeit aktiven Tests sehen möchten, geben Sie Folgendes in die Entwicklertools > Tab „Console“ ein:
gtag('event', 'optimize.callback', {
callback: (value, name) => console.log(
'Experiment with ID: ' + name + ' is on variant: ' + value)
});
Seiteninitialisierung mit Verzögerung
In einigen Fällen ist es erforderlich, bei der Initialisierung einer Seite die Ausführung bestimmter Funktionen zu verzögern, damit Sie einen Testwert verwenden können. Ein Beispiel: Sie haben Ajax-Anfragen, bei denen zusätzliche Daten geladen werden, und möchten für die Anfragen unterschiedliche URL-Pfade für verschiedene Varianten verwenden.
Hier bietet sich das Snippet zum Ausblenden von Seiten an. Dadurch wird sichergestellt, dass für diese wichtige Funktion die maximal zulässige Verzögerung festgelegt ist (auf Basis des Zeitlimits zum Ausblenden der Seite) und dass sie in jedem Fall aufgerufen wird. Außerdem müssen Sie dafür sorgen, dass diese Funktion für Nutzer initialisiert wird, die nicht an Ihrem Test teilnehmen, weil sie entweder nicht mit den Ausrichtungsregeln übereinstimmen oder Sie nicht sämtliche Zugriffe in Ihren Test aufnehmen.
Dazu können Sie das Snippet zum Ausblenden von Seiten in Ihre Seite einfügen und den Callback überschreiben, der die Ausblendung beendet:
function delayedInitialization() {
var value = google_optimize &&
google_optimize.get('<experiment_id_A>');
if (value == '0') {
// Code für Besucher im Original bereitstellen
} else if (value == '1') {
// Code für Besucher (erste Variante) bereitstellen
...
} else if (value == undefined) {
// Code für Besucher, die nicht am Test teilnehmen, bereitstellen
}
}
var hideEnd = dataLayer.hide.end;
if (hideEnd) {
dataLayer.hide.end = function() {
delayedInitialization();
hideEnd();
}
} else {
delayedInitialization();
}
<STYLE>-Zeile aus dem Snippet zum Ausblenden von Seiten. Weitere Informationen finden Sie auf der Google Developers-Website.Wie oben gezeigt, gibt es eine globale Window-Variable namens google_optimize. Mit ihr können die Testwerte abgerufen werden. Verwenden Sie jedoch diese Variable nicht direkt in Ihrem Code. Sie ist nämlich erst nach dem Laden des Optimize-Containers definiert und lässt sich daher in synchronen Skripts nicht nutzen.
Die Variable google_optimize ist auch nicht definiert, wenn das Optimize-Containerskript nicht geladen werden kann (z. B. aufgrund von Netzwerkproblemen). Der Code von oben gibt außerdem für Tests mit benutzerdefinierter Aktivierung nicht definierte Testwerte zurück. Solche Tests werden typischerweise erst später aktiviert und geben deshalb auch später Werte zurück.
Aktivierungsereignisse
Wenn Sie Aktivierungsereignisse für Ihren Test verwenden, kann es sein, dass Ihre Callbacks mehrmals aufgerufen werden, und zwar jedes Mal, wenn eine Variante reaktiviert oder deaktiviert wird. Wurde eine Variante deaktiviert, ist der Testwert nicht definiert.
function implementExperimentA(value) {
if (value == '0') {
// Original wurde aktiviert oder reaktiviert
// (kann mehrmals aufgerufen werden)
} else if (value == '1') {
// Erste Variante wurde aktiviert oder reaktiviert
// (kann mehrmals aufgerufen werden)
...
} else if (value == undefined) {
// Test wurde deaktiviert
// (kann mehrmals aufgerufen werden)
}
In diesem Fall wird Ihr Callback mehrmals mit dem gleichen Wert (bei Reaktivierung) oder mit „undefined“ (nicht definiert) aufgerufen.
Wert -> 1 1 1 undefined 1 undefined 1 1 usw.
Registrierung von Callbacks aufheben
In manchen Fällen möchten Sie, dass Callbacks nicht mehr aufgerufen werden. Ihre Registrierung soll also aufgehoben werden, damit Testwerte nicht mehr verarbeitet werden. Das kann beispielsweise der Fall sein, wenn Sie Tests verwenden, in denen Aktivierungsereignisse vorkommen und Ihre Seite oder Single Page-App in einen neuen, nicht vorgesehenen Status übergeht, sodass der Testwert nicht verarbeitet werden kann.
So können Sie die Registrierung eines Callbacks für einen bestimmten Test aufheben und den Callback entfernen:
gtag('event', 'optimize.callback', {
name: '<experiment_id_A>',
callback: implementExperimentA,
remove: true
});
So können Sie die Registrierung von mehreren Callbacks auf einmal aufheben und diese entfernen:
gtag('event', 'optimize.callback', {
callback: implementManyExperiments,
remove: true
});
Weitere Informationen
- Optimize-Snippet gegen Seitenflackern verwenden (in englischer Sprache) – Google Developers, Optimize
- Serverseitige Tests (in englischer Sprache) – Google Developers, Optimize
- AMP-Tests (in englischer Sprache) – Google Developers, Optimize