¡Tu Remix Personal!

Rate this content
Bookmark

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.

This talk has been presented at Remix Conf Europe 2022, check out the latest edition of this React Conference.

FAQ

Facundo Giuliani es un ingeniero de relaciones con desarrolladores en Storyblock, organizador de React Buenos Aires y Embajador de Auth0, Prisma y Experto en Desarrollo de Medios de Cloudinary.

La personalización en el desarrollo web se refiere a la capacidad de ofrecer contenido y experiencias exclusivas a los usuarios basadas en datos existentes sobre su comportamiento y preferencias.

Ejemplos de personalización web incluyen tiendas en línea que muestran ofertas dirigidas y plataformas como Netflix que muestran contenido popular basado en tu ubicación.

Existen varios tipos de personalización, incluyendo personalización explícita basada en datos proporcionados por los usuarios, personalización implícita basada en comportamiento y compras anteriores, personalización interrumpida con ofertas inesperadas y personalización fluida que integra completamente las recomendaciones en la experiencia del usuario.

El primer paso para implementar una estrategia de personalización es recopilar data de los visitantes, lo cual puede incluir detalles explícitos a través de formularios o información implícita a través del comportamiento en el sitio.

La personalización puede mejorar las ventas en línea al ofrecer a los usuarios experiencias más relevantes y personalizadas, lo que aumenta la probabilidad de que interactúen con productos y servicios que realmente les interesan.

Storyblock es un sistema de gestión de contenido sin cabeza que ofrece un editor visual en tiempo real y un enfoque basado en componentes para ayudar a crear y gestionar contenido de manera eficaz y personalizada.

Facundo Giuliani
Facundo Giuliani
24 min
18 Nov, 2022

Comments

Sign in or register to post your comment.
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.
Available in English: Your Personal Remix!

1. Introducción a Remix y Personalización

Short description:

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

Short description:

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

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Construyendo Mejores Sitios Web con Remix
React Summit Remote Edition 2021React Summit Remote Edition 2021
33 min
Construyendo Mejores Sitios Web con Remix
Top Content
Remix is a web framework built on React Router that focuses on web fundamentals, accessibility, performance, and flexibility. It delivers real HTML and SEO benefits, and allows for automatic updating of meta tags and styles. It provides features like login functionality, session management, and error handling. Remix is a server-rendered framework that can enhance sites with JavaScript but doesn't require it for basic functionality. It aims to create quality HTML-driven documents and is flexible for use with different web technologies and stacks.
No resuelvas problemas, elimínalos
React Advanced 2021React Advanced 2021
39 min
No resuelvas problemas, elimínalos
Top Content
Kent C. Dodds discusses the concept of problem elimination rather than just problem-solving. He introduces the idea of a problem tree and the importance of avoiding creating solutions prematurely. Kent uses examples like Tesla's electric engine and Remix framework to illustrate the benefits of problem elimination. He emphasizes the value of trade-offs and taking the easier path, as well as the need to constantly re-evaluate and change approaches to eliminate problems.
Escalando con Remix y Micro Frontends
Remix Conf Europe 2022Remix Conf Europe 2022
23 min
Escalando con Remix y Micro Frontends
Top Content
This talk discusses the usage of Microfrontends in Remix and introduces the Tiny Frontend library. Kazoo, a used car buying platform, follows a domain-driven design approach and encountered issues with granular slicing. Tiny Frontend aims to solve the slicing problem and promotes type safety and compatibility of shared dependencies. The speaker demonstrates how Tiny Frontend works with server-side rendering and how Remix can consume and update components without redeploying the app. The talk also explores the usage of micro frontends and the future support for Webpack Module Federation in Remix.
Componentes de Full Stack
Remix Conf Europe 2022Remix Conf Europe 2022
37 min
Componentes de Full Stack
Top Content
RemixConf EU discussed full stack components and their benefits, such as marrying the backend and UI in the same file. The talk demonstrated the implementation of a combo box with search functionality using Remix and the Downshift library. It also highlighted the ease of creating resource routes in Remix and the importance of code organization and maintainability in full stack components. The speaker expressed gratitude towards the audience and discussed the future of Remix, including its acquisition by Shopify and the potential for collaboration with Hydrogen.
Remix Flat Routes – Una Evolución en el Enrutamiento
Remix Conf Europe 2022Remix Conf Europe 2022
16 min
Remix Flat Routes – Una Evolución en el Enrutamiento
Top Content
Remix Flat Routes is a new convention that aims to make it easier to see and organize the routes in your app. It allows for the co-location of support files with routes, decreases refactor and redesign friction, and helps apps migrate to Remix. Flat Folders convention supports co-location and allows importing assets as relative imports. To migrate existing apps to Flat Routes, use the Remix Flat Routes package's migration tool.
Cómo React Router se convirtió en un Framework
React Advanced 2024React Advanced 2024
31 min
Cómo React Router se convirtió en un Framework
My name is Mark Dalglish and I'm here to discuss how ReactRouter became a framework. Remix is built on ReactRouter and heavily relies on it. Remix feels like a framework because it has a CLI, manages the dev and build lifecycle, and has strong opinions about the file system structure. Remix embraced Vite as a plugin, allowing developers to integrate it seamlessly into their existing Vite setup. The shift to Vite led to a change in the philosophy of Remix Vite, enabling frameworks to orchestrate all the environment builds and make the framework as a plugin pattern first class. React Router is merging with Remix to make all the build time framework features available to React Router consumers. React Router is now officially a framework as well as a library. The move to integrate Remix into React Router is driven by the exploration of the next generation of Remix. React Router V7 simplifies by dropping the React Native layer and allows flexibility for consumers to use it as a library or as a framework with additional architectural features provided by plugins. The focus is on betting on Vite in the long term, and React Router plans to support React Server components. Thank you to Mark for answering the questions.

