No lo tomes de manera personal, es Personalización

Rate this content
Bookmark

"Personalización" es actualmente una de las palabras de moda más populares en el mundo del desarrollo. Los especialistas en marketing, desarrolladores y creadores de contenido evalúan las posibilidades y alternativas para manejar escenarios personalizados mientras ofrecen experiencias poderosas a los usuarios. Hablemos sobre la personalización, los beneficios, los desafíos y cómo podemos gestionar y ofrecer experiencias personalizadas. Veremos ejemplos de código utilizando algunas de las características introducidas en Next.js 12, la versión más reciente del framework, y conectándonos a Storyblok, un CMS sin cabeza que ofrece un editor visual en tiempo real.

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

FAQ

La personalización en tecnología web se refiere a la capacidad de entregar contenido de manera específica y ofrecer experiencias únicas a las personas basadas en datos existentes, como comportamiento de navegación o información personal.

Ejemplos de personalización web incluyen recibir ofertas específicas basadas en el comportamiento de navegación y ver contenido de medios y noticias ajustados a la ubicación geográfica del usuario.

La personalización web es importante porque las expectativas de los clientes han cambiado, demandando experiencias similares a las interacciones en tiempo real en plataformas web. Además, ofrece ventajas competitivas y mejora la satisfacción y retención del usuario.

Facundo Giuliani describe cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La explícita se basa en información proporcionada activamente por el usuario, mientras que la implícita se deriva del análisis del comportamiento del usuario.

Los desafíos incluyen definir el alcance de la personalización, elegir plataformas tecnológicas adecuadas para almacenar y analizar datos de usuarios, evitar silos de datos y medir el impacto de las estrategias de personalización implementadas.

Se puede implementar la personalización utilizando Next.js para generar contenido estático en tiempo de compilación y Storyblock para gestionar contenido dinámico. Las funciones de Edge y middlewares pueden ayudar a personalizar la experiencia basada en el tipo de usuario detectado.

Recomienda recopilar datos detallados de los usuarios, mapear sus recorridos, crear perfiles de visitantes y preparar estrategias orientadas a ofrecer contenido relevante y personalizado basado en los intereses y comportamientos de los usuarios.

Facundo Giuliani
Facundo Giuliani
22 min
21 Jun, 2022

Comments

Sign in or register to post your comment.

Video Summary and Transcription

La personalización es la capacidad de ofrecer experiencias exclusivas basadas en datos existentes. Es importante cumplir con las expectativas de los clientes y mantenerse competitivo. Hay cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La implementación de experiencias personalizadas implica el uso de herramientas como Next.js y NetJS. Las mejores prácticas incluyen evitar molestar a los usuarios, probar estrategias y monitorear análisis.

1. Introducción a la Personalización

Short description:

Hola a todos. Ahora hablemos de personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Hoy discutiremos la personalización web y su importancia. Las expectativas de los clientes han cambiado y no ofrecer experiencias personalizadas no cumpliría con sus expectativas. Además, si nuestros competidores ofrecen experiencias personalizadas y nosotros no, no obtendremos buenos resultados en ventas, visitantes y participación de los clientes.

