Application mono-page
Contenus de cette page
À propos des applications à page unique
Les applications à page unique (SPA) sont un type particulier d’application web. Une SPA charge une seule page lorsque vous entrez sur un site web et, à partir de ce moment, charge tout le contenu ultérieur dans cette même page au fur et à mesure que vous naviguez. Ce site semble fonctionner comme un site web normal, mais lorsque vous passez d’une “page” à l’autre, la page ne se recharge pas réellement.
Par défaut, le code de déploiement s’exécute dès le chargement d’une page web. Cependant, comme les SPA ne se rafraîchissent pas lors de la navigation entre les pages, le code de déploiement ne sera pas réévalué au fur et à mesure de la navigation entre les pages. En utilisant les techniques décrites ci-dessous, vous pouvez permettre au code de déploiement de fonctionner sur votre site SPA de manière transparente.
Astuce : certaines de ces techniques utilisent l’API JavaScript de rétroaction des sites web. Pour obtenir une documentation détaillée sur l’API JavaScript pour Qualtrics Website Insights, consultez cette page.
Attention : La mise en œuvre de la documentation suivante nécessite des connaissances en programmation. Nous vous recommandons de transmettre ces informations à l’équipe qui mettra en œuvre votre code de déploiement. Notre équipe d’assistance ne pourra pas vous aider sur les sujets touchant au codage personnalisé. Vous pouvez plutôt tenter de vous adresser à notre communauté d’utilisateurs dédiés. Si vous souhaitez en savoir plus sur les services de codage personnalisés que vous pouvez commander, veuillez contacter votre Compte Qualtrics.
Astuce : Javascript n’est pas inclus dans toutes les licences Qualtrics. Veuillez contacter votre Commercial Qualtrics si vous souhaitez obtenir un accès.
Évaluateur de la logique d’Intercept et de l’activité de suivi en cas de changement d’URL
Si votre application à page unique dépend du routage côté client pour la navigation de l’utilisateur, vous pouvez forcer la réévaluation des interceptions lors de changements d’URL ultérieurs en activant le paramètre Réévaluer la logique d’interception en cas de changement d’URL. Si vous cochez cette option, l’évaluation de la logique d’intercept s’ajoutera à l’évaluation qui a lieu lors du chargement initial de la page.
Astuce : ce paramètre affecte tous les intercepts du projet.
Attention : Si vous décidez d’utiliser ce paramètre SPA en conjonction avec l’option au niveau de l’intercept pour l’affichage avec un code Javascript personnalisé (manuellement), vous devrez toujours appeler la fonction
QSI.API.run();afin d’obtenir l’intercept à afficher sur chaque page de la SPA.
Mise en œuvre manuelle avec l’API JavaScript
Astuce : Pour une documentation détaillée sur l’API JavaScript pour les commentaires sur le site Web de Qualtrics, voir cette page.
Cette méthode explique comment faire basculer votre code de déploiement pour qu’il s’exécute manuellement. Cela signifie que le code de déploiement n’exécutera pas ou n’évaluera pas la logique associée tant que la requête API JavaScript appropriée n’aura pas été initiée.
Pour une mise en œuvre manuelle
Demandes d’API JavaScript
Astuce : Pour une documentation détaillée sur l’API JavaScript pour les commentaires sur le site Web de Qualtrics, voir cette page.
Si vous souhaitez que Qualtrics évalue votre projet en une seule fois, utilisez ces deux requêtes :
Si vous souhaitez que Qualtrics évalue le code de votre projet plus d’une fois sur la même page, répétez les trois étapes suivantes à chaque fois :
FAQs
J'ai activé mon intercept, mais il ne s'affiche pas sur mon site. Pourquoi ?
J'ai activé mon intercept, mais il ne s'affiche pas sur mon site. Pourquoi ?
- Logique: la logique de ciblage des interceptions et la logique de l'ensemble d'actions sont les conditions qui doivent être remplies pour qu'une interception soit affichée à un visiteur. Discover this logic will be helpful in discovering why the Intercept is not displaying on a page actuelle.
- Les ensembles logiques qui utilisent "Contient" : Une cause fréquente d'erreur de logique est l'utilisation de la fonction "Contient" vs. "Est" Dire qu'une condition "contient" signifie que le paramètre sur lequel vous basez la logique (c'est-à-dire l'URL actuelle) aura la valeur spécifiée présente en plus d'autres informations. Par exemple, si j'avais une logique qui disait que l'URL actuelle contient "qualtrics", l'intercept s'afficherait sur toute URL contenant le mot "qualtrics". L'autre possibilité qui s'offre à vous est d'utiliser l'URL actuelle [URL]. Cette condition dépend de la correspondance exacte de l'URL visitée. Toute différence ou caractère supplémentaire empêchera la logique d'intercept de passer.
- Révisions des intercepts: Lorsque des modifications sont apportées aux intercepts, elles ne sont pas mises en ligne tant que l'intercept n'est pas publié. Lorsqu'un Intercept est publié, une version de l'Intercept, ou "révision", est sauvegardée. L'évaluation des révisions effectuées est très utile pour identifier les changements qui ont pu soudainement empêcher l'intercept d'apparaître.
- Fenêtre de débogage: La fenêtre de débogage est un outil précieux pour vérifier pourquoi un intercept ne s'affiche pas sur une page particulière.
Pour les intercepts dont le code de déploiement a été mis en œuvre avant mars 2019, pour activer la fenêtre de débogage, ajoutez à toute URL donnée une chaîne de requête appelée Q_DEBUG. Il doit être précédé d'un ? ou d'un & comme dans les exemples suivants : https://www.qualtrics.com?Q_DEBUG, https://www.qualtrics.com/blog?item=value&Q_DEBUG.
Pour les intercepts dont le code de déploiement a été mis en œuvre après mars 2019, exécutez le snippet JavaScript suivant dans la Console de votre page web :QSI.API.unload() ; QSI.isDebug = true ; QSI.API.load() ; QSI.API.run() ;La fenêtre de débogage décompose toutes les conditions requises pour que les intercepts s'exécutant sur l'URL apparaissent. Si vous constatez qu'un intercept n'apparaît pas, localisez-le dans la fenêtre de débogage et identifiez les éventuels avertissements d'échec en rouge.Astuce: Le débogueur de Website Insights ne fonctionne pas si le code a été implémenté à l'aide d'un gestionnaire de balises. De même, si la chaîne de requête de l'URL contient déjà un ?, le débogueur demandera un & à la place. - Demande de réseau: La plupart des navigateurs possèdent un menu d'outils de développement qui permet à l'utilisateur de voir le code source, les ressources, les cookies et les appels réseau d'un site. Website Insights possède une présence distincte dans la section Réseau de ces outils. Pour vérifier l'exécution de ces scripts, ouvrez les outils de développement et naviguez jusqu'à la section Réseau. Une fois cette étape franchie, rechargez la page web et le menu devrait commencer à s'enrichir de toutes les requêtes réseau effectuées par le site web. Pour identifier le code de Website Insights, recherchez les appels qui commencent par ?Q_ZID ou ?Q_SID. Il s'agit du code lui-même qui effectue des contrôles sur la logique d'affichage. Si vous ne trouvez rien qui corresponde à ce format, c'est qu'il y a un problème dans la mise en œuvre du code de votre projet. Vous pouvez consulter notre page d'assistance sur la mise en œuvre pour obtenir des conseils sur l'endroit le plus approprié pour placer le code.
- Problèmes liés à la politique de sécurité du contenu: Si vous recevez un journal de console qui viole une politique de sécurité du contenu, il y a très probablement une restriction sur votre site Web qui bloque le déploiement de nos intercepts. Nous vous recommandons de contacter votre équipe de développement web pour résoudre ce problème. Pour garantir le bon fonctionnement de vos interceptions, nous recommandons généralement d'autoriser les éléments suivants dans les en-têtes de votre politique de sécurité du contenu :
- connect-src https://*.Qualtrics.com
- frame-src https://*.Qualtrics.com
- img-src https://siteintercept.qualtrics.com
- script-src https://*.Qualtrics.com
- Gestion des URL de SPA : Si votre site utilise un cadre d'application à page unique (SPA), assurez-vous que votre code déclenche history.pushState() lors de la navigation entre les vues. Certains frameworks peuvent réafficher ou mettre à jour l'URL sans pousser une nouvelle entrée dans l'historique, ce qui peut empêcher les intercepts de se déclencher. Si vous utilisez useEffect ou des crochets de cycle de vie similaires, assurez-vous que votre logique d'intercept s'exécute une fois la navigation terminée.
J'ai créé mon intercept mais je voudrais le tester avant l'activation. Comment puis-je faire ça ?
J'ai créé mon intercept mais je voudrais le tester avant l'activation. Comment puis-je faire ça ?
C'est génial! Merci pour votre avis!
Merci pour votre avis!