1. Introducción a Remix y Personalización
Hoy vamos a hablar sobre Remix y Personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. La personalización web ofrece contenido de manera granular y ofrece experiencias exclusivas en sitios web y aplicaciones web. Ejemplos incluyen tiendas en línea que ofrecen ofertas dirigidas en función del comportamiento del usuario y plataformas de noticias que ofrecen contenido específico según la ubicación del usuario. La personalización mejora las experiencias de los usuarios, genera leads mejor calificados y mejora la afinidad de la marca.
Hola a todos. Mi nombre es Facundo y hoy vamos a hablar sobre Remix y Personalización. Antes que nada, quiero presentarme. Como dije, mi nombre es Facundo, Facundo Giuliani. Soy un ingeniero de relaciones con desarrolladores en Storyblock. También soy uno de los organizadores de React Buenos Aires, la comunidad de React más grande de Argentina. También organizamos encuentros mensuales en persona en Buenos Aires, la ciudad donde vivo. También soy Embajador de Auth0, Embajador de Prisma y Experto en Desarrollo de Medios de Cloudinary.
Pueden encontrarme en Twitter. Mi usuario es Facundo Surdo. ¿Les ha pasado alguna vez que a veces van, bueno, no a veces, sino que van habitualmente al mismo café y los camareros los llaman por su nombre, o ya saben lo que van a pedir, o probablemente van a cervecerías locales y las personas que trabajan en la cervecería les recomiendan nuevas cervezas que están en barril basadas en otras cervezas que han pedido en visitas anteriores? Si eso les ha pasado, entonces en esos escenarios están experimentando lo que llamamos personalización, que es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Probablemente el término data suene un poco técnico. Pero la verdad es que basándonos en cosas que vemos, cosas que podemos aprender sobre las personas, cosas que podemos descubrir sobre ellas, podemos ofrecer estas experiencias exclusivas a ellas y satisfacer sus necesidades. Digamos que hablaremos sobre algunos de los beneficios de la personalización más adelante. Pero como estamos hablando de desarrollo web, vamos a hablar sobre la personalización web, que es esta capacidad de ofrecer contenido de manera granular y ofrecer estas experiencias exclusivas en sitios web y aplicaciones web. Nuevamente, basado en datos existentes, datos que podemos recopilar de los usuarios y las personas que visitan nuestros sitios web.
Algunos ejemplos de personalización web serían tiendas en línea que ofrecen ofertas dirigidas a las personas que están navegando por su sitio web en función de su comportamiento. Para darte un ejemplo, puedes ir a Amazon y verás una sección en la página de inicio de Amazon con sugerencias de artículos que pueden ser interesantes para ti basadas en compras anteriores. O por ejemplo, puedes ir a plataformas de noticias y medios y obtener contenido específico que puede ser interesante para ti basado, por ejemplo, en dónde vives. Un ejemplo de eso sería Netflix, donde obtienes los cinco programas de televisión y películas más populares en tu país. Yo vivo en Argentina y estos son los programas que están de moda en este momento. Como puedes ver, el primero está relacionado con el fútbol. Eso se debe a que el Mundial de fútbol está a punto de comenzar. Pero recibirás estas sugerencias y este contenido específico para ti basado en diferentes detalles que el sitio web, los desarrolladores o los diseñadores de productos pudieron obtener de ti, de tu comportamiento y de tu entorno. Así que hablamos de personalización, por qué queremos personalizar nuestros productos, por qué queremos ofrecer experiencias personalizadas a los usuarios. En primer lugar, queremos que las personas que visitan nuestros sitios web tengan excelentes experiencias de usuario. Si les ofrecemos experiencias personalizadas, las haremos más felices, tendrán un mejor tiempo al usar nuestros productos y visitar nuestros sitios web, por ejemplo. Y eso también nos ayudará desde la perspectiva de las ventas, porque si queremos vender productos, si queremos ofrecer servicios, obtendremos leads mejor calificados, porque las personas que harán clic en nuestras llamadas a la acción o visitarán nuestros catálogos, serán personas que realmente están interesadas en los productos y servicios que ofrecemos, o en los que realmente queremos ofrecerles. Además, como dije, podemos optimizar nuestras páginas de destino y llamadas a la acción en nuestro sitio web, porque las personas que hacen clic en ellas, tenemos una forma de identificarlas y ofrecerles lo que están buscando, o lo que creemos que les resultará interesante. Y finalmente, nos ayudará a nosotros, como marca, a tener una mayor afinidad, porque como marca, estaremos ofreciendo las mejores experiencias a los usuarios y nuestros usuarios nos recomendarán nuestros servicios y productos, y disfrutarán siendo parte de las experiencias que
2. Tipos de Personalización y Pasos para Implementar
Tenemos diferentes tipos de experiencias de personalización basadas en cómo mostramos contenido personalizado y recuperamos datos. La personalización explícita utiliza datos proporcionados por los usuarios, como completar un formulario. La personalización implícita utiliza el comportamiento del usuario y compras anteriores. La personalización interrumpida ofrece interacciones u ofertas inesperadas, como notificaciones push. La personalización fluida se integra en la experiencia general del usuario, como recomendaciones de música personalizadas en Spotify. Para implementar una estrategia de personalización, debemos recopilar datos, crear perfiles de clientes, establecer objetivos y planificar e implementar la estrategia.
Ofrecemos. Tenemos diferentes tipos de experiencias de personalización basadas en la forma en que mostramos el contenido personalizado o cómo personalizamos la experiencia de los usuarios, y por otro lado, en la forma en que recuperamos la información o los
data que nos ayudarán a ofrecer estas experiencias personalizadas. Por ejemplo, podemos hablar de personalización explícita cuando estas experiencias que ofrecemos se basan en
data proporcionados, bueno, explícitamente por los usuarios y visitantes de nuestro sitio web. Para darte un ejemplo, cuando pedimos al usuario que complete un formulario o les preguntamos sobre sus intereses, obtenemos detalles explícitos de sus intereses. Por otro lado, hablamos de personalización implícita cuando obtenemos estos
data o estos detalles basados en el comportamiento de los usuarios, compras anteriores, desde dónde están navegando en nuestro sitio, dónde viven, etc. Hablamos de personalización interrumpida cuando estas experiencias que queremos ofrecer a los usuarios, son como algún tipo de interacción u ofertas que no esperan. Para mencionar un ejemplo, un ejemplo de esta personalización interrumpida sería un modal en un sitio web o una notificación push en el teléfono que ofrece, por ejemplo, productos especiales o ofertas basadas en dónde vives o los restaurantes a los que prefieres ir o a los que sueles ir. Y la personalización fluida es la experiencia cuando es parte de toda la aplicación o de toda la visita de tus usuarios cuando realmente están visitando nuestro sitio web o están usando nuestra aplicación. Para mencionar un ejemplo de personalización fluida, sería, por ejemplo, cuando estás usando Spotify y tienes la sección con música recomendada basada en tus intereses o en lo que estuviste escuchando la semana pasada o el mes pasado, por ejemplo. Eso es algo que esperas del producto y esperas que sea personalizado basado en tus intereses. Entonces, digamos que queremos implementar una estrategia de personalización o una experiencia personalizada para nuestros usuarios, tenemos algunos pasos a seguir. El primer paso sería recopilar
data de los visitantes. Tenemos diferentes formas de recopilar
data. Podemos preguntar explícitamente a los visitantes sobre detalles que nos ayudarán a ofrecerles mejores experiencias. Podemos mapear los recorridos de los clientes, podemos rastrear información con cookies o con correos electrónicos de marketing con parámetros de URL en los enlaces que incluimos en nuestros correos electrónicos. También podemos usar registros de la empresa, es decir, registros que tenemos en nuestra empresa de los diferentes clientes que tenemos o con los que nos hemos contactado en el pasado. El segundo paso será crear perfiles de clientes. Vamos a definir las personas del cliente. Estas personas serán individuos a los que vamos a nombrar, con una edad, descripción e intereses y, por otro lado, eso nos ayudará a identificar cómo personalizar su experiencia. Es decir, cuál será la mejor manera de ofrecerles una experiencia personalizada y personalizada al usar nuestro producto. El tercer paso sería establecer nuestros objetivos. Es decir, lo que queremos obtener de estas experiencias personalizadas. Por ejemplo, podemos querer aumentar nuestras conversiones o reducir nuestra tasa de rebote, o probablemente queremos mejorar nosotros mismos, o queremos aumentar la retención de las personas que hablan sobre nuestro producto o nuestro propio sitio web. Finalmente, necesitamos planificar e implementar esta estrategia que estamos tomando. Necesitamos identificar las áreas involucradas de nuestro producto, y las que vamos a modificar o que estarán involucradas en este proceso, en esta campaña que vamos a crear. Vamos a redactar una campaña para lanzar esta experiencia personalizada. Vamos a priorizar las diferentes campañas que pueden surgir. Por ejemplo, podemos pensar en diferentes ideas sobre cómo personalizar la experiencia de los usuarios. Estas ideas tendrán un impacto diferente. Algunas tendrán un mayor impacto, pero probablemente llevarán más tiempo para implementarse. Entonces, eso es algo que podemos usar para priorizarlas y pensar en cuál sería la mejor estrategia o la mejor campaña
3. Implementando Experiencias Personalizadas
Después de implementar una campaña, la probamos y la iteramos para mejorarla. Demostraré cómo implementar experiencias personalizadas en un sitio web utilizando Remix y Storyblock. Al rastrear las preferencias del usuario, podemos cambiar la página de inicio y los banners para ofrecer contenido personalizado. Storyblock es un CMS sin cabeza que proporciona un editor visual en tiempo real y creación de contenido basado en componentes. Utilizaremos Remix y componentes de React para integrar Storyblock en nuestra aplicación.
que podemos implementar en este momento. Y después de implementar una de estas campañas, la probaremos. Mediremos el éxito de la campaña, y luego la iteraremos para ver cómo podemos mejorarla.
Les mostraré una demostración rápida de cómo implementar una experiencia personalizada en un sitio web. Bueno, por supuesto, utilizando Remix porque estamos en la conferencia de Remix. Entonces, lo que quería mostrarles ahora es este sitio web simple donde tengo mi página de inicio. En esta página de inicio, ofrezco contenido genérico y tengo un banner con descuentos de los productos que ofrezco. Como pueden ver en la parte superior de mi página, tengo una barra de herramientas con diferentes enlaces al catálogo, que será el catálogo general de mi sitio web. Y luego tengo la categoría de ropa deportiva y la categoría de ropa elegante. Si visito una de estas categorías, verán que puedo ver los productos de esa categoría en particular. Ropa deportiva, si voy al catálogo general, verán todos los diferentes productos que ofrezco en mi sitio web. Y si voy a ropa elegante, verán solo los productos de la categoría de ropa elegante. Pero lo que estoy haciendo en este sitio web es considerar que la primera categoría que el usuario está visitando, que en mi caso fue ropa deportiva, es mi categoría preferida, es decir, los productos que más me gustan del sitio web. Entonces, lo que vamos a hacer para ofrecer esta experiencia personalizada es cambiar la página de inicio y cambiar el banner que está en la página de inicio. Y ahora, al visitar esta categoría y mostrar interés en la ropa deportiva, el banner que estoy obteniendo, como pueden ver, es diferente y no es el genérico que mostramos antes, es un banner sobre descuentos y ofertas relacionadas específicamente con la ropa deportiva, que es el tipo de producto que prefieren, ¿verdad? Porque ese es el criterio que definimos para los usuarios. Entonces, para este proyecto de demostración simple, he utilizado Storyblock. Storyblock es un sistema de gestión de contenido sin cabeza que te ayudará a crear y gestionar el contenido de tu sitio web. Lo interesante de Storyblock es que tiene dos beneficios principales, digamos, uno es que ofrece un editor visual en tiempo real, por lo que los usuarios y los editores de contenido pueden, bueno, ingresar a este editor visual y tener una vista previa en tiempo real de cómo se verá el contenido antes de que lo publiquen. Y por otro lado, los usuarios pueden interactuar con el contenido que están creando y los componentes que forman parte de este contenido que están creando. Porque Storyblock también ofrece un enfoque de componentes. Podrás crear componentes reutilizables que se llaman bloques. Y estos bloques, los tendrás en diferentes páginas y en diferentes partes de tus páginas y podrás reutilizarlos como entidades de contenido diferentes. Lo interesante de Storyblock, al ser un sistema de gestión de contenido sin cabeza, es que podemos usarlo con cualquier framework, cualquier lenguaje de programación, cualquier lenguaje de programación en particular que prefieras. En nuestro caso, utilizaremos Remix para nuestro ejemplo y todas las diferentes características que Remix nos ofrece . Lo interesante también es que vamos a utilizar componentes de React para vincular a estos componentes de Storyblock. Entonces, tendremos la representación visual de nuestros componentes de Storyblock utilizando componentes de React en el frontend de nuestra aplicación. Entonces, vamos ahora a la demostración. Nuevamente, quiero mostrarles primero el editor visual de Storyblock que mencioné antes. Como pueden ver, tengo la página, es decir, mi página dentro de este editor visual en tiempo real. Tengo la posibilidad de hacer clic en los diferentes componentes o bloques de mi página y tengo la posibilidad de editar estos valores y ver en tiempo real el contenido que estoy creando y editando. Puedo, por ejemplo, como pueden ver, agregar algo de texto aquí y aparece en tiempo real porque este es el
4. Estructura de la Página y Personalización
Les mostraré la estructura de mi página, que incluye contenido personalizado para diferentes tipos de usuarios basado en sus intereses. Tenemos variantes para ropa genérica, ropa deportiva y ropa elegante. La página de catálogo muestra productos de categorías específicas y el bloque de tienda contiene todos los productos. Utilizamos cookies para identificar los intereses de los usuarios y mostrar contenido personalizado.
el editor visual en tiempo real de Storyblock. Lo que quería mostrarles es la estructura de mi página. Tengo este bloque o componente de texto enriquecido que muestra un texto genérico, pero por otro lado, tengo este contenido personalizado que es un bloque que contiene otros componentes y tenemos diferentes variantes basadas en el tipo de usuario que queremos identificar y este tipo de usuario se basará en el interés que están mostrando. Tendremos una variante de contenido genérico que tiene el banner con la llamada a la acción para el caso genérico, el usuario que no mostró ningún interés en ninguna categoría en particular. Aquí tenemos el titular, el texto y la imagen que estamos mostrando y el enlace a esa página. Pero también tenemos algunas variantes para la ropa deportiva y la ropa elegante. Entonces, si voy a la ropa deportiva, verán que tengo el tipo de usuario de esta variante y luego tengo la llamada a la acción que es un titular, un texto, una imagen y el enlace a la página de catálogo real para la ropa deportiva con los descuentos que queremos mostrar.
Esta página es la página de inicio donde estamos, bueno, mostrando la lógica, la experiencia de personalización que queremos mostrar realmente a los usuarios. Si voy a la página de catálogo, déjenme salir del editor visual y quería mostrarles nuevamente que en mi ejemplo de personalización, puedo ir al contenido y puedo mostrarles las páginas de catálogo que tenemos aquí. Lo que estamos haciendo en el catálogo, les mostraré la ropa deportiva como ejemplo. Estamos mostrando todos los productos de una categoría en particular. Entonces, esta categoría, quiero decir, la página que estamos mostrando para el catálogo, solo tenemos el cuerpo de esta página y el cuerpo tiene un bloque de tipo catálogo. Este catálogo, lo único que estamos almacenando es la categoría de este catálogo. Luego, en el frontend de nuestra aplicación, estamos implementando la lógica que queremos usar para mostrar solo los productos de esa categoría. Lo mismo sucede con la ropa elegante. En el caso del catálogo general, vamos a mostrar todos los productos de nuestro sitio web. Hablando de los productos, les mostraré que tenemos una carpeta en MySpace en un bloque de tienda con todos los productos que ofrezco. Estos productos, no tienen una representación visual particular, pero si les muestro, por ejemplo, esta chaqueta de nieve, verán que estoy almacenando toda la información relacionada con el producto. Estoy almacenando la imagen, el precio y la categoría, y esta categoría es la que vamos a usar para filtrarlos según el catálogo que el usuario está visitando. Entonces, esta es la estructura de contenido de mi proyecto que tengo en el bloque de tienda, y esto es lo que voy a usar y consumir desde la API del bloque de tienda en mi Remix frontend. Entonces, si voy ahora a mi proyecto de Remix, como pueden ver en el lado izquierdo, tengo la estructura típica de un proyecto de Remix. Tengo dos rutas. Básicamente, una es una ruta genérica en el nivel superior de la carpeta de rutas, y luego tengo una ruta de catálogo para la página de catálogo real. Quiero mostrarles primero la página de catálogo porque aquí es donde ocurre la magia de identificar a los usuarios. Lo que estamos haciendo es obtener una cookie con esta biblioteca de cookies de React que se ha instalado para este propósito. Vamos a ver si el usuario ya tiene un tipo de usuario. Este tipo de usuario identificará el interés del usuario. Si el usuario no visitó ninguna página de catálogo antes, vamos a establecer una nueva cookie basada en la categoría que el usuario está visitando. Si estamos visitando la página de ropa deportiva y el usuario no tiene ninguna cookie de tipo de usuario en su navegador, vamos a establecer eso como el tipo de usuario y vamos a considerar a este usuario como interesado en productos de ropa deportiva. Aquí estamos mostrando realmente el contenido de mi página. Vamos a mostrar el título de la categoría y la lista de productos.
5. Implementación de la Estrategia de Personalización
Más adelante les mostraré. No quiero entrar en detalles de los diferentes componentes de React que creé. Lo que quería mostrarles es cómo implementar la estrategia de personalización real. En la función de carga de mi raíz del grupo de catálogo, voy a obtener de la URL la categoría, porque podemos identificar el tipo de catálogo que podemos ver en nuestra URL. Vamos a establecer algunas consultas de filtro para llamar al bloque de tienda, pueden ver que vamos a filtrar productos y los productos que vamos a filtrar y traer a este catálogo se basan en la categoría. Si estamos visitando una categoría en particular, quiero decir, no el catálogo genérico, vamos a filtrar los productos y traer solo los productos de esa categoría. Y ahora que creamos todos estos objetos de consulta de filtro, los vamos a agregar como parámetro a los parámetros que vamos a enviar a la API de Storyblock para recuperar todos los productos del espacio de Storyblock al que estamos conectados y en el que estamos trabajando y que estamos usando para nuestros productos. Como pueden ver, estamos inicializando la conexión con la API de Storyblock y estamos obteniendo todas las historias, que son los elementos de Storyblock, basados en los productos que queremos recuperar y la categoría que queremos mostrar. Y en base a eso, bueno, obtendremos todos los productos de nuestra categoría y el título de la categoría que estamos usando para renderizar la página. La página de inicio genérica, lo siento, la página de inicio.
Basado en lo que viene de la API de registro de servicios. Más adelante les mostraré. No quiero entrar en detalles de los diferentes componentes de
React que creé. Lo que quería mostrarles es cómo implementar la estrategia de personalización real. En la función de carga de mi raíz del grupo de catálogo, voy a obtener de la URL la categoría, porque podemos identificar el tipo de catálogo que podemos ver en nuestra URL. Vamos a establecer algunas consultas de filtro para llamar al bloque de tienda, pueden ver que vamos a filtrar productos y los productos que vamos a filtrar y traer a este catálogo se basan en la categoría. Si estamos visitando una categoría en particular, quiero decir, no el catálogo genérico, vamos a filtrar los productos y traer solo los productos de esa categoría. Y ahora que creamos todos estos objetos de consulta de filtro, los vamos a agregar como parámetro a los parámetros que vamos a enviar a la API de Storyblock para recuperar todos los productos del espacio de Storyblock al que estamos conectados y en el que estamos trabajando y que estamos usando para nuestros productos. Como pueden ver, estamos inicializando la conexión con la API de Storyblock y estamos obteniendo todas las historias, que son los elementos de Storyblock, basados en los productos que queremos recuperar y la categoría que queremos mostrar. Y en base a eso, bueno, obtendremos todos los productos de nuestra categoría y el título de la categoría que estamos usando para renderizar la página. La página de inicio genérica, lo siento, la página de inicio. Para la página de inicio, estamos usando esta otra ruta. Como pueden ver, estamos cargando los datos. Estamos mostrando la historia, que es la página que queremos mostrar y la información que viene relacionada con ese elemento de Storyblock. Estamos usando este componente de Storyblock, que es un componente genérico de
React que nos ayudará a renderizar todo el contenido de nuestra página basado en los bloques y componentes que estamos agregando en Storyblock. Vamos a renderizar la página y vamos a ofrecer a los editores de contenido la posibilidad de editar los diferentes componentes que forman parte de la página. Luego, en nuestras funciones de carga, vamos a llamar a la API de Storyblock para obtener la página que estamos visitando. Probablemente en este ejemplo, como es muy simple, solo mostraremos la página de inicio con esta ruta y siguiendo esta lógica, pero en el caso de que tengamos más páginas en el nivel superior de nuestro sitio web, esta misma ruta renderizará cualquier página sin importar el contenido que estemos mostrando en esa página, sin importar los bloques o los componentes que tengamos en ellos, porque estamos usando este componente dinámico de Store Block para renderizar la propia página y estamos utilizando la misma lógica de renderizado para todas las páginas de nuestro sitio web que estamos gestionando en Store Block. Por último, quería mostrarles este componente de
React llamado contenido personalizado que está vinculado al bloque de contenido personalizado que tenemos aquí en Store Block y que tiene las diferentes variantes. Cuando estamos renderizando este contenido personalizado, quiero decir, cuando estamos renderizando un componente de tipo contenido personalizado, vamos a identificar el tipo de usuario a partir de la cookie utilizando la misma biblioteca UseCookie de
React que instalé y luego con ese usuario vamos a mostrar solo el banner que queremos mostrar para ese tipo de usuario. Entonces, si no tenemos la cookie o la cookie es un catálogo genérico, vamos a mostrar el banner genérico. Si tenemos la categoría identificada y creamos la cookie previamente, vamos a mostrar uno de los otros banners que tenemos aquí basado en la categoría del usuario que identificamos. Este ejemplo simple es lo que quería mostrarles sobre cómo ofrecer una experiencia personalizada a nuestros usuarios. Seguí los pasos, quiero decir, recopilé los datos de los visitantes, que consistía en ver qué páginas están visitando, qué catálogo están visitando. Creamos el perfil del cliente, en este caso sería Facundo, que está interesado en ropa deportiva y camisetas de fútbol, digamos. Establecimos nuestros objetivos, lo que queremos hacer es ofrecer promociones y descuentos a Facundo para que compre más camisetas de fútbol y otras prendas deportivas y luego preparamos la estrategia, que consistía en mostrar el banner en la página de inicio para que cada vez que Facundo visite nuestro sitio web, vea estas ofertas y descuentos en ropa deportiva y vaya directamente al catálogo de ropa deportiva. Así que muchas gracias, espero que hayan aprendido algo nuevo y no duden en contactarme en Twitter para hablar sobre personalización y otros temas, y nuevamente muchas gracias.
React Summit 2022
Comments