Hola a todos. Espero que estén disfrutando de la conferencia. Ahora es hora de hablar un poco sobre personalización. En primer lugar, quería presentarme. Mi nombre es Facundo Giuliani. Soy de Buenos Aires, Argentina. También soy organizador del meetup local de React Buenos Aires. Bueno, si quieren hablar conmigo, estoy en Twitter. Soy Facundo Zurdo. Podemos mantenernos en contacto allí. ¿Les ha pasado que cuando van a un restaurante, por ejemplo, el camarero los llama por su nombre o ya sabe cuál es su pedido habitual? O si van a una tienda en particular, ven que las personas que trabajan allí están analizando para decir que, de alguna manera, los clientes, quiero decir, si van solos a comprar algo, no van a tener la misma conversación con el empleado de la tienda que una familia de miembros tendría porque, no sé, probablemente estén buscando algo rápidamente, que quieren salir rápidamente de la tienda. Pero sí, quiero decir, probablemente estas diferentes experiencias que tendrán, nuevamente, con el camarero o con el empleado de la tienda, etc., cuando esto sucede, quiero decir, cuando ofrecen diferentes experiencias según los clientes, estamos hablando de personalización. La personalización es la capacidad de ofrecer experiencias exclusivas a las personas basadas en datos existentes. Entonces estamos hablando de personalización en la vida real, por así decirlo. Lo que vamos a analizar hoy y hablar es la personalización web, que es la capacidad de entregar contenido de manera granular y ofrecer experiencias exclusivas a las personas basadas en datos existentes. Mencionamos el ejemplo del camarero, el ejemplo de la tienda cuando van a comprar algunos comestibles, por ejemplo. Pero ¿cómo podemos analizar eso o cómo podemos ver eso en los sitios web? Probablemente hayan experimentado algunos escenarios, algunos escenarios personalizados como recibir ofertas específicas basadas en el comportamiento de navegación, basadas en lo que están navegando, lo que están viendo en su computadora o en las redes sociales, Instagram, Facebook, etc. Están recibiendo ofertas específicas, quiero decir, ofertas personalizadas para ustedes con productos que pueden ser interesantes para ustedes. Eso sería un caso de personalización web. Otro caso de personalización web sería ir a una plataforma de medios en particular o a un periódico donde están leyendo noticias y pueden ver videos específicos según el lugar donde viven. Quiero decir, en el país en el que viven, en la ciudad en la que viven, obtienen este contenido personalizado que, nuevamente, probablemente les resulte más interesante que un contenido genérico. Entonces, cuando esto sucede, estamos hablando de personalización web. La pregunta es, ¿por qué es importante? Quiero decir, ¿por qué deberíamos preocuparnos por la personalización web? Bueno, en primer lugar, las expectativas de los clientes han cambiado. En el pasado, bueno, quiero decir, no solo en el pasado, sino también en el presente, estas interacciones en tiempo real a las que me refería antes, nos hemos acostumbrado a eso. Y queremos las mismas experiencias cuando estamos usando un sitio web, una plataforma web. Entonces, como los clientes están acostumbrados a este tipo de comportamientos o este tipo de experiencias, no ofrecerles experiencias personalizadas no cumpliría con sus expectativas. Entonces eso es algo que debemos evaluar. También relacionado con el mismo caso, si no ofrecemos experiencias personalizadas y nuestros competidores sí lo hacen, bueno, no obtendremos buenos resultados en ventas, no obtendremos buenos resultados en visitantes, o tampoco obtendremos buenos resultados en el tiempo que los clientes pasan en nuestro sitio web.

2. Tipos y Beneficios de la Personalización

Short description:

Si el cliente o el usuario está contento, pasarán más tiempo en nuestro sitio web. Ofrecer contenido personalizado a nuestros clientes y usuarios creará mejores impresiones. Hay cuatro tipos de personalización: explícita, implícita, interrumpida y fluida. La personalización explícita se basa en criterios establecidos por los visitantes, mientras que la personalización implícita analiza el comportamiento y el contexto del visitante. La personalización interrumpida sorprende a los visitantes con contenido inesperado, mientras que la personalización fluida integra contenido personalizado en la experiencia general.

Eso es algo que también debemos tener en cuenta. Quiero decir, si el cliente o el usuario está contento, pasarán más tiempo en nuestro sitio web navegando el contenido, viendo qué hacer, etc. Y, por supuesto, si estamos hablando de la marca o la empresa para la que trabajamos, ofrecer contenido personalizado a nuestros clientes y usuarios generará mejores impresiones de ellos.

Cuando hablamos de personalización, podemos diferenciar tipos de personalización. Mencionaré cuatro de ellos. Los primeros dos son la personalización explícita y la personalización implícita. La personalización explícita es cuando personalizamos el contenido según ciertos criterios establecidos por los visitantes. Esto sucede, por ejemplo, cuando ingresamos a un sitio web y pedimos a los visitantes que establezcan ciertos detalles relacionados con ellos. Les pedimos algunos datos personales para poder identificarlos y luego ofrecer contenido personalizado basado en la información que comparten con nosotros. Y la personalización implícita sería cuando analizamos el comportamiento de nuestros visitantes o clientes, o el contexto de nuestros visitantes, de nuestros usuarios. Por ejemplo, el comportamiento de los clientes, el usuario, serían las páginas que han visitado en el pasado o las cosas que han comprado en el pasado. Entonces eso es algo que podemos evaluar para ofrecer en el futuro experiencias personales para ellos, experiencias personalizadas para ellos, pero también el contexto, como mencionamos antes, un contexto sería, por ejemplo, la ciudad donde están navegando por nuestro sitio o donde viven, o no sé, el clima que podemos evaluar, el clima de la ciudad desde donde la persona está navegando por nuestro sitio web.

