Introducción a los iFrames

Los iFrames, también conocidos como marcos en línea, son básicamente una página web dentro de otra. Se utilizan para mostrar contenido de otras páginas web dentro de la propia página, ya sea para incrustar formularios, elementos multimedia, informes u otros materiales.

Nota importante : Por razones de seguridad, los iFrames de su página deben tener el mismo origen que la página host para poder usar la segmentación de elementos iFrame. Con la política del mismo origen , los navegadores bloquean los scripts que intentan acceder a un frame con un origen diferente. Si el host y la página iFrame no tienen el mismo origen, la política estándar del navegador impide que el builder Appcues se dirija a elementos dentro de un iFrame y que nuestro SDK acceda a estos elementos y agregue detectores de eventos.

Al usar Appcues en una página que incluye iFrames, tienes 2 opciones:

1. Instalar Appcues tanto en la página web externa como dentro de la página web iFrame
   Esta es nuestra recomendación, ya que le permitirá utilizar todos los tipos de experiencia Appcues tanto en la página externa como dentro del iFrame.
   
2. Instalar Appcues solo en la página web externa
   Esta opción le permitirá crear flujos Appcues dentro del iFrame, así como flujos que se extiendan desde el marco exterior hasta el iFrame. Sin embargo, limitará el uso de otras experiencias Appcues dentro del iFrame (como pines, banners y eventos de clic para seguimiento). Estas otras experiencias solo serán compatibles con la página exterior donde esté instalado Appcues .
   Si elige instalarlo solo en el marco exterior, salte a las instrucciones para crear flujos en un iFrame .

Guía para construir y publicar dentro de un iFrame

Esta sección es aplicable si ha instalado Appcues dentro de sus páginas iFrame.

Para seguir esta guía lo mejor es tener ya:

• Instalé la extensión de Chrome “ iframe en nueva pestaña ”

Requisitos

• Acceso al código fuente original de iFrame.

Instalación

Es necesario instalar Appcues en el código fuente de cualquier iFrame que utilice para compilar y publicar flujos en él. La instalación será similar a la de instalar Appcues en su aplicación web. Consulte nuestra descripción general de la instalación aquí.

Edificio dentro de un iFrame

Con este método, puede separar su flujo entre los pasos necesarios fuera y dentro del iFrame. Para crear un flujo que se active por el contexto de la página externa (página, evento o activador manual) y muestre parte o la totalidad del contenido dentro de un iFrame, consulte "Creación y publicación en un iFrame" .

Importante : tómate el tiempo para dibujar físicamente tu experiencia donde te encuentras con tu iFrame. Así podrás visualizar qué hay fuera y dentro del iFrame.

Una vez instalado Appcues en tu iFrame, puedes usar una extensión de Chrome para abrirlo en una nueva pestaña e interactuar con él y crear flujos. Descárgalo aquí: https://chrome.google.com/webstore/detail/iframe-in-new-tab/lkegfiagmgdnamcfdokgeobfcffnjaci/related?hl=en-US

Desde aquí, puedes crear un flujo tan normalmente como si estuvieras creando un flujo en tu aplicación web.

NOTA : Si tiene un flujo en un iFrame y un flujo fuera de un iFrame en la misma página, Appcues mostrará ambos flujos, debido a la naturaleza de los iFrame, por lo tanto, recomendamos que si tiene un flujo dentro de un iFrame, solo tenga el flujo dentro del iFrame.

Ejemplo rápido de iFrame

Hemos incrustado nuestro sitio de Documentos en un iframe a continuación, donde puede ver nuestro Launchpad interactivo Appcues . Esto muestra cómo se ve el Launchpad tanto dentro como fuera del iframe en la página que está viendo.

Paso 1: Aislar el iFrame

Aquí es donde entra en juego la extensión de Chrome " iframe en nueva pestaña ". Puedes usarla para abrir el iframe en una nueva pestaña e interactuar con él y crear la experiencia Appcues que desees. A partir de ahora, crearás como en tu aplicación web.

Si hace clic derecho en el iFrame con la extensión instalada, podrá ver una opción para abrir el iFrame en una nueva pestaña/ventana.

A partir de ahora, puedes crear como lo harías en tu aplicación web. Simplemente abre la extensión Appcues y crea dentro del iFrame como lo harías normalmente con cualquier otra experiencia Appcues .

Paso 2: Apunta al dom /URL del iFrame

Como se mencionó anteriormente, piense en los iFrames como un sitio web dentro de otro. Cada uno tiene su propio dom . Al usar la extensión de Chrome, podrá ver el dom en la URL. Asegúrese de agregar el dom del iFrame como disponible en la configuración de la cuenta para poder dom al segmentar la experiencia de Appcues que desea publicar.

Construir y publicar en un iFrame

Esta guía es aplicable independientemente de si ha instalado Appcues dentro del iFrame o solo en la página exterior.

Nota: esta funcionalidad requiere la versión 6.1.x o superior del SDK; si utiliza una versión fija del SDK, debe actualizarla a esa versión o una más nueva para esta funcionalidad.

