Fehlerbehebung - Mögliche Ursachen
Kurz & Knapp
Sollte es Probleme im Zusammenhang mit dem Laden des Editors, Speichern von Varianten oder dem Tracking von Varianten geben, werden auf dieser Seite mögliche Ursachen aufgeführt und es wird beschrieben, wie diese gelöst werden können.
Inhalt
Editor lädt nicht
Wenn du deine Webseite über das Varify.io Dashboard aufrufst, aber der Varify.io Editor nicht lädt, dann liegt das in den meisten Fällen daran, dass das Varify.io Script nicht korrekt auf deiner Website integriert ist oder deine Website eine Content Security Policy einsetzt.
Ist das Script korrekt installiert?
Ob das Snippet korrekt implementiert wurde, kannst du am einfachsten überprüfen, indem du die Browser-Konsole öffnest:
1. Klicke mit der rechten Maustaste auf einen leeren Bereich deiner Webseite
2. Wähle “Inspizieren” oder “Element untersuchen”.
3. Wähle die Registerkarte “Konsole”, gebe den Text varify ein und drücke die Eingabetaste.
Wenn du deine Account-ID im Feld “iid” siehst und der Wert “loaded: true” angezeigt wird, ist das Skript korrekt implementiert worden.
Im nachfolgenden Beispiel siehst du einen häufigen Fehler. Vor dem eingebundene Varify.io Script ist ein weiteres geöffnetes <script> Tag. Das hat zur Folge, dass das Varify.io Script nicht korrekt geladen werten kann.
Content Security Policy (CSP)
Websites können eine Content Security Policy (CSP) implementieren, indem sie den HTTP-Response-Header Content-Security-Policy verwenden oder ein <meta>-Tag mit dem http-equip Wert “Content-Security-Policy” angeben.
ℹ️ Anstatt allem, was ein Server liefert, blind zu vertrauen, definiert das CSP den HTTP-Header “Content-Security-Policy”, mit dem eine Zugriffskontrollliste von Quellen mit vertrauenswürdigen Inhalten definiert sind. Außerdem weist er den Browser an, nur Ressourcen aus diesen Quellen auszuführen oder anzuzeigen.
Anstatt blindlings allem zu vertrauen, was ein Server liefert, definiert die CSP den HTTP-Header “Content-Security-Policy”, der es dir ermöglicht, eine Zugriffskontrollliste von Quellen mit vertrauenswürdigen Inhalten zu erstellen. Zudem weist er den Browser an, Ressourcen ausschließlich aus diesen Quellen auszuführen oder darzustellen.
So erkennst du CSP Fehler
Du musst deine CSP anpassen, um Varify.io zu nutzen, wenn:
a) Du einen Fehler wie diesen in deiner Browser Konsole siehst:
This page uses security features that are incompatible with the varify.io editor.
b) Du einen Fehler wie diesen in den Google Developer Tools siehst:
Refused to execute editor.varify.io because it violates the following Content Security Policy directive…
c) Du einen Fehler wie diesen siehst:
Content Security Policy of your site blocks the use of ‘eval’ in JavaScript.
So behebst du CSP Fehler
Wenn deine Website ein (CSP) verwendet, müssen folgende Werte dort eingetragen werden:
- https://app.varify.io und
- https://editor.varify.io
Zusätzlich muss in der script-src die Direktive “unsafe-eval” hinzugefügt werden.
Um den Responsive Device Switcher zu verwenden, muss deine Domain sowohl in der frame-ancestors als auch in der frame-src Direktive angeben werden.
Beispiel
“`
Content-Security-Policy: frame-ancestors {YOUR_DOMAIN}; frame-src {YOUR_DOMAIN}; script-src ‘unsafe-eval’ https://app.varify.io https://editor.varify.io;
“`
Hinweis:
Der Wert unsafe-eval muss gesetzt werden, damit benutzerdefiniertes Javascript durch die Variation ausgeliefert werden kann.
Varianten werden nicht gespeichert
Du kannst Änderungen mit dem visuellen Editor durchführen, aber du kannst keine Varianten speichern? Dann liegt es daran, dass das Varify.io Script nicht korrekt integriert ist.
Falsche Account ID
Prüfe, ob die Account ID in dem integrierten Script auf deiner Seite der Account ID aus deinem Varify.io Dashboard entspricht.
Varify.io Script ist nicht korrekt integriert
Siehe hier
Der Responsive Device Switcher zeigt die Webseite nicht an
Wenn du deine Webseite responsiv anzeigen und bearbeiten möchtest, aber deine Webseite dabei nicht lädt und einen Fehler anzeigt, dann liegt es an den Framing Einschränkungen.
Nutzung der Varify.io® Chrome Extension
Damit du deine Varianten trotzdem auch für mobile Geräte anzeigen und anpassen kannst, hast du die Möglichkeit, die Varify.io® Chrome Extension installieren. Dafür ist es nötig, dass du deine Experimente mit dem Browser: Google Chrome anlegst. Die Browser Extension findest du hier.
Hier erfährst du, wie du die Chrome Extension installierst.
Anpassung der X-Frame-Options auf der eigenen Webseite
Wenn du eine Fehlermeldung wie im obigen Screenshot siehst, kann die Seite aufgrund einer Framing-Beschränkung nicht im responsiven Device Switcher laden.
Die normale Desktop-Ansicht des visuellen Editors ist von den Einschränkungen des Frames nicht betroffen.
Wenn deine Seite mit dem Response-Header X-Frame-Options mit dem Wert “deny” ausgeliefert wird, kann die responsive Bearbeitung nicht genutzt werden.
Eine sinnvolle Lösung wäre in diesem Fall, die Einschränkung auf X-Frame-Options: “sameorigin” zu lockern.
X-Frame-Optionen: “sameorigin” erlaubt die Einbettung deiner Seiten in einen Frame von deiner Domain, aber nicht die Einbettung in andere Webseiten.
Tracking: Keine oder fehlende Daten in GA4
Benutzerdefinierte Definition fehlt oder ist falsch benannt
Bevor du in GA4 Daten empfangen kannst, ist es notwendig, dass eine “Benutzerdefinerte Definitionen” in Google Analytics 4 angelegt wurde. Dabei ist es wichtig, dass du der Anleitung GA4 Direktintegration oder GTM Integration folgst.
GA4 Integration:
Bei der GA4 Integration muss die benutzerdefinierte Definition mit dem Ereignisparameter “varify_abTestShort” angelegt werden.
GTM Integration:
Bei der GTM Integration, muss die benutzerdefinierte Definition für den Ereignisparameter “varify_abTest” angelegt werden.
Es ist wichtig, dass die Schreibweise korrekt ist. Bitte beachte die Groß- und Kleinschreibung.
Der Ereignisparameter kann auch direkt im Dropdown ausgewählt werden. Allerdings erscheint dieser nur, wenn du zuvor:
- Ein erstes Experiment gestartet hast (Setze dafür gerne einen A/A Test auf)
- In dem Experiment sind Testteilnehmer, so dass auch Daten an GA4 gesendet werden
- Die ersten Testdaten laufen erst nach ca. 24 Stunden ein
German 
English 
Portuguese