• Fehlerbehebung - Mögliche Ursachen

    Inhaltsverzeichnis

    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.

    1. 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.

    2. 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. 

    Die Account ID im Dashboard ist "464"
    Falsche Account ID ist integriert - Die Account ID sollte "464" sein

    Varify.io Script ist nicht korrekt integriert

    Siehe hier

    3. Experimente können nicht gestartet werden

    Wenn nach dem Klick auf “Start Experiment” eine Fehlermeldung erscheint und der Test nicht gestartet wird, kann das verschiedene Ursachen haben. In der Regel ist die GA4 Report Integration aktiv. Bitte folgende Bedingungen prüfen:

    1. Die Berechtigung zum Anlegen der Audience in GA4 fehlt beim verbundenen Account.
      Lösung: Die Berechtigung beim Account erteilen lassen oder stattdessen einen Google Account mit der Berechtigung verbinden.

    2. Die GA4 Property hat bereits 99 oder 100 Audiences und es kann keine weitere Audience angelegt werden
      Lösung: Lösche alte, nicht mehr genutzte Audiences aus der GA4 Property.

    3. Sollten 1. und 2. nicht gegeben sein bitte wende dich an den Varify.io Support und wir helfen dir asap.

    4. 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. 

    Lösung: 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 diese Framing Einschränkung mit der Varify.io® Chrome Extension zu umgehen.

    1. Downloade die Varify® Chrome Extension

    2. Aktiviere sie in deinem Browser und hinterlege dein Varify® Code Snippet

    3. Aktiviere den Schalter “Allow Responsive Device Switcher”

    4. Lade die Seite erneut – Fertig!

    Nun sollte der Responsive Device Switcher funktionieren.

    Eine ausführlichere Erklärung zur Installation und Aktivierung, sowie weiteren Funktionen findest du hier: Varify® Chrome Browser-Erweiterung

    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.

    5. 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

    6. Varify.io - Events testen im Realtime-Report

    Um in Google Analytics 4 (GA4) zu überprüfen, ob die Varify.io – Events ankommen kannst du den Realtime Report verwenden. Dabei gibt es kleinere Unterschiede, je nachdem ob du dein Tracking über die Direktintegration oder den Google Tag Manager angebunden hast.

    GA4 Direktintegration

    1. Navigiere zu “Reports” und klicke auf “Realtime”.

    2. Löse ein Varify.io – Event aus. Beispielsweise durch das Aufrufen einer Seite auf der ein A/A-Test läuft.

    Im Realtime Report kannst du nun direkt sehen, ob die erwarteten Events erfasst werden. In der Kachel “Event Count by Event Name” sollte nach ein paar Sekunden das entsprechende Event “varify” erscheinen. Du kannst dann darauf klicken, um den Event parameter zu überprüfen. Hier sollte nun “varify_abTestShort” sichtbar sein.

    Google Tag Manager Integration

    1. Navigiere zu “Reports” und klicke auf “Realtime”.

    2. Löse ein Varify.io – Event aus. Beispielsweise durch das Aufrufen einer Seite auf der ein A/A-Test läuft

    Im Realtime Report kannst du nun direkt sehen, ob die erwarteten Events erfasst werden. In der Kachel “Event Count by Event Name” sollte nach ein paar Sekunden das entsprechende Event “Abtesting” erscheinen. Du kannst dann darauf klicken, um den Event parameter zu überprüfen. Hier sollte nun “varify_abTest” sichtbar sein.

    7. Seiten Flackern - Flickering Effekt

    Dieser Effekt entsteht, weil das A/B-Testing-Tool zunächst die Originalversion lädt und dann die Variation darüber legt. Während dieses Übergangsprozesses kann es zu kurzzeitigen Änderungen im Design, Layout oder Inhalt der Seite kommen, die für den Nutzer sichtbar sind. Dies führt zu einem unerwünschten “Flackern” oder “Flickern” auf dem Bildschirm des Nutzers.

    Der Flickering-Effekt kann frustrierend sein und die Nutzererfahrung negativ beeinflussen.

    Um dem entgegenzuwirken kann eine Anti-Flicker-Script genutzt werden, welches den Flicker-Effekt für deine Nutzer verhindert. Eine genaue Anleitung dazu findest du hier: Anti-Flicker-Script.

     

    8. Besucher werden während einer Session / nach akzeptieren von Cookies in andere Varianten geleitet

    In diesem Fall sort der CMP Anbieter dafür, dass Session- oder Local-Storage des browsers geleert werden, sobald das Tracking akzeptiert wurde. Sollte das der Fall sein musst du lediglich Varify.io® bzw. app.varify.io als Anbieter im CMP Tool anlegen und kategorisieren. Hier ein Beispiel zu Cookiebot:

  • Erste Schritte

    Tracking & Auswertung

    Targeting

    Advanced

    Funktionsübersicht