La creación y publicación en todos los iFrames le permite crear un flujo que se activa fuera del iFrame y tiene pasos que son elementos de destino dentro y fuera del iFrame.

Requisitos y limitaciones

• En la actualidad, no se admiten fondos duros para los pasos que apuntan a elementos en iFrames.
• El desplazamiento por iFrame no es compatible con Internet Explorer. Recomendamos excluir a los usuarios de los flujos que se dirigen a contenido iFrame donde los elementos objetivo tendrían que desplazarse para ser visibles.
• Por razones de seguridad, los iFrames de tu página deben tener el mismo origen que la página host para poder usar la segmentación de elementos iFrame. Con la política del mismo origen , los navegadores bloquean los scripts que intentan acceder a un frame con un origen diferente. Si el host y la página iFrame no tienen el mismo origen, la política estándar del navegador impide que el builder Appcues se dirija a elementos dentro de un iFrame y que nuestro SDK acceda a estos elementos y agregue detectores de eventos.

Instalación

Siga el proceso de instalación habitual para instalar Appcues en la parte externa de su aplicación. No es Appcues , pero puede instalarse dentro del iFrame.

Construyendo a través de un iframe

Al crear un flujo con pasos que se dirigen a contenido iFramed, agréguelos como lo haría normalmente. Si un paso se dirige a un elemento dentro del iFrame, use el selector de destinos y seleccione el elemento al que desea dirigirse.

En la configuración de pasos, al seleccionar Ubicación > Manual se le mostrará el selector que se ha detectado.

Si se realizan actualizaciones en el selector, se recomienda actualizar únicamente los elementos del selector después del contexto [iframe] .

Segmentación

Al definir la experiencia, se debe utilizar el contexto de la aplicación externa. En situaciones donde se requiere el contexto iFrame para definir el edificio interno, se debe utilizar un enfoque iFrame .

Preguntas frecuentes

1. ¿Qué condiciones de URL debo utilizar en 'Segmentación de página'?

Al crear contenido en una URL distinta a la URL principal, debería usar condiciones que coincidan con la URL del iFrame. Esto hará que, si un usuario accede a una página con dos URL (la URL principal y la URL del iFrame), Appcues intente activarla basándose en los elementos encontrados en la URL de creación donde se encuentra el iFrame, en lugar de la URL principal.

Consulte Segmentación de página para obtener más información.

2. ¿Puedo crear un flujo que tenga pasos dentro de un iFrame y fuera del iFrame?

Si bien los pasos técnicamente no estarán dentro del iFrame, construir a través de un iFrame le permitirá tener pasos que estén fuera de un iFrame, así como pasos de tooltip que apunten a elementos dentro de un iFrame.
Si decide construir directamente dentro de un iFrame, los pasos del flujo estarían dentro del iFrame.

3. ¿Es posible mostrar al mismo tiempo las experiencias creadas dentro de un iFrame y a través de otro iFrame?

Sí. Cada ubicación donde se instala Appcues funcionará de forma independiente. Esto significa que la aplicación externa se gestionará como una ubicación y el contenido en iframe como otra. Si bien un flujo en la aplicación externa puede tener una tooltip que se dirija a un elemento dentro del iframe, esto no afectará la visibilidad de las experiencias configuradas para mostrarse dentro del iframe.

4. ¿Es posible utilizar fondos con distintos pasos de iFrame?

Los fondos suaves se mostrarán normalmente en la mayoría de las aplicaciones y los fondos duros no son compatibles.

5. ¿Puedes segmentar en múltiples niveles de iFrames?

No. Al crear flujos entre iFrames, se puede apuntar a un solo nivel de iFrames. Esto significa que se puede crear un flujo en la aplicación y que dicho flujo puede apuntar a elementos de la aplicación o a elementos que estén integrados en iFrames. Si hay un iFrame dentro del iFrame, esos elementos no funcionarán en los pasos del iFrame.

6. ¿Puedes apuntar a contenido iFramed desde otra fuente?

No. A menos que el contenido esté configurado de manera que tenga el mismo origen que la página host, no se podrá apuntar al contenido iFramed de otra fuente que usted no controle.

7. ¿Es posible tener un paso de navegación dentro de un iFrame?

Los flujos que se crean y se dirigen dentro de un iFrame pueden usar pasos de navegación y las acciones de navegación funcionarán como un flujo normal, solo que dentro del contexto del iFrame.
Los flujos que se construyen en un iFrame pueden incluir pasos de navegación para la aplicación externa. Si bien los pasos que apuntan a elementos dentro de un iFrame no admiten acciones de navegación, el usuario puede hacer clic en el elemento para redirigir y avanzar en el flujo.

8. ¿Puedes usar el builder para identificar selectores en un iframe si la aplicación externa tiene un origen diferente?

Debido a la restricción de origen cruzado del navegador, el builder no puede detectar elementos en un iFrame cuando la aplicación externa tiene un origen diferente. En estos casos, recomendamos usar la extensión "iFrame en nueva pestaña" para abrir el iFrame en una nueva pestaña y usar el builder en el contexto de esa pestaña para crear el flujo y generar selectores.