Mejores practicas de inserción de contenido

La plataforma ion puede ser usada para crear contenido que será puesto en páginas web que desarrollaremos fuera de tu consola. Allí encontrarás una opción que te permite copiar ese contenido en forma de código de texto en el URL sin la necesidad de usar la pantalla de URL Management. Ahora, en cuanto a la colocación de contenido existen varios elementos que debes tener en consideración.

Planillas Quick Start

Para empezar, te será de mucha ayuda el entender el Quick Start con la palabra “embed” en el título. Aquí encontrarás experiencias a través de muchas categorías del Quick Start Cloud. Esas experiencias fueron desarrolladas específicamente para ser puestas dentro de sitios externos y son un gran lugar para empezar a construir contenidos que estés planificando adicionar en tu sitio fuera de tu ion console.

Ubicación

El código de inserción que podrás copiar desde tu ion, debería ser colocado entre una etiqueta de apertura y cierre <div> dentro de tu sitio web. En ancho y el largo del contenido colocado será dictaminado por el tamaño del código de inserción dentro de la etiqueta <div>.

Estilo y Scripts de Seguimiento

Cuando se está copiando el código de inserción desde la pantalla URL Management, verás una checkbox que, cuando interactúes con ella, generará otra versión del código que automáticamente extraerá cualquier parámetro de cadena de consulta que haya pasado del sitio web principal dentro de sitio ion. Esto puede ser muy útil para rastrear propósitos para cualquier script o integración asignada dentro de tu ion experience y que se apoye en la información traspasada en la cadena de consulta.

El contenido de inserción puede ser afectado al usar código en el sitio web que también esté insertado dentro. Cualquier rastreo o personalización de scripts que estén asignadas en el sitio web externo puede impactar el cómo se muestra el contenido o el estilo dentro del cuadro de inserción.

Por ejemplo, el código de inserción será leído por el sitio externo como un iFrame (siempre y cuando el contenido sea responsive). Si el estilo de la plantilla del sitio web especifica una altura para iFrames, el contenido de inserción seguirá esos lineamientos de configuración de altura y representará de esta forma. Eso puede, a su vez, hacer que el área incrustada sea más corta que lo que se desea si la altura establecida es más pequeña de lo que se necesita para presentar todo el contenido insertado y requerirá que las plantillas de estilo externo sean revisadas y ajustadas para eliminar la altura aplicada en los iFrames.

Asimismo, cualquier rastreo de scripts que están establecidos para ejecutarse dentro de la inserción en ion experience, se dispararán cuando la página externa cargue. Esto es porque el sitio web externo también carga sus propios rastreos de scripts, y existe la posibilidad de que esos scripts interfieran con los otros. Si el mismo rastreo de scripts está configurado dentro de ion experience y el sitio externo, ambos se ejecutarán con la probabilidad de que resulte en un conteo doble de visitas en el sistema externo.

Visibilidad

Cuando los enlaces son usados dentro del contenido insertado para direccionar a otra página dentro del creative, la próxima página será presentada sin los cuadros del área de inserción en el mismo sitio web principal sin ningún cambio visible en la URL dentro de la barra de dirección del visitante o en otro cuadro de contenido principal.

Si lo que prefieres es que los enlaces salgan del cuadro para tomar control de la ventana del navegador, lo que deberás hacer es asegurarte que ellos estén configurados para abrirse dentro del cuadro principal (_parent).

Los navegadores interpretarán el contenido de inserción siempre y cuando todo en ellos sea visible, incluso si parte del contenido se presente debajo de la página. Esto sucede debido a que las etiquetas de apertura y cierre <div> son visibles desde la perspectiva del código y el sitio externo, técnicamente, interpretará el código de inserción como un opuesto al contenido dentro del ion page.

SEO

El código de inserción de ion es un código de javascript que se presenta dinámicamente en iFrame. Lo que significa que cualquier motor de búsqueda que intente indagar dentro del sitio web principal necesitará estar capacitado para ejecutar javascript con el objetivo de presentar el iFrame y poder descifrar el contenido de inserción.

Facilitando la inserción 

Las características que te presentamos a continuación, son una excelente opción cuando el contenido de inserción se encuentre dentro del sitio externo.

 

Reponsive grids – permite ajustar el contenido dentro del espacio disponible.

Freestyle forms – los campos de formularios se ajustarán a la cantidad de espacio disponible.

Flow – puede ser usado para mostrar múltiples pantallas en el área insertada sin tener que cargar las pantallas o aumentar el tamaño del cuadro.

Hidden when Embed – pueden ser aplicadas a contenidos o, a páginas independientes para especificar cuál contenido debería ser mostrado y cuál debería ser escondido cuando la se realice la inserción de esa página dentro de un sitio externo.

¡Ten mucho cuidado!

Las siguientes características deben ser evitadas o usadas con mucha cautela cuando estés construyendo una experiencia con intenciones de ser insertada en un sitio externo.

*Full-Page Slider – destinado a tomar una página entera y que no pueda deslizada hacia arriba o arriba cuando esté insertada.

*Anchor Links – no se podrán usar links de anclaje para llevar al visitante a cierta parte de la página cuando esté insertada.

**Fixed widths and heights – hará que los contenidos sean inflexibles en lugar de ser capaces de ajustarse al espacio disponible.

***Lightbox – se mostrará en el tope del contenido insertado y no podrá superponer el contenido fuera del cuadro.

+Full-Page Slider & Anchor Links

Debido a que los navegadores interpretan el código insertado como si todo fuese visible, los links de anclaje o anchor links y los in-page links que bajen o suban dentro de la página con el scroll no funcionarán dentro del área insertada. Normalmente, este tipo de links de anclaje subirían y bajarían con el scroll para mostrar el contenido correspondiente lo más cercano posible al tope del navegador asignado. Si todo está destinado para ser visible, el navegador no interpretará que el desplazamiento es necesario para mostrar el contenido anclado. Lo que significa que el componente Full-Page Slider no debería ser utilizado para contenido que será insertado en un sitio externo, desde que este perdió la habilidad de subir y bajar para ir de sección en sección.

Altura y Ancho

Si el ancho se establece dentro de una etiqueta <div>, lo que querrás hacer es aplicar el micro tema “nested responsive grid” (que puedes encontrar dentro de la categoría micro-theme en grid layout) a tu ion content para que garantices que entrará perfectamente dentro del ancho establecido en la etiqueta <div>.

Lo que te recomendamos es que evites usar anchos alternativos o cualquier tipo de container o grid si el <div> dentro del cual el contenido es insertado no está habilitado para usar el 100% del ancho del sitio principal.

Lightbox

Los Lightboxes se mostrarán en el tope del contenido insertado y no serán capaces de sobreponerse a los contenidos externos del cuadro insertado. Si el Lightbox debe usarse dentro del contenido insertado, lo que querrás hacer es establecer el color de superposición a transparente para ayudar a garantizar que quepa estéticamente hablando, en el resto de la página.