J'ai un problème pour faire afficher un questionnaire sur mon site web

Vous avez déployé votre questionnaire sur votre site web de recette ou en production, mais vous rencontrez des problématiques d'affichage ?

Cet article répertorie les problèmes courants liés à l’affichage d’un questionnaire sur un site web et propose des solutions pour identifier et résoudre chaque type de problème. Il s'applique aux diffusions site web, pop-in, pop-under, barre, bouton et inpage.

Lexique des diffusions site web

Une diffusion web est un canal permettant d'intégrer un questionnaire dans un site internet. Elle peut être affichée sous différentes formes : bouton, barre, pop-under, pop-in et inpage (en savoir plus sur la création d'une diffusion web).

Une diffusion en iFrame (Inline Frame) est une diffusion URL intégrée manuellement dans un site internet à l’aide d’un élément HTML <iframe> sans interférer avec le code de la page hôte. Le chargement et les interactions sont gérés par l'iframe elle-même. Skeepers ne prend pas en charge les problèmes techniques qui pourraient survenir dans cette configuration car l'intégration n'est pas gérée par la plateforme.

Une condition de déclenchement est un critère spécifique qui doit être respecté pour déclencher un événement. Dans ce contexte, l'événement en question correspond à l'affichage du questionnaire sur un site web. Une condition peut être basée sur une date, une plateforme,  une valeur spécifique ou un événement configuré en amont dans la diffusion.

Une sollicitation correspond à un affichage de questionnaire intégré dans un site web (pop-in, bouton, barre ou pop-under).

Une intention de sortie est une condition de déclenchement d'une diffusion web qui détecte lorsque le visiteur déplace sa souris vers la zone des onglets du navigateur, ce qui est interprété comme une indication qu'il s'apprête à quitter la page ou fermer l'onglet.

Un domaine est une adresse unique utilisée pour identifier un site web sur Internet. Il fait partie intégrante d'un URL et est composé de deux parties : le nom de domaine et l'extension de domaine -".com", ".fr", etc.- (en savoir plus sur les domaines).

Un chemin URL correspond à la partie de l'URL située après le nom de domaine et qui indique l'emplacement d'une page spécifique au sein d'un site, en fonction de la structure hiérarchique de celui-ci. Il exclut les paramètres et ancres qui le suivent.

Un tag de déclenchement est un script (Javascript) à implanter dans un site web ou un gestionnaire de tag pour afficher un questionnaire en ligne. Lorsque le tag est intégré et activé, il s'assure que les conditions de déclenchement sont remplies, collecte des données et charge le questionnaire sur la page (en savoir plus sur l'intégration d'un tag de déclenchement).

Une SPA (Single Page Application) est un type de site internet où le contenu d'une page web est mis à jour dynamiquement sans rechargement complet de celle-ci. Contrairement aux pages traditionnelles (Multi-Page Application ou MPA), où un simple rechargement déclencherait le script, une SPA nécessite une gestion plus avancée des événements pour s'assurer que le questionnaire s'affiche correctement lorsque les conditions sont remplies.

La Console est un outil intégré aux navigateurs web qui permet d'exécuter des commandes pour tester des scripts, vérifier la collecte des données et afficher les erreurs.

Une commande est une instruction saisie dans la Console pour interagir en temps réel avec la page web affichée. Elle permet d'exécuter diverses actions, telles que la vérification du code JavaScript, l'inspection des éléments de la page ou le débogage du script.

Le CSS (Cascading Style Sheets) est un langage de programmation utlisé dans la plateforme pour personnaliser l'aspect graphique d'un questionnaire ou d'une diffusion web (couleur, police, alignement, taille, etc.). Tandis que le HTML gère la structure d'une page web, le CSS en contrôle l'apparence graphique. Cependant, des conflits peuvent survenir lorsque les règles CSS appliquées sont contradictoires ou redondantes avec la structure HTML d'un site web. Cela peut entraîner des comportements inattendus dans l'affichage des éléments de la page (en savoir plus sur la personnalisation avancée par CSS).

Le DOM (Document Object Model) est une interface qui structure le contenu HTML d'une page web de manière hiérarchique, où chaque élément (balises, texte, etc.) est identifié. Grâce à cette organisation, le tag de déclenchement peut manipuler dynamiquement le contenu de la page, et ce, en temps réel, sans recharger la page, afin d'intégrer directement le questionnaire.

La Content Security Policy (CSP) est une mesure de sécurité qui limite les ressources pouvant être chargées sur une page web (scripts, images, styles, etc.). Elle spécifie les sources de contenu (internes et externes) autorisées. Si une source non autorisée est détectée, le navigateur bloque automatiquement son chargement (en savoir plus sur le CSP).

Introduction

