Par défaut, Contentsquare bloquera les éléments iframe inclus dans les données de session et les empêchera de rendre du contenu. Au lieu du contenu de l'iframe, lors de la visualisation d'un résumé de session ou de la consultation d'une heatmap, vous verrez un message indiquant que nous ne pouvons pas suivre les iframes intégrés sur votre page.
Cet article fournit des conseils sur le suivi du contenu des iframes avec Contentsquare, en détaillant différentes options pour capturer les interactions en fonction de l'endroit où l'étiquette Contentsquare est installée. Il décrit é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'un iframe ?
Un iframe est une page web intégrée dans une autre page web. Il est couramment utilisé 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'un iframe, nous pouvons regarder 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 du Mozilla Developer Network.
Pour bien comprendre cet article, familiarisez-vous avec ces termes :
- page 'parent' de l'iframe - Il s'agit de la page où le code de l'<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.
- page 'source' de l'iframe - Il s'agit de 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ù l'étiquette Contentsquare est installée. Pour suivre les interactions dans un iframe, vous devez pouvoir modifier le code source de l'iframe. Cela peut ne pas être possible pour les iframes tiers. Si le tiers vous permet d'ajouter l'étiquette Contentsquare, il doit également tenir compte du suivi de Contentsquare dans ses politiques de confidentialité et de cookies.
Contentsquare peut être utilisé pour suivre le contenu des iframes de la manière suivante :
- Installer l'étiquette 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 l'étiquette 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 résumés de session et les heatmaps, vous verrez la page parent visitée, mais seules les données des interactions à l'intérieur 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 la même étiquette Contentsquare sur les deux pages parent & source de l'iframe : Contentsquare peut détecter les données à 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 le résumé 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 de la page parent à la page source de l'iframe plutôt que de les visualiser simultanément.
Comment autoriser un iframe dans Contentsquare
Autoriser l'affichage des iframes signifie que Contentsquare ne peut que charger la page de l'iframe, mais ne peut pas suivre les interactions des utilisateurs dans les iframes à moins que vous ayez la possibilité d'ajouter l'étiquette de Contentsquare à la fois sur la page source et l'iframe. Si JavaScript est requis pour le chargement du contenu de l'iframe, autoriser l'iframe peut entraîner l'affichage de l'iframe comme un espace vide dans le résumé de session et les heatmaps.
Avant de commencer
Avant d'autoriser un iframe, prenez en compte les limitations qui persisteront même après avoir autorisé l'iframe :
- L'iframe doit avoir un attribut src.
- Contentsquare ne peut pas autoriser un 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”).
- Le JavaScript sera bloqué dans l'iframe si l'enregistrement est effectué sur la page parent.
- Les interactions (événements de clic et de défilement, saisie, animations CSS, mutations du DOM, etc.) ne seront pas suivies dans l'iframe si la capture est effectuée sur la page parent.
- L'URL vers laquelle pointe l'iframe est stockée sur nos serveurs et rechargée à chaque fois qu'un résumé de session est visionné. 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 un 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 tiers peuvent ne pas s'afficher car ils dépendent du JavaScript, même après avoir autorisé l'iframe. Voici quelques exemples de types de contenu qui ne fonctionneront pas avec un iframe autorisé :
- Chatbots
- Lecteurs vidéo tiers (y compris YouTube et Vimeo)
- Formulaires tiers (y compris les formulaires Typeform)
- La plupart des applications web tierces chargées via des iframes
- La plupart des systèmes de paiement tiers
Cela signifie que Contentsquare ne peut afficher que les aspects suivants d'un iframe autorisé :
- Contenu de page statique (sans JavaScript) chargé via un iframe.
- Le comportement du curseur est suivi par rapport à la page parente.
Autoriser un 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. De toute façon, la valeur s'affichera comme "true" dans le backend.
2. Visitez votre Sites et organisations page.
3. Cliquez sur l'icône d'engrenage des paramètres du site pour accéder à la page des paramètres de votre site.
4. Développez le menu Ciblage et suivi de session.
5. Entrez le nom de domaine de premier niveau que vous souhaitez autoriser sous le titre Domaines d'iframe autorisés.
Entrez uniquement le nom de domaine de premier niveau lors de la saisie des noms de domaine dans le champ Domaines d'iframe autorisés. Le nom de domaine de premier niveau est le domaine sans www, http:// ou https:// connecté à celui-ci. Par exemple, si vous souhaitez autoriser https://www.contentsquare.com/ dans ce champ, le nom de domaine de premier niveau serait contentsquare.com
6. Cliquez sur Enregistrer les modifications.