Journeys es un producto que ofrece a nuestros clientes banners de navegador, intersticiales y ventanas emergentes personalizables y dirigidos para impulsar las instalaciones de apps desde la web. A diferencia de los banners de apps nativos para los navegadores iOS y Android, Journeys se conecta con la intención del usuario. Algunos escenarios típicos incluyen mostrar banners editables de Journeys cuando un usuario ha visitado un sitio web una cantidad específica de veces, si el usuario ha agregado un producto a su carrito de compras o si el usuario ha venido desde un sitio web específico. Hay cientos de otras configuraciones posibles que puedes crear utilizando nuestros filtros, que están disponibles en el dashboard de Branch.
Esta es la primera de una serie de cinco partes que te ayudarán a brindar personalización avanzada a estos banners. A lo largo de esta serie, mostraré diferentes ejemplos de cómo crear soluciones avanzadas usando Journeys.
En este blog, hablaremos sobre la creación de una solución de Journeys para que solo se muestre una vez que el usuario se haya desplazado por debajo del contenido de la página principal y desaparezca cuando el usuario se desplace hacia arriba hasta la parte superior del sitio. Abordaré por qué podrías querer utilizar una solución como esta, pero si deseas pasar directamente al código de ejemplo, puedes ir hasta el final del artículo para comenzar a agregarlo a tu sitio.
Comencemos con un poco de contexto
Puede ser difícil decidir qué soluciones de Journeys usar en un caso determinado. Un intersticial de página completa puede ser demasiado directo y asustar al usuario, pero un botón flotante más pequeño podría no ser suficiente para llamar su atención. Y para hacer la decisión aún más desafiante, Google ha añadido sus propias pautas para lo que cree que es ideal, llegando incluso a mencionar que el uso de algunos banners o intersticiales podría resultar en sanciones de SEO. A continuación, se muestran algunos ejemplos de lo que se considera intrusivo (e inaceptable) y lo que no es intrusivo (y aceptable), según la cantidad de contenido que se cubre.
Por qué Journeys puede ayudar con las métricas de rendimiento
Estas son tres preguntas que, si te las haces, podrían justificar que uses la solución para desplazamiento por debajo de la parte inferior de Journeys.
- ¿Cómo puedo mejorar la clasificación SEO de la página de mi sitio web?
Mostrar un banner solo una vez que un usuario se ha desplazado hacia abajo por debajo de la parte inferior, puede mejorar el SEO y la recomendación de página de Google para tu sitio. Le da tiempo al usuario para leer el contenido de la página sin interrupciones y también muestra información relevante al usuario en el momento adecuado.
- ¿Por qué mi banner tiene una tasa de clics baja?
Las bajas tasas de clics pueden deberse a muchas cosas, incluidos los usuarios que visitan tu página por accidente o con una intención menor. Si muestras un banner justo cuando se carga la página, puede resultar en lo que parece un banner de bajo rendimiento, porque los usuarios rebotan inmediatamente. Este rebote reducirá la tasa de conversión de vista por clic y podría asociarse falsamente con el rendimiento del banner.
Es clave aislar las posibles razones cuando se trata de comprender el rendimiento de la página.
- ¿Por qué mi sitio web tiene una tasa de rebote alta?
¿Qué sucede cuando sabes que tus usuarios están interesados, pero no permanecen en la página lo suficiente como para participar? Primero debes preguntarte si suceden demasiadas cosas cuando el usuario llega a la página. Los estudios han demostrado que demasiadas interacciones reducirán el tiempo que pasan los usuarios en una página.
Mostrar un banner de Journeys solo después de que se hayan desplazado parcialmente hacia abajo en la página puede reducir el desorden y ayudar al usuario a acceder al contenido correcto.
Ejemplo de caso de uso de Journeys: por debajo de la parte inferior
Antes de empezar, una cosa a tener en cuenta: el caso de uso a continuación supone que actualmente estás utilizando nuestro producto Journeys y que está configurado correctamente. De no ser así, hacerlo es muy fácil. Solo tienes que ir a nuestro portal de soporte y empezar. Configurarlo no debería llevar mucho tiempo.
Entonces, ¿estás listo para probar esta solución? ¡Comencemos! Simplemente sigue los tres sencillos pasos a continuación. Incluso hemos agregado comentarios en cada línea de código para proporcionar una explicación detallada de lo que realmente está haciendo.
Paso 1
Asegúrate de haber instalado el SDK web de Branch.
Paso 2
Agrega el fragmento de Javascript a continuación en tu sitio web:
var scrollDistance = 400;
var scrolledPastThreshold = false;
var journeyShowing = false;
window.onscroll = function() {
var distanceScrolled = document.documentElement.scrollTop;
if ((distanceScrolled - scrollDistance) > 1) {
scrolledPastThreshold = true;
if (scrolledPastThreshold && !journeyShowing) {
document.getElementById("branch-banner-iframe").style.height = "100vh";
journeyShowing = true;
}
} else if ((distanceScrolled - scrollDistance) < 1) {
scrolledPastThreshold = false;
if (!scrolledPastThreshold && journeyShowing) {
document.getElementById("branch-banner-iframe").style.height = "0vh";
journeyShowing = false;
}
}
}
Las tres primeras líneas crean las variables globales que se utilizan en esta solución:
var scrollDistance = 400; // how far (in px) to scroll before showing Journey
var scrolledPastThreshold = false; // true/false value to track if user scrolled
// past scrollDistance value or not
var journeyShowing = false; // true/false value to track if the journey is
// showing or not
La siguiente sección es la primera mitad de la función de dos partes que muestra el Journey cuando el usuario va más allá de la distancia configurada para desplazarse.
window.onscroll = function() { // built in Javascript event function that fires each
// time a page is scrolled down or up by a pixel
var distanceScrolled = document.documentElement.scrollTop; // when user is at the
// top of page the value is zero
if ((distanceScrolled - scrollDistance) > 1) { // When user is at the top of the
// page: 0 - 400 = -400 → if statement evaluates false
// page: 402 - 400 = 2 → if statement evaluates true
scrolledPastThreshold = true;
if (scrolledPastThreshold && !journeyShowing) {
document.getElementById("branch-banner-iframe").style.height = "100vh";
// modify the Journey’s css to show it on the site
journeyShowing = true; // Journey is now showing, save state
}
El resto del fragmento es la mitad final de la función de dos partes que oculta el Journey cuando el usuario se desplaza hacia arriba por encima de la distancia configurada para desplazarse.
} else if ((distanceScrolled - scrollDistance) < 1) { // if the statement on line 7
// isn’t true, code then checks this if statement
// Below fold: 500 - 400 = 100 → if statement evaluates false
// Above fold: 398 - 400 = -2 → if statement evaluates true
scrolledPastThreshold = false; // user scrolled past threshold, save state
if (!scrolledPastThreshold && journeyShowing) { // user scrolled above fold and
// Journey is showing
document.getElementById("branch-banner-iframe").style.height = "0vh";
// modify the Journey’s css to hide it from the site
journeyShowing = false; // Journey is now hiding, save state
}
}
}
Paso 3
La última parte de esta solución se hace en el dashboard. Navega hasta el Journey que has creado para esta solución. Luego cambia la “Altura” a ‘0vh’, que se muestra a continuación en la línea 6. Esto evitará que el Journey se muestre al cargar la página. Este es un paso necesario para que la solución funcione.
Si necesitas ayuda para configurar tu Journey, dirígete a nuestra guía de configuración Usar Branch
Ahora deberías tener todo listo, acabas de crear un banner de Journeys “por debajo de la parte inferior”.
Una vez que hayas implementado nuestro ejemplo de Journeys, avísanos. Tenemos una sorpresa especial para los primeros clientes que implementen esto en su sitio web. Comunícate con nosotros y muéstranos tu solución.
Branch está aquí para apoyarte
En Branch, nos encanta apoyar y ayudar a nuestros clientes a crecer. No importa cuánto desarrollemos nuestros productos, sabemos que solo estamos explorando la superficie de lo que es posible. Agregamos intencionalmente flexibilidad para garantizar que se desbloquee todo el potencial del producto, lo que te permite crear tus propias soluciones increíbles. Nuestro caso de uso “por debajo de la parte inferior” de Journeys es un ejemplo perfecto.
Obtén más información sobre cómo captar visitantes web y convertirlos en usuarios leales de app con Journeys aquí.