Dans le cadre de l'intégration de questionnaires sur un site web, il est fréquent de rencontrer diverses problématiques d'affichage qui peuvent affecter l'expérience utilisateur et l'efficacité de la collecte de feedbacks.

Que vous soyez confronté à des difficultés liées à l'apparence de votre questionnaire en ligne ou à son déclenchement sur votre site web, ces problèmes peuvent provenir de multiples configurations qui peuvent vous paraitre anodines. En explorant les différentes hypothèses et leurs solutions, vous serez mieux préparé à assurer une présentation optimale de vos questionnaires en ligne.

Pour les diffusions en iFrame, Skeepers ne met à disposition qu'un lien URL menant à votre questionnaire. Vous êtes autonomes dans l'implémentation de ce lien dans votre site internet. Si le questionnaire s'affiche correctement en URL, le Support Skeepers n'a pas la main et la compétence pour vous accompagner dans les problèmes d'intégration de ce lien URL dans votre site internet. Nous vous invitons à privilégier plutôt les diffusions de type InPage qui sont plus modernes et configurables directement sur la plateforme.

Outils

Pour suivre certaines étapes de vérification décrites dans cette documentation, il est nécessaire d'exécuter des commandes spécifiques dans la console de votre navigateur. Si vous n'êtes pas assez à l'aise, n'hésitez pas à vous faire accompagner en interne par un intégrateur technique web/IT/SI local. Une expertise d'intégration web est parfois nécessaire afin d'identifier rapidement les éléments bloquants.

Pour ouvrir la Console, vous devez vous rendre dans la page où est censée s'afficher votre questionnaire, opérer un clic droit dans la page puis choisir "Inspecter". Il ne reste plus qu'à sélectionner l'onglet "Console" pour la faire apparaitre. Toutes les commandes doivent être écrites dans l'encadré blanc en bas de page : 

Vous pouvez également accéder à la console de votre navigateur en appuyant sur la touche F12 (ou fn + F12 sur certains claviers).

Cas 1 : Votre diffusion web n'apparait pas du tout sur votre site web

Votre campagne avec diffusion web présente l'un des dysfonctionnements d'affichage suivants :

  • Le questionnaire ne s'affiche pas du tout sur votre site web
  • Le questionnaire s'affiche en environnement de recette mais pas en environnement de production
  • Le questionnaire s'affiche en environnement de production mais pas en environnement de recette

Si vous êtes concerné(e) par l'une des problématiques évoquées ci-dessus, nous vous encourageons à consulter notre article Résoudre un problème de déclenchement de diffusion web.

Cas 2 : Votre diffusion web ne s'affiche pas correctement sur votre site web

Votre campagne avec diffusion web présente l'un des dysfonctionnements d'affichage suivants :

  • Le questionnaire ne s'affiche pas sur la page voulue
  • Le questionnaire s'affiche sur une autre page que celle voulue
  • Le questionnaire s'affiche correctement en environnement de recette mais pas en environnement de production
  • Le questionnaire s'affiche correctement en environnement de production mais pas en environnement de recette
  • Le questionnaire ne s'affiche pas au bon moment sur la page voulue

Si vous êtes concerné(e) par l'une des problématiques évoquées ci-dessus, nous vous encourageons à consulter notre article Résoudre un problème de déclenchement de diffusion web.

Cas 3 : Votre diffusion web rencontre des problèmes de mise en page et de design sur votre site web

Votre campagne avec diffusion web présente l'un des dysfonctionnements d'affichage suivants :

  • Le questionnaire apparait vide dès l'ouverture
  • Le questionnaire apparait de façon incorrecte après une page spécifique
  • Le questionnaire est disproportionné (élargi, minimisé, déformé)
  • Les visuels et images du questionnaire sont déformés ou désalignés
  • Le design ou la police du questionnaire ne s'affiche pas correctement

Si vous êtes concerné(e) par l'une des problématiques évoquées ci-dessus, nous vous encourageons à consulter notre article Corriger un problème de design sur une diffusion web.

Lexique des commandes de la console

Commande Utilisation
document.domain Permet de vérifier quel domaine est lié à la page affichée
_Mfb_domain Permet de vérifier le domaine qui est associé au tag posé sur le site
_Mfb_ud Permet de vérifier les attributs qui sont valorisés sur la page via le tag
MFB.start()

Permet d'évaluer (ou de réévaluer) les conditions de déclenchement sur la page, et déclenche le questionnaire si les conditions sont réunies

MFB.deployment_timestamp

Permet de récupérer la date de dernière mise à jour du tag de déclenchement. Après des modifications sur une diffusion web dans Skeepers, l'actualisation du script n'est pas instantanée, quelques minutes sont nécessaires. Si l'horodatage est récent, l'intégration est à jour. En revanche, s'il est antérieur aux changements, la mise à jour n'a probablement pas encore été appliquée

