• Dépannage - Causes possibles

    Table des matières

    En bref

    En cas de problèmes liés au chargement de l'éditeur, à l'enregistrement des variantes ou au suivi des variantes, cette page énumère les causes possibles et décrit comment les résoudre.

    L'éditeur ne se charge pas

    Si tu appelles ton site web via le tableau de bord Varify.io mais que l'éditeur Varify.io ne se charge pas, c'est dans la plupart des cas parce que le script Varify.io n'est pas intégré correctement sur ton site web ou que ton site web utilise une politique de sécurité du contenu. 

    Le script est-il correctement installé ?

    Le moyen le plus simple de vérifier si le snippet a été correctement implémenté est d'ouvrir la console du navigateur :

    1. clique avec le bouton droit de la souris sur une zone vide de ta page web
    2. choisis "Inspecter" ou "Examiner l'élément".
    3. sélectionne l'onglet "Console", saisis le texte varify et appuie sur la touche "Entrée".

    Si tu vois ton ID de compte dans le champ "iid" et que la valeur "loaded : true" est affichée, le script a été correctement implémenté.

    Dans l'exemple suivant, tu peux voir une erreur fréquente. Avant le script Varify.io intégré, il y a une autre balise ouverte. Cela a pour conséquence que le script Varify.io ne peut pas être chargé correctement. 

    Politique de sécurité du contenu (CSP)

    Les sites Web peuvent mettre en œuvre une politique de sécurité du contenu (CSP) en utilisant l'en-tête HTTP Response Politique de sécurité du contenu ou utiliser un <meta>-jour avec le http-equip Valeur "Politique de sécurité du contenu" indiquer.

    ℹ️ Au lieu de faire aveuglément confiance à tout ce que fournit un serveur, le CSP définit l'en-tête HTTP "Content-Security-Policy", qui permet de définir une liste de contrôle d'accès des sources dont le contenu est digne de confiance. Il indique également au navigateur de n'exécuter ou de n'afficher que les ressources provenant de ces sources.

    Au lieu de faire aveuglément confiance à tout ce que fournit un serveur, la CSP définit l'en-tête HTTP "Content-Security-Policy", qui te permet de créer une liste de contrôle d'accès des sources de contenus fiables. En outre, il indique au navigateur d'exécuter ou d'afficher des ressources provenant exclusivement de ces sources.

    Comment reconnaître les erreurs CSP

    Tu dois adapter ton CSP pour utiliser Varify.io si :

    a) tu vois une erreur comme celle-ci dans la console de ton navigateur

    Cette page utilise des fonctions de sécurité qui sont incompatibles avec l'éditeur varify.io.

    b) tu vois une erreur comme celle-ci dans Google Developer Tools :

    Refusé d'exécuter editor.varify.io parce qu'il viole la directive suivante de la politique de sécurité du contenu...

    c) tu vois une erreur comme celle-ci

    La politique de sécurité du contenu de votre site bloque l'utilisation de 'eval' dans JavaScript.

    Comment corriger les erreurs CSP

    Si ton site utilise un (CSP), les valeurs suivantes doivent y être inscrites :

    • https://app.varify.io et
    • https://editor.varify.io

     

    De plus, dans la script-src, la directive "unsafe-eval" peuvent être ajoutés.

    Pour utiliser le Responsive Device Switcher, ton domaine doit être inclus à la fois dans le frame-ancestors que dans la frame-src directive.

    Exemple

    “`
    Politique de sécurité du contenu : frame-ancestors {YOUR_DOMAIN} ; frame-src {YOUR_DOMAIN} ; script-src 'unsafe-eval' https://app.varify.io https://editor.varify.io ;
    “`

    Remarque :
    La valeur unsafe-eval doit être définie pour que le Javascript personnalisé puisse être livré par la variation.

    Les variantes ne sont pas enregistrées

    Tu peux effectuer des modifications avec l'éditeur visuel, mais tu ne peux pas enregistrer de variantes ? Alors c'est parce que le script Varify.io n'est pas intégré correctement.

    Mauvaise ID de compte

    Vérifie que l'ID de compte dans le script intégré sur ta page correspond à l'ID de compte de ton tableau de bord Varify.io. 

    L'ID de compte dans le tableau de bord est "464".
    Un mauvais ID de compte est intégré - L'ID de compte devrait être "464".

    Le script Varify.io n'est pas intégré correctement

    Voir ici

    Le Responsive Device Switcher n'affiche pas la page web

    Si tu veux afficher et modifier ton site web de manière responsive, mais que ton site web ne se charge pas et affiche une erreur, cela est dû aux restrictions de cadrage. 

    Solution : utiliser l'extension Varify.io® Chrome

    Pour que tu puisses quand même afficher et adapter tes variantes pour les appareils mobiles, tu as la possibilité de contourner cette restriction de cadrage avec l'extension Varify.io® Chrome.

    1. télécharge la Extension Varify® Chrome

    2. active-les dans ton navigateur et dépose ton code snippet Varify®.

    3. active le bouton "Allow Responsive Device Switcher".

    4. recharge la page - Prêt !

    Le Responsive Device Switcher devrait maintenant fonctionner.

    Tu trouveras ici une explication plus détaillée sur l'installation et l'activation, ainsi que sur d'autres fonctions : Extension du navigateur Varify® Chrome

    Adaptation des options X-Frame sur son propre site web

    Si tu vois un message d'erreur comme dans la capture d'écran ci-dessus, cela signifie que la page ne peut pas se charger dans le Device Switcher responsive en raison d'une restriction de cadrage.

    L'affichage normal du bureau de l'éditeur visuel n'est pas affecté par les restrictions du cadre.

    Si ta page avec l'en-tête de réponse Options X-Frame avec la valeur "deny" n'est pas livré, le traitement responsive ne peut pas être utilisé.

    Une solution judicieuse dans ce cas serait de se limiter aux options X-Frame : sameorigin" de se détendre.

    Options X-Frame : "sameorigin" permet d'intégrer tes pages dans un cadre de ton domaine, mais pas de les intégrer dans d'autres pages web.

    Suivi : données inexistantes ou manquantes dans GA4

    Définition définie par l'utilisateur manquante ou mal nommée

    Avant de pouvoir recevoir des données dans GA4, il est nécessaire qu'une "Définition personnalisée" soit créée dans Google Analytics 4. Pour cela, il est important que tu suives les instructions GA4 Intégration directe ou pour des Intégration de GTM suis.

    GA4 Intégration :

    Dans le cas de l'intégration GA4, la définition définie par l'utilisateur doit être associée au paramètre d'événement "varify_abTestShort" doit être créé. 

    Intégration de GTM :

    Lors de l'intégration GTM, la définition personnalisée du paramètre d'événement doit être "varify_abTest" doit être créé.

    Il est important que l'orthographe soit correcte. Merci de respecter les majuscules et les minuscules. 

    Le paramètre d'événement peut aussi être sélectionné directement dans la liste déroulante. Cependant, celui-ci n'apparaît que si tu as préalablement :

    • Tu as commencé une première expérience (n'hésite pas à mettre un Test A/A sur)
    • Dans l'expérience, il y a des participants au test, de sorte que les données sont également envoyées au GA4.
    • Les premières données de test n'arrivent qu'après environ 24 heures

    Varify.io - Tester des événements dans un rapport en temps réel

    Pour vérifier dans Google Analytics 4 (GA4) si les événements Varify.io arrivent à destination, tu peux utiliser le rapport en temps réel. Il y a de petites différences selon que tu as connecté ton tracking via l'intégration directe ou via Google Tag Manager.

    GA4 Intégration directe

    1. Navigue vers "Reports" et clique sur "Realtime".

    2. Déclenche un événement Varify.io. Par exemple, en appelant une page sur laquelle un test A/A est en cours.

    Dans le rapport en temps réel, tu peux maintenant voir directement si les événements attendus sont saisis. Dans la vignette "Event Count by Event Name", l'événement correspondant devrait apparaître après quelques secondes.varify"apparaîtra. Tu peux alors cliquer dessus pour vérifier le paramètre d'événement. Ici, tu devrais voir "varify_abTestShort" doit être visible.

    Intégration de Google Tag Manager

    1. navigue vers "Rapports" et clique sur "Temps réel".

    2. déclencher un événement Varify.io. Par exemple, en appelant une page sur laquelle un test A/A est en cours.

    Dans le rapport en temps réel, tu peux maintenant voir directement si les événements attendus sont saisis. Dans la vignette "Event Count by Event Name", l'événement correspondant devrait apparaître après quelques secondes.Testing"apparaîtra. Tu peux alors cliquer dessus pour vérifier le paramètre d'événement. Ici, tu devrais voir "varify_abTest" doit être visible.

    Scintillement des pages - effet de scintillement

    Cet effet est dû au fait que l'outil de test A/B charge d'abord la version originale avant d'y superposer la variation. Pendant ce processus de transition, il peut y avoir des changements momentanés dans le design, la mise en page ou le contenu de la page, qui sont visibles pour l'utilisateur. Cela entraîne un "scintillement" ou un "flicker" indésirable sur l'écran de l'utilisateur.

    L'effet de scintillement peut être frustrant et avoir un impact négatif sur l'expérience utilisateur.

    Pour y remédier, tu peux utiliser un script anti-scintillement qui empêche l'effet de scintillement pour tes utilisateurs. Tu trouveras des instructions détaillées à ce sujet ici : Script anti-scintillement.

     

    Les visiteurs sont redirigés vers d'autres variantes pendant une session / après l'acceptation de cookies

    Dans ce cas, le fournisseur CMP veille à ce que la session ou le stockage local du navigateur soient vidés dès que le suivi est accepté. Si c'est le cas, il te suffit de créer et de catégoriser Varify.io® ou app.varify.io comme fournisseur dans l'outil CMP. Voici un exemple de Cookiebot :

  • Premiers pas

    Suivi et évaluation

    Ciblage

    Advanced

    Aperçu des fonctions