Workshops on related topic

Fundamentos de Remix
React Summit 2022React Summit 2022
136 min
Fundamentos de Remix
Top Content
Featured WorkshopFree
Kent C. Dodds
Kent C. Dodds
Construir aplicaciones web modernas está lleno de complejidad. Y eso solo si te molestas en lidiar con los problemas
¿Cansado de conectar onSubmit a las API del backend y asegurarte de que tu caché del lado del cliente se mantenga actualizada? ¿No sería genial poder utilizar la naturaleza global de CSS en tu beneficio, en lugar de buscar herramientas o convenciones para evitarla o trabajar alrededor de ella? ¿Y qué te parecería tener diseños anidados con una gestión de datos inteligente y optimizada para el rendimiento que simplemente funciona™?
Remix resuelve algunos de estos problemas y elimina completamente el resto. Ni siquiera tienes que pensar en la gestión de la caché del servidor o en los conflictos del espacio de nombres global de CSS. No es que Remix tenga APIs para evitar estos problemas, simplemente no existen cuando estás usando Remix. Ah, y no necesitas ese enorme y complejo cliente graphql cuando estás usando Remix. Ellos te tienen cubierto. ¿Listo para construir aplicaciones más rápidas de manera más rápida?
Al final de esta masterclass, sabrás cómo:- Crear Rutas de Remix- Estilizar aplicaciones de Remix- Cargar datos en los cargadores de Remix- Mutar datos con formularios y acciones
De vuelta a las raíces con Remix
React Summit 2023React Summit 2023
106 min
De vuelta a las raíces con Remix
Featured Workshop
Alex Korzhikov
Pavlik Kiselev
2 authors
La web moderna sería diferente sin aplicaciones ricas del lado del cliente respaldadas por potentes frameworks: React, Angular, Vue, Lit y muchos otros. Estos frameworks se basan en JavaScript del lado del cliente, que es su núcleo. Sin embargo, existen otros enfoques para el renderizado. Uno de ellos (bastante antiguo, por cierto) es el renderizado del lado del servidor completamente sin JavaScript. Descubramos si esta es una buena idea y cómo Remix puede ayudarnos con ello?
Prerrequisitos- Buen entendimiento de JavaScript o TypeScript- Sería útil tener experiencia con React, Redux, Node.js y escribir aplicaciones FrontEnd y BackEnd- Preinstalar Node.js, npm- Preferimos usar VSCode, pero también se pueden utilizar IDE en la nube como codesandbox (otros IDE también están bien)
Cómo Resolver Problemas del Mundo Real con Remix
Remix Conf Europe 2022Remix Conf Europe 2022
195 min
Cómo Resolver Problemas del Mundo Real con Remix
Featured Workshop
Michael Carter
Michael Carter
- ¿Errores? Cómo renderizar y registrar tus errores del servidor y del clientea - Cuándo devolver errores vs lanzar excepcionesb - Configurar servicios de registro como Sentry, LogRocket y Bugsnag- ¿Formularios? Cómo validar y manejar formularios de varias páginasa - Usar zod para validar los datos del formulario en tu acciónb - Pasar por formularios de varias páginas sin perder datos- ¿Atascado? Cómo solucionar errores o funciones faltantes en Remix para que puedas continuara - Usar patch-package para solucionar rápidamente tu instalación de Remixb - Mostrar herramienta para gestionar múltiples parches y seleccionar solicitudes de extracción abiertas- ¿Usuarios? Cómo manejar aplicaciones de varios inquilinos con Prismaa - Determinar el inquilino por el host o por el usuariob - Base de datos múltiples o base de datos única/múltiples esquemasc - Asegura que los datos del inquilino siempre estén separados de los demás
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
React Summit 2024React Summit 2024
92 min
Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web
Featured Workshop
Vivek Nayyar
Vivek Nayyar
Sumérgete en el mundo de la IA con nuestro masterclass interactivo diseñado específicamente para desarrolladores web. "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" ofrece una oportunidad única para cerrar la brecha entre la IA y el desarrollo web. A pesar de la prominencia de Python en el desarrollo de IA, el vasto potencial de JavaScript sigue siendo en gran medida inexplorado. Este masterclass tiene como objetivo cambiar eso.A lo largo de esta sesión práctica, los participantes aprenderán cómo aprovechar LangChain, una herramienta diseñada para hacer que los modelos de lenguaje grandes sean más accesibles y útiles, para construir agentes de IA dinámicos directamente dentro de entornos JavaScript. Este enfoque abre nuevas posibilidades para mejorar las aplicaciones web con funciones inteligentes, desde el soporte al cliente automatizado hasta la generación de contenido y más.Comenzaremos con los conceptos básicos de LangChain y los modelos de IA, asegurando una base sólida incluso para aquellos nuevos en IA. A partir de ahí, nos sumergiremos en ejercicios prácticos que demuestran cómo integrar estas tecnologías en proyectos reales de JavaScript. Los participantes trabajarán en ejemplos, enfrentando y superando los desafíos de hacer que la IA funcione sin problemas en la web.Este masterclass es más que una experiencia de aprendizaje; es una oportunidad de estar a la vanguardia de un campo emergente. Al final, los asistentes no solo habrán adquirido habilidades valiosas, sino que también habrán creado funciones mejoradas con IA que podrán llevar a sus proyectos o lugares de trabajo.Ya seas un desarrollador web experimentado curioso acerca de la IA o estés buscando expandir tus habilidades en áreas nuevas y emocionantes, "Masterclass: Integrando LangChain con JavaScript para Desarrolladores Web" es tu puerta de entrada al futuro del desarrollo web. Únete a nosotros para desbloquear el potencial de la IA en tus proyectos web, haciéndolos más inteligentes, interactivos y atractivos para los usuarios.
Construye y lanza un blog personal usando Remix y Vercel
Remix Conf Europe 2022Remix Conf Europe 2022
156 min
Construye y lanza un blog personal usando Remix y Vercel
Featured Workshop
Robert Pop
Robert Pop
En este masterclass aprenderemos cómo construir un blog personal desde cero usando Remix, TailwindCSS. El blog será alojado en Vercel y todo el contenido será servido dinámicamente desde un repositorio separado en GitHub. Utilizaremos HTTP Caching para las publicaciones del blog.
Lo que queremos lograr al final del masterclass es tener una lista de nuestras publicaciones de blog mostradas en la versión desplegada del sitio web, la capacidad de filtrarlas y leerlas individualmente.
Tabla de contenidos:- Configurar un proyecto de Remix con una pila predefinida- Instalar dependencias adicionales- Leer contenido desde GitHub- Mostrar contenido desde GitHub- Analizar el contenido y cargarlo en nuestra aplicación usando mdx-bundler- Crear una página separada para las publicaciones de blog para mostrarlas de forma independiente- Agregar filtros a la lista inicial de publicaciones de blog
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
React Advanced 2023React Advanced 2023
104 min
Construyendo Tiendas Online de Alto Rendimiento con Shopify Hydrogen y Remix
WorkshopFree
Alexandra Spalato
Alexandra Spalato
I. Introducción- Visión general de Shopify Hydrogen y Remix- Importancia del comercio electrónico sin cabeza y su impacto en la industria
II. Configurando Shopify Hydrogen- Instalando y configurando Hydrogen con Remix- Configurando la estructura del proyecto y los componentes
III. Creando Colecciones y Productos- Creando colecciones y productos utilizando los componentes React de Hydrogen- Implementando un Carrito de Compras- Construyendo un carrito de compras utilizando los componentes incorporados de Hydrogen
VI. Construyendo la página de inicio con Storyblok- Clonando el espacio y explicando cómo funciona- Implementando Storyblok en el repositorio- Creando los componentes Blok- Creando los componentes Shopify- Implementando personalización