Los otros dos tipos de personalización serían la interrumpida y la fluida. Entonces, la personalización interrumpida, hablamos de eso cuando mostramos algo a la persona que está navegando por nuestro sitio web y que no esperan ver. Eso sería, por ejemplo, un pop-up, un modal con información o con una sugerencia. Y el otro tipo de personalización, fluida, sería cuando el contenido personalizado que ofrecemos a los usuarios es una parte integral de la experiencia. Quiero decir, cuando mostramos esta experiencia personal o mostramos el contenido personalizado en medio de la página web que están visitando. Entonces ven este contenido personalizado como parte de la experiencia general, ¿verdad? Quiero decir, la página web completa.

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

Enrutamiento en React 18 y más allá
React Summit 2022React Summit 2022
20 min
Enrutamiento en React 18 y más allá
Top Content
Routing in React 18 brings a native app-like user experience and allows applications to transition between different environments. React Router and Next.js have different approaches to routing, with React Router using component-based routing and Next.js using file system-based routing. React server components provide the primitives to address the disadvantages of multipage applications while maintaining the same user experience. Improving navigation and routing in React involves including loading UI, pre-rendering parts of the screen, and using server components for more performant experiences. Next.js and Remix are moving towards a converging solution by combining component-based routing with file system routing.
Un Marco para Gestionar la Deuda Técnica
TechLead Conference 2023TechLead Conference 2023
35 min
Un Marco para Gestionar la Deuda Técnica
Top Content
Today's Talk discusses the importance of managing technical debt through refactoring practices, prioritization, and planning. Successful refactoring requires establishing guidelines, maintaining an inventory, and implementing a process. Celebrating success and ensuring resilience are key to building a strong refactoring culture. Visibility, support, and transparent communication are crucial for addressing technical debt effectively. The team's responsibilities, operating style, and availability should be transparent to product managers.
Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Debugging JavaScript is a crucial skill that is often overlooked in the industry. It is important to understand the problem, reproduce the issue, and identify the root cause. Having a variety of debugging tools and techniques, such as console methods and graphical debuggers, is beneficial. Replay is a time-traveling debugger for JavaScript that allows users to record and inspect bugs. It works with Redux, plain React, and even minified code with the help of source maps.
Construyendo un Asistente AI Activado por Voz con Javascript
JSNation 2023JSNation 2023
21 min
Construyendo un Asistente AI Activado por Voz con Javascript
Top Content
This Talk discusses building a voice-activated AI assistant using web APIs and JavaScript. It covers using the Web Speech API for speech recognition and the speech synthesis API for text to speech. The speaker demonstrates how to communicate with the Open AI API and handle the response. The Talk also explores enabling speech recognition and addressing the user. The speaker concludes by mentioning the possibility of creating a product out of the project and using Tauri for native desktop-like experiences.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
This Talk discusses various strategies to improve React performance, including lazy loading iframes, analyzing and optimizing bundles, fixing barrel exports and tree shaking, removing dead code, and caching expensive computations. The speaker shares their experience in identifying and addressing performance issues in a real-world application. They also highlight the importance of regularly auditing webpack and bundle analyzers, using tools like Knip to find unused code, and contributing improvements to open source libraries.
Una Guía Práctica para Migrar a Componentes de Servidor
React Advanced Conference 2023React Advanced Conference 2023
28 min
Una Guía Práctica para Migrar a Componentes de Servidor
Top Content
React query version five is live and we'll be discussing the migration process to server components using Next.js and React Query. The process involves planning, preparing, and setting up server components, migrating pages, adding layouts, and moving components to the server. We'll also explore the benefits of server components such as reducing JavaScript shipping, enabling powerful caching, and leveraging the features of the app router. Additionally, we'll cover topics like handling authentication, rendering in server components, and the impact on server load and costs.

