En este artículo, explicaremos cómo Hotjar interactúa con iframes, las limitaciones que existen y los ajustes/características disponibles.
- Comprender los iframes dentro de Hotjar
- ¿Cuáles son mis opciones para rastrear contenido de iframes con Hotjar?
- ¿Qué significa permitir iframes dentro de Hotjar?
- ¿Qué limitaciones existen después de permitir un iframe?
Comprender los iframes dentro de Hotjar
Un iframe se puede describir como una página web que aparece dentro de otra página web. A menudo se utilizan para incrustar contenido de sitios web de terceros, como chatbots, videos o formularios. Sin embargo, también se pueden utilizar para mostrar contenido del mismo dominio del sitio web.
Para determinar de dónde proviene el contenido de un iframe, podemos ver la URL de origen del iframe (src=""), que se muestra en el código de esta manera:
<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ"></iframe> En el ejemplo anterior, la URL de origen del iframe proviene de YouTube.
Puedes obtener más información sobre iframes en la documentación de la Red de Desarrolladores de Mozilla.
Para sacar el máximo provecho de este artículo, es importante conocer estos términos:
-
página 'padre' del iframe - Esta es la página donde se ha agregado el código <iframe>. Esta página suele tener su propio contenido pero también incluye el contenido incrustado del iframe. Es la página que tus usuarios visitarán en su navegador.
Ejemplo de una página padre de iframe (https://www.hotjar.com). -
página 'fuente' del iframe - Esta es la página de donde proviene el contenido del iframe. La URL de la página fuente generalmente no es una página a la que tus usuarios accederían directamente.
Ejemplo de la página fuente correspondiente del iframe. (https://Hotjar.eu.ada.support)
Hotjar no rastrea iframes incrustados en tu página de forma predeterminada
Por defecto, los Mapas de Calor y las Grabaciones bloquearán los elementos iframe que se incluyen en los datos de sesión y evitarán que se muestre su contenido. En lugar del contenido del iframe, al ver una grabación o un mapa de calor, verás un mensaje que indica que Hotjar no puede rastrear iframes incrustados en tu página:
¿Cuáles son mis opciones para rastrear contenido de iframes con Hotjar?
Hotjar solo puede rastrear páginas web donde se haya instalado el código de seguimiento de Hotjar. Si el código de seguimiento está instalado en la página padre del iframe, entonces el código de seguimiento rastreará esa página, pero no rastreará ni mostrará interacciones dentro del iframe (el contenido de la página fuente del iframe).
Lo mismo ocurre viceversa. Si el código de seguimiento está instalado dentro de la página de origen del iframe, rastreará y mostrará interacciones para la página de origen, pero no rastreará ni mostrará interacciones en la página principal del iframe.
Hotjar se puede utilizar para rastrear contenido de iframe de las siguientes maneras, detallaremos cada una en los párrafos a continuación:
- Instalar el código de seguimiento solo en la página principal del iframe
- Instalar el código de seguimiento solo en la página de origen del iframe
- Instalar el mismo código de seguimiento en ambas páginas del iframe principal y de origen
Consideraciones al intentar instalar el código de seguimiento de Hotjar dentro de un iframe.
Para rastrear interacciones dentro de un iframe, necesitarás tener acceso para editar el código de la página de origen del iframe. Si estás utilizando un iframe de un tercero, es posible que esto no sea posible. Si el tercero te permite agregar tu código de seguimiento a la página de origen de su contenido de iframe, también deberán considerar el seguimiento de Hotjar en sus políticas de privacidad y cookies.
Instalar el código de seguimiento solo en la página principal del iframe
Con este enfoque, Hotjar rastreará el contenido de la página principal, pero no se rastrearán interacciones dentro del iframe.
En grabaciones y mapas de calor, el iframe estará bloqueado por defecto, y si permites que aparezca el iframe, verás una versión estática del contenido de la página de origen del iframe, pero Hotjar no rastreará ninguna interacción dentro del iframe. Aprende cómo permitir un iframe.
Instalar el código de seguimiento solo en la página de origen del iframe
Con este enfoque, Hotjar rastreará el contenido de la página de origen del iframe, pero no se rastrearán interacciones en la página principal.
En grabaciones y mapas de calor, verás la página principal que realmente visitó el usuario, pero solo verás la recopilación de datos basada en interacciones que ocurrieron dentro del elemento iframe. Cualquier interacción que el usuario haya tenido con la página principal fuera del iframe no se rastreará.
Instalar el mismo código de seguimiento en ambas páginas del iframe principal y de origen
Con este enfoque, Hotjar podrá detectar datos tanto de la página principal como de la página de origen del iframe. Sin embargo, esto solo es posible si tu equipo puede editar el código de la página de origen del iframe directamente (esto rara vez es posible si se utiliza un iframe proporcionado por un tercero).
Si puedes agregar el código de seguimiento a la página de origen de tu iframe y a la página principal, es importante saber que el contenido del iframe se tratará como una página separada en las grabaciones de Hotjar. En lugar de ver las interacciones de la página principal y de origen al mismo tiempo, Hotjar tratará las interacciones con el iframe como otra pestaña en la sesión del usuario.
Esto hará que la grabación parezca que el usuario está haciendo clic de un lado a otro entre la página principal del iframe y la página de origen del iframe en lugar de ver ambas al mismo tiempo. Debido a las limitaciones en torno a los iframes, no es posible evitar este comportamiento cuando el código de seguimiento se agrega a ambas páginas al mismo tiempo.
Cómo permitir un iframe en Hotjar
Hotjar ofrece la capacidad de 'permitir' que los iframes aparezcan dentro de mapas de calor y grabaciones. En la mayoría de los casos, esto significa que Hotjar solo puede cargar la página del iframe, pero no puede rastrear las interacciones de los usuarios dentro de los iframes a menos que tenga la capacidad de agregar el código de seguimiento tanto en la página fuente como en el iframe. Si se requiere JavaScript para que el contenido del iframe se cargue, permitir el iframe puede resultar en que el iframe se muestre como un espacio vacío en las grabaciones y mapas de calor.
Antes de permitir iframes en tu sitio de Hotjar, revisa la sección siguiente en este artículo que describe las limitaciones que pueden evitar que los iframes se muestren en Hotjar.
Agrega data-hj-allow-iframe como un atributo HTML a tu iframe.
Puedes hacer esto agregando un atributo HTML, data-hj-allow-iframe, al iframe que deseas mostrar.
<iframe src="https://ejemplo.com/pagina.html" data-hj-allow-iframe=""></iframe> Esto se puede escribir como data-hj-allow-iframe="", data-hj-allow-iframe="true", o simplemente data-hj-allow-iframe. De cualquier manera, el valor se mostrará como "true" en el backend.
Este atributo debe colocarse en el elemento <iframe> en sí y no puede colocarse en el elemento padre del iframe. Muchas herramientas de terceros no te permiten editar sus elementos <iframe>, lo que significa que no se pueden permitir.
Una página fuente de iframe se recargará cada vez que se muestre en Hotjar
La URL a la que apunta el iframe se almacena en nuestros servidores y se recarga cada vez que se reproduce una grabación. Esto significa que si cargar la página fuente del iframe desencadena algún comportamiento adicional, esto podría causar resultados inesperados y adversos.
Visita tu página de Sitios y Organizaciones.
Haz clic en el icono de engranaje de configuración del sitio 
para visitar tu página de configuración del sitio.
Expande el menú Segmentación y seguimiento de sesiones.
Ingresa el nombre de dominio de nivel superior que deseas permitir bajo el encabezado DOMINIOS DE IFRAME PERMITIDOS.
Solo ingresa el nombre de dominio de nivel superior al ingresar nombres de dominio en el campo DOMINIOS DE IFRAME PERMITIDOS. El dominio de nivel superior es el dominio sin www, http:// o https:// conectado a él. Por ejemplo, si deseas permitir https://www.hotjar.com/ en este campo, el dominio de nivel superior sería hotjar.com
¿Qué limitaciones existen después de permitir un iframe?
Antes de permitir un iframe, considera las limitaciones que persistirán incluso después de permitir el iframe:
- El iframe debe tener un atributo src.
- Hotjar no puede permitir un iframe si su atributo src utiliza una ruta de página relativa (Ejemplo: src=“/pagina”) en lugar de la URL completa (Ejemplo: src=“https://hotjar.com/pagina”).
- El JavaScript será bloqueado dentro del iframe si se está grabando la página principal.
- Las interacciones (eventos de clic y desplazamiento, escritura, animaciones CSS, mutaciones del DOM, etc.) no se rastrearán en el iframe si se está grabando la página principal.
Estas limitaciones significan que la mayoría de los iframes de terceros pueden no mostrarse porque dependen de JavaScript, incluso después de permitir el iframe. Algunos ejemplos de tipos de contenido que no funcionarán con un iframe permitido incluyen:
- Chatbots
- Reproductores de video de terceros (incluidos YouTube y Vimeo)
- Formularios de terceros (incluidos los formularios de Typeform)
- La mayoría de las aplicaciones web de terceros que se cargan a través de iframes
- La mayoría de los sistemas de pago de terceros
Esto significa que Hotjar solo puede mostrar los siguientes aspectos de un iframe permitido:
- Contenido estático de la página (sin JavaScript) cargándose a través de un iframe.
- El comportamiento del cursor se rastrea en relación con la página principal.