Aquí y allá, la gente habla de "Personalización". Los creadores de contenido, los especialistas en marketing, los diseñadores y los propietarios de productos evalúan las posibilidades y alternativas para manejar escenarios personalizados mientras ofrecen experiencias poderosas a los usuarios. Y nosotros, los desarrolladores, tenemos algunas formas de ayudar con eso. Hablemos sobre la personalización, los beneficios, los desafíos y cómo podemos gestionar y ofrecer experiencias personalizadas en nuestros proyectos de Remix.
¡Tu Remix Personal!
Video Summary and Transcription
La charla de hoy trata sobre Remix y Personalización, destacando los beneficios de las experiencias personalizadas en sitios web y aplicaciones web. Se explican diferentes tipos de personalización, junto con los pasos para implementar una estrategia de personalización. Se demuestra el uso de Remix y Storyblock para implementar experiencias personalizadas en un sitio web. Se muestra la estructura de una página con contenido personalizado para diferentes tipos de usuarios, junto con el uso de cookies para identificar los intereses de los usuarios. Se explica la implementación de una estrategia de personalización utilizando componentes de React y la API de Storyblock.
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.
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.
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.
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.
Comments