En esta lección, aprenderás e implementarás el workflow que contiene una estrategia de captación push para que tus visitantes se inscriban a este canal de comunicación.
Aprovecha el canal push para impactar de forma inmediata a un mayor volumen de contactos a través de las notificaciones del navegador.
Objetivo: Captación.
Elementos utilizados: Notificación push, inline.
Tiempo de implementación: 1,5 horas.
Te recomendamos que sigas todos los pasos e implementes esta estrategia desde cero en tu cuenta, pero si necesitas una vía rápida, en el Directorio de Plantillas de Workflows tienes disponible la plantilla Suscripción push usando notificación del navegador, con la que puedes trabajar.
Resumen de la lección
En esta lección vas a aprender:
- Cómo crear un contenido inline e insertarlo en tu web.
- Cómo crear una notificación push con el Editor de notificaciones push.
- Cómo emplear el nodo "Mostrar push" para utilizar este canal de comunicación.
Al terminar la lección, habrás creado en tu cuenta:
La estrategia de captación push que contiene este workflow, a través de la cual enviarás a tus visitantes un inline nativo del navegador para que se suscriban a este canal de comunicación, que podrás aprovechar en futuras campañas.
Consideraciones previas
En esta lección se crea un contenido inline invisible, que hará que se active una petición de suscripción a notificaciones push a aquellos visitantes que no las tengan activas. Para que funcione, deberás haber configurado el ServiceWorker en tu proceso de integración con Connectif. Si no lo has hecho, al final de este artículo encontrarás documentación sobre cómo configurar el canal push.
Cada navegador mostrará la notificación de una manera, por lo que su aspecto no puede editarse, como el de otros contenidos web de tipo inline.
Configuración de la estrategia
PASO 0. Creación del workflow
Cómo crear el workflow para esta estrategia
1. En tu cuenta de Connectif, haz clic en "Workflows > Crear nuevo Workflow" y, a continuación, en Crear Workflow en blanco.
2. Haz clic en (Edición) y asígnale el nombre "Suscripción push utilizando notificación del navegador".
3. Haz clic en Aplicar para guardar el nuevo nombre de tu workflow.
PASO 1. Nodo "Inicio"
Cómo configurar el Nodo "Inicio" para esta estrategia
(Este nodo establece la audiencia a la que va a ir dirigido el workflow).
4. Haz clic en (Editar configuración del nodo) del nodo “Inicio”.
5. En Selecciona una restricción, marca "Toda mi lista".
6. En Selecciona la fuente de datos, marca "Todos los existentes y los nuevos".
7. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que el workflow se active para todos los contactos que visiten la web, tanto nuevos como existentes.
PASO 2. Nodo "Al visitar página"
Cómo configurar el Nodo "Al visitar página" para esta estrategia
(Este nodo hará que la siguiente acción del workflow, en este caso enviar el inline de suscripción a las notificaciones push, se active cuando un contacto visite tu web).
8. En el menú de selección de nodos, dirígete a "Disparadores > Web" y arrastra el nodo "Al visitar página" al editor, de forma que conecte con el nodo "Inicio".
9. Haz clic en (Editar configuración del nodo) del nodo “Al visitar página”.
10. Haz clic en Limitaciones y desactiva la casilla "Desactivar tras dispararse".
11. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que, en el momento en que un contacto visite cualquier página de la web desde cualquier dispositivo, pase a la siguiente acción.
PASO 3. Nodo "Comprobar valor"
Cómo configurar el Nodo "Comprobar valor" para esta estrategia
(Este nodo comprobará si tus visitantes están suscritos a tus notificaciones push, para no enviarles el inline en caso de que ya las tengan activadas).
12. En el menú de selección de nodos, dirígete a "Condiciones > Sistema" y arrastra el nodo "Comprobar valor" al editor, de forma que conecte con el nodo "Al visitar página".
13. Haz clic en (Editar configuración del nodo) del nodo “Comprobar valor”.
14. Arrastra el campo "Tiene suscripciones push" de "Contacto" hacia el bloque de la izquierda.
15. En Operador, selecciona "Es igual a".
16. Arrastra el campo "Literal" al bloque de la derecha y deja la casilla en "Sí", para indicar a Connectif que el estado de suscripción a push debe ser "Sí" en la ficha del contacto.
17. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que compruebe si los visitantes tienen el campo de suscripción a las notificaciones push como "Sí". En el caso de que no estén suscritos, el flujo continuará y se les enviará la notificación de suscripción . Si el contacto está suscrito la estrategia se detendrá.
PASO 4. Nodo "Enviar contenido web"
Cómo funciona el contenido web de tipo inline
El contenido web de tipo "Inline" se inserta dentro de la página, sin necesidad de modificar su código ni alterar su estructura. Sirve para mostrar contenidos personalizados o código HTML en cualquier lugar de la web.
Se maqueta en el Editor de contenido, por lo que no son necesarios conocimientos en programación para crearlo.
Un inline genera estadísticas relacionadas con sus visualizaciones, interacciones y participación en el proceso de compra.
Cómo configurar el contenido web de tipo inline para esta estrategia
(En este paso vas a crear el inline de captación de usuarios para las notificaciones push).
18. En el menú de selección de nodos, dirígete a "Acciones > Web" y arrastra el nodo "Enviar contenido web" al editor, de forma que conecte con el nodo "Comprobar valor".
19. En la unión de este nodo con el nodo "Comprobar valor", haz clic en el círculo hasta que aparezca "No".
20. Haz clic en (Editar configuración de nodo) del nodo “Enviar contenido web” y Crear nuevo contenido para generar un nuevo contenido.
21. Al crear un nuevo contenido, selecciona como tipo Inline, asígnale un nombre, por ejemplo "Notificación nativa push", y haz clic en Crear nuevo contenido.
22. Añade un componente de tipo HTML y edítalo, copiando y pegando el siguiente fragmento de código:
<script>
connectif.subscribeToPushNotifications(function (error){
if (!error){
connectif.managed.sendEvents([]);
}
});
</script>
23. Haz clic en Guardar para conservar las modificaciones en el diseño y en Volver al selector para volver y finalizar la configuración del nodo.
Cómo configurar el Nodo "Enviar contenido web" para esta estrategia
(Este nodo mostrará el inline de confirmación de recepción de las push a aquellos contactos que no estén suscritos).
24. Una vez seleccionado el contenido Inline, haz clic en Siguiente .
25. En Configuración añade el selector adecuado para mostrar el contenido. En este caso, es recomendable incluir el contenido en un elemento que se muestre en todas las páginas, por ejemplo en el footer. En futuras lecciones se explicará cómo encontrar el selector adecuado para insertar cualquier inline.
26. En Limitaciones, crea una limitación externa en Limitación a otros nodos, para ello:
- En el desplegable Seleccionar nodo, escoge la opción "Al visitar página" para limitar este nodo.
- En Selecciona el tipo de limitación, escoge la opción "Desactivar por un tiempo" y escribe “1” en el campo “Día".
- Haz clic en Añadir limitación externa para guardar su configuración.
27. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que envíe el inline de suscripción que acabamos de crear a los visitantes que llegan a esta parte del flujo. Con las limitaciones, este inline solo se enviará una vez al día en el caso de que los contactos no estén suscritos.
PASO 5. Nodo "Al suscribirse a push"
Cómo funciona el Nodo "Al suscribirse a push"
Este nodo se utiliza para reaccionar en el momento en que un contacto se suscribe a las notificaciones push. La interfaz del nodo no dispone de configuración.
Cómo configurar el Nodo "Al suscribirse a push" para esta estrategia
(Este nodo hará que la siguiente acción del workflow, en este caso enviar una notificación push de bienvenida, se active cuando un contacto acepte recibir estas comunicaciones).
28. En el menú de selección de nodos, dirígete a "Disparadores > Web" y arrastra el nodo "Al suscribirse a push" al editor, de forma que conecte con el nodo "Enviar contenido web".
29. Haz clic en (Editar configuración del nodo) del nodo “Al suscribirse a push”.
30. En Limitaciones, desactiva la casilla "Desactivar tras dispararse" y, en "Desactivar temporalmente tras evento, escribe “1” en el campo “Día".
31. Haz clic en Actualizar.
En este paso hemos indicado a Connectif que, una vez el contacto se suscriba a las notificaciones push, se active el siguiente paso del workflow.
PASO 6. Nodo "Mostrar push"
Cómo funciona el nodo "Mostrar push"
Este nodo se utiliza para mostrar una notificación push determinada a los contactos que llegan a esa parte del workflow. En la interfaz del nodo se configuran, por pasos, todos los aspectos sobre la notificación a mostrar:
- Configuración de la notificación. Para seleccionar una notificación push previamente creada o configurar uno nuevo en el editor de notificaciones web push. En este paso también se puede establecer una fecha de expiración para la notificación.
- Configuración de campos y valores. Para asignar o modificar los valores de las variables incluidas en la notificación push.
Cómo funcionan las notificaciones push
Las notificaciones web push son mensajes instantáneos y completamente personalizables que los contactos reciben en sus dispositivos. Esta comunicación inmediata e individualizada permite impactar a los usuarios en el momento y lugares adecuados para incrementar las tasas de conversión, incluso cuando no visitan la web.
Se maquetan en el Editor de notificaciones push, por lo que no son necesarios conocimientos en programación para crearlas.
Cómo configurar la notificación push para esta estrategia
(En este paso vas a crear la notificación push de bienvenida a los contactos que hayan aceptado la suscripción).
32. En el menú de selección de nodos, dirígete a "Acciones > Web" y arrastra el nodo "Mostrar push" al editor, de forma que conecte con el nodo "Al suscribirse a push".
33. Haz clic en (Editar configuración del nodo) del nodo “Mostrar push”. Haz clic en Crear nuevo contenido o (opcional) en Editar para modificar una notificación existente.
34. Al crear una nueva notificación, en el panel de Herramientas, haz clic en la pestaña General para editar los parámetros del aspecto general de tu notificiación.
35. Haz clic en la pestaña Contenido para acceder a las opciones de elaboración y diseño de tu push.
- En Título de la notificación, añade el nombre que aparecerá en la parte superior del mensaje.
- En Mensaje de la notificación, añade el cuerpo del texto.
- En Añade una URL para redireccionar, configura la página a la que se enviará a los contactos cuando hagan clic en la notificación. Debe ser un enlace absoluto. Si se marca la pestaña "cerrar al hacer clic", la notificación se cerrará cuando el contacto haga clic en ella.
- En URLs de imágenes, configura los tres tipos de imagen que el editor permite
- URL del icono: es la imagen que aparece en la esquina superior izquierda, a modo de icono.
- URL de la imagen: es la imagen destacada. Se muestra en la plantilla ocupando la mitad inferior de la notificación.
- URL del icono de la bandeja de notificaciones: es la imagen que aparecerá en la bandeja de notificaciones del dispositivo en el que recibas la push.
36. En la pestaña Versión Compacta, configura cómo se verá esta notificación en la esquina de la pantalla del navegador.
- En Mensaje compacto, añade el cuerpo de texto que aparecerá en la ventana emergente.
- En URL del icono compacto, añade la imagen que aparecerá en la esquina superior izquierda a modo de icono.
37. (Opcional). Añade variables a cualquiera de los campos, tanto en la versión completa como compacta. Para ello:
- Haz clic en (Definir una variable dinámica) en el lugar donde desees incluir la variable. En este ejemplo, crearemos una variable para el título de la notificación.
- Asigna un nombre a la variable para distinguirla. En este ejemplo, le asignaremos el identificador "Name".
- En Valor por defecto, añade el valor que quieres que adquiera la variable cuando no haya ningún dato almacenado en el campo correspondiente. En este ejemplo, le asignaremos el valor por defecto "Hello".
- Haz clic en Aceptar para guardar los cambios en la variable.
38. Haz clic en Previsualizar para revisar el resultado final de tu notificación, y/o en Previsualizar compacta para revisar el resultado en versión compacta.
39. Haz clic en Guardar para conservar las modificaciones en el diseño y en Volver al listado de contenidos para volver y finalizar la configuración del nodo.
Cómo configurar el nodo "Mostrar push"para esta estrategia
(Este nodo va a enviar la notificación push de bienvenida).
40. Selecciona la web push creada en el paso anterior y haz clic en Siguiente .
41. (Opcional). Si has creado variables para tu contenido, vincúlalas con los campos de Connectif seleccionando de la columna izquierda el campo al que corresponden y asignándolo a la variable. En este ejemplo, el campo "Nombre" será el que le de valor a la variable "Name".
42. Haz clic en Finalizar .
En este paso hemos indicado a Connectif que envíe una notificación push de bienvenida a los contactos una vez se suscriban.
Resultado
Tras completar los pasos, habrás creado tu estrategia de captación push usando la notificación del navegador, y se enviará a los visitantes que no tengan este canal activado para invitarles a que se suscriban a tus notificaciones push. Una vez se den de alta, les enviarás una notificación de bienvenida.
Continúa tu recorrido
Ahora que has completado esta lección, continúa con la siguiente, con la que crearás en tu cuenta un Funnel de carrito abandonado.
¡Enhorabuena!
Has llegado al final de la lección.
Vuelve al curso
Accede al índice completo del curso y la explicación de cada lección en este enlace.
Lecturas relacionadas
Si quieres profundizar en alguno de los aprendizajes adquiridos en esta lección, puedes acceder a la documentación de la guía:
- Contenido web de tipo inline, para aprender cómo funciona este contenido, que puedes editar desde el Editor de contenido web, que aprendiste a utilizar en la primera lección.
- Configurar notificaciones web push, para asegurarte de que has integrado en tu Connectif el envío de notificaciones push.
- Segmento estático, para aprender a crear un segmento de pruebas con el que testear tus workflows.