Varify®-Snippet – Integration
Kurz gefasst
Das Varify.io®-Snippet in deine Website oder Shopsysteme einzubinden, geht schnell. Am besten fügst du das JavaScript-Snippet im <head>-Tag deiner Webseite ein, um Page-Flickering zu vermeiden. Falls nötig, kannst du für die Integration auch einen Tag-Manager verwenden.
Wenn du das Snippet nicht sofort integrieren kannst, kannst du unsere Google Chrome-Erweiterung ausprobieren.
Snippet-Implementierung
Integration im Bereich der Website (empfohlen)
Wenn du das Varify.io-Snippet in deine Website integrieren möchtest, ist es wichtig, es so weit oben wie möglich auf der Seite zu platzieren - idealerweise im <head>-Bereich. Dadurch wird sichergestellt, dass das Snippet korrekt und ohne Verzögerungen geladen wird.
Du hast zwei Möglichkeiten, das Snippet zu integrieren: synchron und asynchron. Beide haben ihre eigenen Vor- und Nachteile.
Je nach den spezifischen Anforderungen und der Struktur deiner Website entscheidest du, welche Implementierungsmethode für dich am besten geeignet ist.
So integrierst du das Varify.io-Skript synchron
| Vorteil | Nachteil |
|---|---|
| Garantiert, dass das Skript geladen wird, bevor die Webseite angezeigt wird. | Kann die Ladezeit der Webseite erhöhen, wenn es Probleme beim Laden des Skripts gibt. |
| Kein Flackern der Seite | Wenn das Skript nicht geladen wird, wird möglicherweise die gesamte Webseite nicht angezeigt. |
<!-- Varify.io® code for YOUR ACCOUNT-->
<script>
window.varify = window.varify || {};
window.varify.iid = YOUR ACCOUNT ID;
</script>
<script src="https://app.varify.io/varify.js"></script>
Wichtig: Ersetze in Zeile 4 „YOUR ACCOUNT ID“ durch die Account-ID aus deinem Dashboard.
So integrierst du das Varify.io-Skript asynchron
| Vorteil | Nachteil |
|---|---|
| Beeinträchtigt die Ladezeit der Webseite nicht, da die Webseite parallel geladen wird. | Es besteht die Möglichkeit, dass andere Skripte zuerst ausgeführt werden, was seltsame Nebeneffekte verursachen kann. |
| Die Webseite wird weiterhin geladen, auch wenn Probleme beim Laden des Skripts auftreten. | Es kann zu einem Flackern der Seite kommen |
<!-- Varify.io® code for YOUR ACCOUNT-->
<script>
window.varify = window.varify || {};
window.varify.iid = YOUR ACCOUNT ID;
</script>
<script async src="https://app.varify.io/varify.js"></script>
Wichtig: Ersetze in Zeile 4 „YOUR ACCOUNT ID“ durch die Account-ID aus deinem Dashboard.
Integration über den Tag Manager
Die Integration des JS-Snippets über den Google Tag Manager ist eine schnelle Möglichkeit, Varify.io® auf deiner Website einzubinden. Diese Option birgt jedoch auch das Risiko, dass beim Ausspielen einer Variation ein Flackereffekt sichtbar ist.
Erstelle einfach ein benutzerdefiniertes HTML-Tag in deinem Tag Manager und füge das JavaScript-Code-Snippet ein. Wähle als Trigger die Option, das Tag auf allen Seiten so früh wie möglich auszulösen. Eine Option wäre zum Beispiel „Initialisierung – Alle Seiten“. Beachte, dass es je nach Einrichtung deiner Website weitere Optionen geben kann.
Stelle sicher, dass du „xxx“ nach „window.varify.iid =“ im Screenshot durch deine Account-ID ersetzt.
Wenn du das Varify-Skript über GTM oder direkt in den <body> integrierst, deaktiviere die Einstellung „Start Tracking on Activation Event“ unter Advanced Setup. Dadurch wird sichergestellt, dass dein Varify Tracking korrekt funktioniert.
Varify.io über Chrome-Erweiterung ausprobieren
Du kannst die Google-Chrome-Erweiterung herunterladen, um Varify.io auszuprobieren. Die Erweiterung integriert das Varify.io-Snippet auf deiner Website ausschließlich für dich in deinem Browser. Das bedeutet, dass nur du Varianten in deinem Browser bearbeitest und ansiehst.
Um dein personalisiertes Snippet auf deiner Website zu implementieren, ohne den Code anfassen zu müssen, folge den untenstehenden Schritten:
- Lade die Varify® Chrome-Erweiterung herunter
- Aktiviere das Plugin in deinem Browser
- Kopiere deinen Varify®-Code-Snippet aus deinem Dashboard (Get Snippet Here) und füge ihn in das Feld „Your Snippet Code...“ in der Erweiterung ein -. Fertig!
Eine detailliertere Erklärung zur Installation und Aktivierung sowie zu weiteren Funktionen findest du hier: Varify® Chrome-Browser-Erweiterung
Flackern während der Experiment-Ausspielung vermeiden
Flackern tritt auf, wenn die Seite bereits sichtbar ist, bevor Varify die Variante vollständig angewendet hat. Der beste Weg, dies zu vermeiden, ist, den Snippet im <head> einzubinden.
Falls dies nicht ausreicht oder technisch nicht möglich ist, kannst du auch das Anti-Flicker-Skript verwenden. Die Anleitung dazu findest du in der Dokumentation: Anti-flicker script