Dans cet article, nous expliquerons comment Hotjar interagit avec les iframes, les limitations qui existent et les paramètres/fonctionnalités disponibles.
- Comprendre les iframes dans Hotjar
- Quelles sont mes options pour suivre le contenu des iframes avec Hotjar?
- Que signifie autoriser les iframes dans Hotjar?
- Quelles limitations existent après avoir autorisé un iframe?
Comprendre les iframes dans Hotjar
Un iframe peut être décrit comme une page web qui apparaît à l'intérieur d'une autre page web. Ils sont souvent utilisés pour intégrer du contenu provenant de sites web tiers, tels que des chatbots, des vidéos ou des formulaires. Cependant, ils peuvent également être utilisés pour afficher du contenu du même domaine de site web.
Pour déterminer d'où provient le contenu d'un iframe, nous pouvons regarder l'URL source de l'iframe (src=""), qui est affichée dans le code comme ceci:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> Dans l'exemple ci-dessus, l'URL source de l'iframe provient de YouTube.
Vous pouvez en apprendre davantage sur les iframes dans la documentation du Mozilla Developer Network.
Pour tirer le meilleur parti de cet article, il est important de connaître ces termes:
-
page 'parent' de l'iframe - Il s'agit de 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.
Exemple d'une page parent d'iframe (https://www.hotjar.com). -
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.
Exemple de la page source d'iframe correspondante. (https://Hotjar.eu.ada.support)
Hotjar ne suit pas les iframes intégrés sur votre page par défaut
Par défaut, les cartes thermiques et les enregistrements bloqueront les éléments d'iframe qui sont inclus dans les données de session et les empêcheront de rendre du contenu. Au lieu du contenu de l'iframe, en regardant un enregistrement ou en visualisant une carte thermique, vous verrez un message indiquant que Hotjar ne peut pas suivre les iframes intégrés sur votre page:
Quelles sont mes options pour suivre le contenu des iframes avec Hotjar?
Hotjar est uniquement capable de suivre les pages web où le code de suivi Hotjar (code de suivi) est installé. Si le code de suivi est installé sur la page parent de l'iframe, alors le code de suivi suivra cette page, mais il ne suivra ni n'affichera les interactions à l'intérieur de l'iframe (le contenu de la page source de l'iframe).
Il en va de même dans l'autre sens. Si le code de suivi est installé dans la page source de l'iframe, il suivra et affichera les interactions pour la page source, mais il ne suivra ni n'affichera les interactions sur la page parent de l'iframe.
Hotjar peut être utilisé pour suivre le contenu de l'iframe de différentes manières, nous détaillerons chacune d'entre elles dans les paragraphes ci-dessous :
- Installer le code de suivi uniquement sur la page parent de l'iframe
- Installer le code de suivi uniquement sur la page source de l'iframe
- Installer le même code de suivi sur les deux pages de l'iframe, parent & source
Considérations lors de la tentative d'installation du code de suivi Hotjar dans une iframe.
Pour suivre les interactions dans une iframe, vous devrez avoir accès pour modifier le code de la page source de l'iframe. Si vous utilisez une iframe provenant d'un tiers, cela peut ne pas être possible. Si le tiers vous permet d'ajouter votre code de suivi à la page source de leur contenu iframe, ils devront également prendre en compte le suivi Hotjar dans leurs politiques de confidentialité et de cookies.
Installer le code de suivi uniquement sur la page parent de l'iframe
Avec cette approche, Hotjar suivra le contenu de la page parent, mais aucune interaction ne sera suivie à l'intérieur de l'iframe.
Dans les enregistrements et les cartes de chaleur, l'iframe sera bloquée par défaut, et si vous autorisez l'iframe à apparaître, vous verrez une version statique du contenu de la page source de l'iframe, mais Hotjar ne suivra aucune interaction à l'intérieur de l'iframe. Apprenez comment autoriser une iframe.
Installer le code de suivi uniquement sur la page source de l'iframe
Avec cette approche, Hotjar suivra le contenu de la page source de l'iframe, mais aucune interaction ne sera suivie sur la page parent.
Dans les enregistrements et les cartes de chaleur, vous verrez la page parent visitée par l'utilisateur, mais vous ne verrez que la collecte de données basée sur les interactions qui ont eu lieu à l'intérieur de l'élément iframe. Toutes les interactions de l'utilisateur avec la page parent en dehors de l'iframe ne seront pas suivies.
Installer le même code de suivi sur les pages parent & source de l'iframe
Avec cette approche, Hotjar pourra détecter des données à la fois de la page parent et de la page source de l'iframe. Cependant, cela n'est possible que si votre équipe est en mesure de modifier directement le code de la page source de l'iframe (ce qui est rarement possible en utilisant une iframe fournie par un tiers).
Si vous êtes en mesure d'ajouter le code de suivi à la page source de votre iframe et à la page parent, il est important de savoir que le contenu de l'iframe sera traité comme une page distincte dans les enregistrements Hotjar. Au lieu de voir à la fois les interactions de la page parent et de la page source en même temps, Hotjar traitera les interactions avec l'iframe comme un autre onglet dans la session de l'utilisateur.
Cela fera en sorte que l'enregistrement donne l'impression que l'utilisateur clique de manière alternée entre la page parent de l'iframe et la page source de l'iframe au lieu de les voir tous les deux en même temps. En raison des limitations liées aux iframes, il n'est pas possible d'empêcher ce comportement lorsque le code de suivi est ajouté à la fois aux pages parent et source en même temps.
Comment autoriser une iframe dans Hotjar
Hotjar offre la possibilité d'« autoriser » les iframes à apparaître dans les cartes thermiques et les enregistrements. Dans la plupart des cas, cela signifie que Hotjar 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 le code de suivi à la fois sur la page source et 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 les enregistrements et les cartes thermiques.
Avant d'autoriser les iframes sur votre site Hotjar, consultez la section suivante de cet article qui décrit les limitations qui peuvent empêcher les iframes d'être affichés dans Hotjar.
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" en interne.
Cet attribut doit être placé dans l'élément <iframe> lui-même et 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.
Une page source d'iframe se rechargera à chaque fois qu'elle est affichée dans Hotjar
L'URL vers laquelle pointe l'iframe est stockée sur nos serveurs et rechargée à chaque fois qu'un enregistrement est lu. 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.
Rendez-vous sur votre page Sites & Organizations.
Cliquez sur l'icône d'engrenage des paramètres du site 
pour accéder à la page des paramètres de votre site.
Développez le menu Ciblage et suivi de session.
Entrez le nom de domaine de premier niveau que vous souhaitez autoriser sous l'en-tête DOMAINES D'IFRAME AUTORISÉS.
N'entrez que 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.hotjar.com/ dans ce champ, le nom de domaine de premier niveau serait hotjar.com
Cliquez sur Enregistrer les modifications
Quelles limitations existent après avoir autorisé un iframe ?
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.
- Hotjar 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://hotjar.com/page”).
- Le JavaScript sera bloqué dans l'iframe lors de l'enregistrement de 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 lors de l'enregistrement de la page parent.
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. Certains exemples de types de contenu qui ne fonctionneront pas avec un iframe autorisé incluent :
- 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 Hotjar 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 parent.