Pour traduire l'horodatage, il est nécessaire de copier la réponse à la commande dans un convertisseur de timestamp (https://www.epochconverter.com/)

window.document.referrer

Permet de récupérer l'URL de la page précédente à partir de laquelle l'utilisateur a navigué vers la page actuelle ; la valeur peut être vide si le visiteur accède directement à la page ou si le site précédent n'a pas transmis d'information pour des raisons de confidentialité

navigator.userAgent

Permet de détecter la version du navigateur, la plateforme et le système d'exploitation du visiteur d'un site

localStorage.getItem("mfb.actor.beta.s.nbp")

Permet de vérifier le nombre de pages visitées comptabilisées sur le domaine durant la session

JSON.parse(localStorage.getItem("mfb.actor.beta.s.pagesVisited"));

Permet de récupérer le détail des chemins URL visités ainsi que le nombre de visites de chaque chemin URL durant la session

window.location.pathname

Permet de vérifier le chemin URL de la page actuelle

parsedData = JSON.parse(localStorage.getItem('mfb.actor.beta.pagesHistory')).visitedPages;
Object.keys(parsedData).forEach(k => {
parsedData[k].time = new Date(parsedData[k].time);
});parsedData

Permet de récupérer le détail des chemins URL visités, le nombre de visites de chaque chemin URL et l'horodatage de chaque visite en fonction de l'historique

new Date(localStorage.getItem("mfb.actor.beta.s.startDateTimeOnSite")*1)

Permet de vérifier l'horodatage du début de la session actuelle sur le site

parsedData = JSON.parse(localStorage.getItem('mfb.actor.beta.pagesHistory')).visitedPages;
new Date(parsedData.at(-1).time)

Permet de vérifier l'horodatage du début de la session actuelle sur la page

parsedData = JSON.parse(localStorage.getItem('mfb.actor.beta.campaignVisits'));
Object.keys(parsedData).forEach(k => {
parsedData[k] = new Date(parsedData[k]);
});parsedData

Permet de récupérer l'horodatage des sollicitations relatives à l'affichage de campagnes, avec détails par ID

parsedData = JSON.parse(localStorage.getItem('mfb.actor.beta.deploymentVisits'));
Object.keys(parsedData).forEach(k => {
parsedData[k] = new Date(parsedData[k]);
});parsedData

Permet de récupérer l'horodatage des sollicitations relatives à l'affichage de diffusions, avec détails par ID

Vous n'avez pas réussi à résoudre votre problématique ?

Après avoir consulté et suivi notre documentation, contactez-nous via l'Icône de Contact disponible dans le menu latéral gauche de la plateforme.

Avant de nous écrire, veuillez effectuer les vérifications suivantes en nous joignant les captures d’écran demandées :

  1. L'URL exact où est censé s'afficher votre questionnaire avec diffusion web

  2. L'URL où vous avez effectué vos tests d'affichage (si différent de l'élément précédent)
  3. Précision si l'URL est accessible pour les équipes Skeepers, si possible faîtes le nécessaire pour nous fournir un accès
  4. Le nom de votre diffusion dans la plateforme Skeepers ainsi que son lien d'accès direct
  5. Une capture d'écran de la console après la saisie de la commande "_Mfb_ud"

  6. Une capture d'écran de la console après la saisie de la commande "_Mfb_domain"

  7. Une capture d'écran de la console après la saisie de la commande "MFB.start()"

    Si vous avez une condition de temps il faut attendre le temps nécessaire avant la capture d'écran du MFB.start(). Par exemple s'il faut attendre 5 secondes il faut faire MFB.start() et attendre les 5 secondes avant la capture

Sans l'ensemble de ces éléments, il nous sera impossible de procéder à une analyse complète de votre problématique.

Suite à l'envoi de votre demande, merci de ne procéder à aucune modification de votre diffusion web. Cela permettra aux équipes Skeepers de réaliser les investigations indispensables à la résolution de votre problématique.

Si cette consigne n'est pas respectée, nos conclusions pourraient ne pas être fiables, car elles risqueraient de ne pas refléter l'état réel de la diffusion.

Lorsque vous prenez des captures d'écran, assurez-vous d'inclure tous les éléments en couvrant toute la page, la barre de navigation avec l'URL visible, ainsi que l'intégralité de la console avec toutes les valeurs affichées. Cela nous permettra de disposer de toutes les informations nécessaires pour une analyse approfondie.

N'oubliez pas également de cliquer sur la flèche située à la gauche de la réponse à votre commande pour la développer et faire afficher tous les éléments.

   

 

Si vous avez des questions, n'hésitez pas à contacter notre équipe Customer Care.

 

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 2 sur 4