Workshops on related topic

Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Node Congress 2024Node Congress 2024
152 min
Construye Aplicaciones Modernas Utilizando GraphQL y Javascript
Featured Workshop
Emanuel Scirlet
Miguel Henriques
2 authors
Ven y aprende cómo puedes potenciar tus aplicaciones modernas y seguras utilizando GraphQL y Javascript. En este masterclass construiremos una API de GraphQL y demostraremos los beneficios del lenguaje de consulta para APIs y los casos de uso para los que es adecuado. Se requiere conocimiento básico de Javascript.
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
React Summit 2022React Summit 2022
173 min
Construye una aplicación WordPress sin cabeza con Next.js y WPGraphQL
Top Content
WorkshopFree
Kellen Mace
Kellen Mace
En esta masterclass, aprenderás cómo construir una aplicación Next.js que utiliza Apollo Client para obtener datos de un backend de WordPress sin cabeza y usarlo para renderizar las páginas de tu aplicación. Aprenderás cuándo debes considerar una arquitectura de WordPress sin cabeza, cómo convertir un backend de WordPress en un servidor GraphQL, cómo componer consultas usando el IDE GraphiQL, cómo colocar fragmentos GraphQL con tus componentes, y más.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Construyendo una Aplicación de Shopify con React & Node
React Summit Remote Edition 2021React Summit Remote Edition 2021
87 min
Construyendo una Aplicación de Shopify con React & Node
Top Content
WorkshopFree
Jennifer Gray
Hanna Chen
2 authors
Los comerciantes de Shopify tienen un conjunto diverso de necesidades, y los desarrolladores tienen una oportunidad única para satisfacer esas necesidades construyendo aplicaciones. Construir una aplicación puede ser un trabajo duro, pero Shopify ha creado un conjunto de herramientas y recursos para ayudarte a construir una experiencia de aplicación sin problemas lo más rápido posible. Obtén experiencia práctica construyendo una aplicación integrada de Shopify utilizando el CLI de la aplicación Shopify, Polaris y Shopify App Bridge.Te mostraremos cómo crear una aplicación que acceda a la información de una tienda de desarrollo y pueda ejecutarse en tu entorno local.
Fetch, useEffect, React Query, SWR, ¿qué más?
React Advanced Conference 2023React Advanced Conference 2023
102 min
Fetch, useEffect, React Query, SWR, ¿qué más?
Top Content
WorkshopFree
Ondrej Polesny
Ondrej Polesny
En esta masterclass, primero, repasaremos las diferentes formas en que puedes consumir APIs en React. Luego, probaremos cada una obteniendo contenido de un CMS sin cabeza (tanto con REST como con GraphQL) y verificando en detalle cómo funcionan.
Aunque no se requiere un conocimiento avanzado de React, esta será una sesión práctica, por lo que necesitarás clonar un repositorio de GitHub preconfigurado y utilizar tu editor de programación React preferido, como VS Code.
Aprenderás:- Qué diversas opciones de obtención de datos hay en React- Cuáles son las ventajas y desventajas de cada una- Cuáles son los casos de uso típicos y cuándo cada estrategia es más beneficiosa que otras
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
React Summit 2023React Summit 2023
139 min
Crea un sitio web editable visualmente con Next.js utilizando React Bricks, con blog y comercio electrónico
Top Content
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crea una cuenta gratuita- Crea un nuevo proyecto con Next.js y Tailwind- Explora la estructura del directorio- Anatomía de un Brick- Crea un nuevo Brick (Texto-Imagen)- Añade un título y descripción con edición visual RichText- Añade una imagen con edición visual- Añade controles de barra lateral para editar props (relleno y lado de la imagen)- Anidación de Bricks utilizando el componente Repeater- Crea un brick de galería de imágenes- Publica en Netlify o Vercel- Tipos de página y campos personalizados- Acceso a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias y incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de aterrizaje creadas visualmente en React Bricks- Características empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados