Traduit de l'anglais à l'aide de l'IA
Veuillez noter que cet article a été traduit à l'aide de la technologie IA. Bien que nous travaillions à maintenir l'exactitude, certains détails peuvent ne pas refléter parfaitement le texte original. Si vous avez des doutes sur une information, veuillez vous référer à la version anglaise.
Par défaut, Contentsquare bloquera les éléments iframe inclus dans les données de session et empêchera leur contenu de s'afficher. Au lieu du contenu de l'iframe, lors de la visualisation d'une relecture de session ou d'une heatmap, vous verrez un message indiquant que nous ne pouvons pas suivre les iframes intégrées sur votre page.
Ce document fournit des conseils sur le suivi du contenu des iframes avec Contentsquare, décrivant différentes options pour capturer les interactions en fonction de l'endroit où le tag de Contentsquare est installé. Il détaille également les étapes requises et les attributs HTML pour activer les iframes, ainsi que les considérations et restrictions liées au comportement des iframes et au contenu tiers.
Qu'est-ce qu'une iframe ?
Une iframe est une page web intégrée dans une autre page web. Elle est couramment utilisée pour afficher du contenu provenant de sites tiers, comme des chatbots, des vidéos ou des formulaires, mais peut également afficher du contenu du même domaine.
Pour déterminer d'où provient le contenu d'une iframe, nous pouvons examiner l'URL source de l'iframe (src=""). Dans cet exemple, l'URL source de l'iframe provient de YouTube :
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> Vous pouvez en savoir plus sur les iframes dans la documentation de Mozilla Developer Network.
Pour bien comprendre cet article, familiarisez-vous avec ces termes :
- iframe 'page' parent - C'est la page où le code <iframe> a été ajouté. Cette page a généralement son propre contenu mais inclut également le contenu de l'iframe intégré. C'est la page que vos utilisateurs visiteront dans leur navigateur.
- iframe 'page' source - C'est la page d'où provient le contenu de l'iframe. L'URL de la page source n'est généralement pas une page à laquelle vos utilisateurs accéderaient directement.
Quelles sont mes options pour suivre le contenu des iframes avec Contentsquare ?
Contentsquare ne peut suivre que les sessions sur les pages où le tag de Contentsquare est installé. Pour suivre les interactions dans une iframe, vous devez être en mesure de modifier le code source de l'iframe. Cela peut ne pas être possible pour les iframes tierces. Si le tiers vous permet d'ajouter le tag de Contentsquare, il doit également prendre en compte le suivi de Contentsquare dans ses politiques de confidentialité et de cookies.
Contentsquare peut être utilisé pour suivre le contenu des iframes de plusieurs manières :
- Installer le tag de Contentsquare uniquement sur la page parent de l'iframe : Contentsquare suivra le contenu de la page parent, mais aucune interaction ne sera suivie à l'intérieur de l'iframe.
- Installer le tag de Contentsquare uniquement sur la page source de l'iframe : Contentsquare suivra le contenu de la page source de l'iframe, mais les interactions sur la page parent ne seront pas suivies. Dans les replays de session et les heatmaps, vous verrez la page parent visitée, mais seules les données des interactions au sein de l'iframe seront capturées. Toute interaction de l'utilisateur avec la page parent en dehors de l'iframe ne sera pas capturée.
- Installer le même tag de Contentsquare sur les deux pages parent & source de l'iframe : Contentsquare peut détecter des données provenant à la fois de la page parent et de la page source de l'iframe. Le contenu de l'iframe est traité comme une page distincte dans la relecture de session. Les interactions avec l'iframe apparaissent comme un autre onglet dans la session de l'utilisateur, donnant l'impression que l'utilisateur passe d'une page parent à une page source d'iframe plutôt que de les visualiser simultanément.
Comment autoriser une iframe dans Contentsquare
Autoriser les iframes à apparaître signifie que Contentsquare peut uniquement charger la page de l'iframe, mais ne peut pas suivre les interactions des utilisateurs au sein des iframes à moins que vous ayez la possibilité d'ajouter le tag de Contentsquare à la fois sur la page source et sur l'iframe. Si JavaScript est requis pour que le contenu de l'iframe se charge, autoriser l'iframe peut entraîner l'affichage de l'iframe comme un espace vide dans la relecture de session et les heatmaps.
Avant de commencer
Avant d'autoriser une iframe, considérez les limitations qui persisteront même après avoir autorisé l'iframe :
- L'iframe doit avoir un attribut src.
- Contentsquare ne peut pas autoriser une iframe si son attribut src utilise un chemin de page relatif (Exemple : src=“/page”) au lieu de l'URL complète (Exemple : src=“https://contentsquare.com/page”).
- JavaScript sera bloqué au sein de l'iframe si l'enregistrement de la page parent est en cours.
- Les interactions (clics et événements de défilement, saisie, animations CSS, mutations DOM, etc.) ne seront pas suivies dans l'iframe si la page parent est capturée.
- L'URL à laquelle l'iframe pointe est stockée sur nos serveurs et rechargée chaque fois qu'une relecture de session est jouée. Cela signifie que si le chargement de la page source de l'iframe déclenche un comportement supplémentaire, cela pourrait entraîner des résultats inattendus et indésirables.
- Autoriser une iframe signifie ajouter un attribut à l'élément <iframe> lui-même. Il ne peut pas être placé dans l'élément parent de l'iframe. De nombreux outils tiers ne vous permettent pas de modifier leurs éléments <iframe>, ce qui signifie qu'ils ne peuvent pas être autorisés.
Ces limitations signifient que la plupart des iframes tierces peuvent ne pas s'afficher car elles dépendent de JavaScript, même après avoir autorisé l'iframe. Quelques exemples de types de contenu qui ne fonctionneront pas avec une iframe autorisée incluent :
- Chatbots
- Lecteurs vidéo tiers (y compris YouTube et Vimeo)
- Formulaires tiers (y compris les formulaires Typeform)
- La plupart des applications web tierces qui sont chargées via des iframes
- La plupart des systèmes de paiement tiers
- Contenu de page statique (sans JavaScript) se chargeant via une iframe.
- Le comportement du curseur est suivi par rapport à la page parent.
Autoriser une iframe dans Contentsquare
1. Ajoutez data-hj-allow-iframe en tant qu'attribut HTML à votre iframe.
Vous pouvez le faire en ajoutant un attribut HTML, data-hj-allow-iframe, à l'iframe que vous souhaitez afficher.
<iframe src="https://example.com/page.html" data-hj-allow-iframe=""></iframe> Cela peut être écrit comme data-hj-allow-iframe="", data-hj-allow-iframe="true", ou simplement data-hj-allow-iframe. Dans tous les cas, la valeur apparaîtra comme "true" sur le backend.
2. Visitez votre page Sites & Organizations.
3. Cliquez sur l'icône d'engrenage des paramètres du site pour visiter votre page de paramètres de site.
4. Développez le menu Ciblage & suivi de session.
5. Entrez le nom de domaine de premier niveau que vous souhaitez autoriser sous le titre Domaines iframe autorisés.
Entrez uniquement le domaine de premier niveau lors de la saisie des noms de domaine dans le champ Domaines iframe autorisés. Le domaine de premier niveau est le domaine sans www, http:// ou https:// qui y est connecté. Par exemple, si vous souhaitez autoriser https://www.contentsquare.com/ dans ce champ, le domaine de premier niveau serait contentsquare.com.
6. Cliquez sur Enregistrer les modifications.