Connectif permite añadir fácilmente contenidos web personalizados en tu eCommerce sin necesidad de modificar su código ni alterar su estructura.
En este artículo, aprenderás cómo insertar contenido de Connectif embebido en tu web.
Tiempo de implementación: 15 minutos.
Dificultad: Media
¿Cuándo utilizarlo?: Cuando quieras incluir contenido (estático o dinámico) en tu web sin modificar el código.
PASO 1. Localización del selector adecuado en el código
(En este apartado se identifica la etiqueta conveniente de la web donde Connectif mostrará el contenido).
Puedes saltarte este primer paso y comenzar en el PASO 2 si:
— Ya conoces el selector y el identificador único a utilizar.
— Quieres crear un selector específico para tu contenido web que evite que cambios o actualizaciones en el código de tu eCommerce alteren o impidan que los contenidos insertados se muestren. En este caso, te recomendamos que uses un bloque "div" con un identificador (id) único que lo distinga. Recuerda que tendrás que añadirlo en el código de tu eCommerce antes de continuar.
1.1 Localizar el selector
Un selector identifica a un elemento HTML, situado en cualquier lugar de la página web, por medio de su ID, clase o atributo. Este selector será la referencia para indicar a Connectif dónde quieres mostrar el contenido.
1. Accede a la página de tu web donde desees añadir el contenido embebido.
2. Visualiza el bloque que quieres usar de referencia.
En nuestro ejemplo, el objetivo es enviar el contenido para que aparezca justo encima del bloque "CUSTOM TEXT BLOCK".
3. Abre la consola de herramientas de desarrollo (DevTools) del navegador.
Todos los navegadores tienen en menú un enlace para abrirla. Aquí tienes indicaciones para abrirla en Google Chrome (navegador utilizado en nuestro ejemplo), Mozilla Firefox, Microsoft Edge y Safari.
Como alternativa, si estás en Chrome, Firefox o Edge, puedes utilizar la tecla de atajo F12.
4. Selecciona la pestaña Elements en la consola para visualizar la estructura HTML.
5. Pulsa sobre el icono Inspeccionar, el primero por la izquierda en el menú superior.
6. Sitúa el cursor del ratón sobre el área del contenido que planeas usar como referencia. Haz clic cuando la selección sea la adecuada para que la etiqueta quede resaltada en la consola.
En nuestro ejemplo, la etiqueta que queda resaltada, "<div id=”customer-text”>", se distingue por el atributo global "id" que tiene como valor "custom-text". Este bloque div contiene todo el área seleccionada.
1.2 Confirmar que el selector es único.
(En este apartado se comprueba que el parámetro para identificar la etiqueta no se repita en ninguna otra etiqueta).
7. Haz clic sobre el contenido de la pestaña Elements de la consola y usa el atajo de teclado Control + F para buscar el nombre de la etiqueta o atributo.
En nuestro ejemplo, el identificador "custom-text" sólo tiene una coincidencia, por lo que es adecuado para usarlo como selector.
El selector debe ser único, para evitar que el contenido se muestre varias veces en distintas posiciones. Si la búsqueda refleja más de una coincidencia será necesario encontrar un selector adecuado distinto.
Los atributos tienen múltiples opciones de uso y son comunes a muchos contenidos web. Si quieres aprender más sobre ellos para profundizar a la hora de utilizarlos en los contenidos web de tipo inline, haz clic aquí.
8. Copia el nombre de tu selector único en el portapapeles o en un bloc de notas.
9. Cierra la consola de desarrollo.
PASO 2. Mostrar el contenido embebido en la web
2.1 Crear un workflow para mostrar el contenido
10. Accede a “Workflows” y haz clic en Crear nuevo workflow.
11. Diseña tu estrategia estableciendo las condiciones para mostrar el contenido embebido a los contactos.
Un workflow con el objetivo de insertar contenido embebido en la web debe contener, al menos, un nodo "Enviar contenido web".
En nuestro ejemplo, se ha creado una estrategia sencilla que muestra un contenido a todos los contactos que visiten la home.
Recuerda que puedes hacer uso de nuestras plantillas que envían contenido embebido.
12. Configura el resto de nodos del workflow, salvo el nodo "Enviar contenido web" (las instrucciones para configurarlo se encuentran en el siguiente paso).
En nuestro ejemplo, se ha establecido la audiencia en el nodo "Inicio" para todos los contactos existentes y nuevos. El nodo disparador "Al visitar página" se ha configurado para que se active exclusivamente en la home.
Si quieres aprender más sobre estos dos nodos, puedes consultar los artículos Nodo "Inicio" y Nodos de tipo disparador.
2.2 Configurar el nodo "Enviar contenido web"
13. En el nodo “Enviar contenido web”, haz clic en (Editar configuración del nodo).
Si te interesa saber más sobre el nodo "Enviar contenido web", haz clic aquí.
14. En el primer paso de la configuración, selecciona o crea un nuevo contenido inline.
Entre los distintos contenidos web, el de tipo inline es el único que se embebe en la estructura de la web, mientras que el resto se muestran sobre la misma.
Para aprender más sobre el contenido web de tipo inline, haz clic aquí.
15. Haz clic en Siguiente .
16. Pega en la sección Selector el nombre obtenido en el punto 8 y marca su tipo en los botones a su izquierda.
En nuestro ejemplo, dejamos seleccionado el atributo global Id que viene por defecto y pegamos el valor "custom-text" obtenido en el punto 8.
17. Elige la posición respecto al elemento seleccionado en la que se embeberá tu contenido.
Puedes elegir insertar tu diseño inmediatamente antes o después del bloque al que apunta el selector, o incluso dentro de él.
Si indicas que se muestre Reemplazando el interior, el contenido generado desde Connectif sustituirá al contenido original, que no se visualizará.
18. Haz clic en Siguiente .
19. Asocia las variables si fuera necesario.
Si no hubiera ninguna variable definida en tu contenido, como ocurre en nuestro ejemplo, no es necesario que configures nada en este paso.
En caso de que tu contenido contenga variables personalizadas, tendrás que asociarlas en este paso a la información que provenga de otros nodos.
Si quieres aprender más sobre las variables, haz clic aquí.
20. Haz clic en Finalizar .
21. En el workflow, haz clic en Guardar para guardar los cambios y en Iniciar para activarlo.
22. Comprueba en tu web que el contenido se esté mostrando del modo esperado.
¡Éxito!
Tu contenido de Connectif se muestra embebido en tu web.
USOS ALTERNATIVOS
Utiliza el contenido embebido web de forma inteligente para mejorar más aún tus resultados.
1. Insertar contenido embebido invisible al visitante
(En este apartado se explica cómo incluir desde Connectif código HTML en tu web sin ningún elemento visual).
Los contenidos inline invisibles son muy útiles para ejecutar acciones que no requieren mostrar un contenido. Un ejemplo muy utilizado es el de pedir una suscripción a notificaciones push sin mostrar ningún contenido web.
1. Accede a “Contenido > Contenidos web” y haz clic en Crear nuevo contenido web.
2. Selecciona como tipo de contenido web Inline.
3. Nombra tu contenido.
3. Haz clic en Crear contenido web.
4. Añade un componente avanzado de tipo HTML.
5. Escribe el contenido del código HTML.
6 . Pulsa Guardar.
7. Crea un workflow, siguiendo los pasos de está guía a partir del PASO 2, para usar tu contenido embebido invisible al visitante.
¡Sigue aprendiendo!
Para aprovechar todo el potencial de tu cuenta en Connectif, te recomendamos continuar con los siguientes artículos:
- Integración personalizada para enviar datos, para enviar datos desde Connectif a sistemas o aplicaciones externos.
- Detectar y reaccionar a enlaces web creados fuera de Connectif, para detectar y reaccionar a los clics en cualquier enlace de tu web.
-
Integración con Facebook e Instagram, para conectar tu cuenta de Facebook Ads con Connectif y empezar a gestionar tus audiencias.
-
Formularios integrados, para integrar en Connectif formularios ya existentes en tu web.