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.

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
Concurrent React y Server Components están cambiando la forma en que pensamos sobre el enrutamiento, la renderización y la obtención de datos en las aplicaciones web. Next.js recientemente compartió parte de su visión para ayudar a los desarrolladores a adoptar estas nuevas características de React y aprovechar los beneficios que desbloquean.En esta charla, exploraremos el pasado, presente y futuro del enrutamiento en las aplicaciones de front-end y discutiremos cómo las nuevas características en React y Next.js pueden ayudarnos a arquitectar aplicaciones más eficientes y con más funciones.
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
Seamos realistas: la deuda técnica es inevitable y reescribir tu código cada 6 meses no es una opción. La refactorización es un tema complejo que no tiene una solución única para todos. Las aplicaciones de frontend son particularmente sensibles debido a los frecuentes cambios de requisitos y flujos de usuario. Nuevas abstracciones, patrones actualizados y limpieza de esas viejas funciones - todo suena genial en papel, pero a menudo falla en la práctica: los todos se acumulan, los tickets terminan pudriéndose en el backlog y el código legado aparece en cada rincón de tu base de código. Por lo tanto, un proceso de refactorización continua es la única arma que tienes contra la deuda técnica.En los últimos tres años, he estado explorando diferentes estrategias y procesos para refactorizar el código. En esta charla describiré los componentes clave de un marco para abordar la refactorización y compartiré algunos de los aprendizajes acumulados en el camino. Espero que esto te ayude en tu búsqueda de mejorar la calidad del código de tus bases de código.

Depuración de JS
React Summit 2023React Summit 2023
24 min
Depuración de JS
Top Content
Como desarrolladores, pasamos gran parte de nuestro tiempo depurando aplicaciones, a menudo código que ni siquiera escribimos. Lamentablemente, a pocos desarrolladores se les ha enseñado cómo abordar la depuración, es algo que la mayoría de nosotros aprendemos a través de la experiencia dolorosa. La buena noticia es que _puedes_ aprender a depurar de manera efectiva, y hay varias técnicas y herramientas clave que puedes usar para depurar aplicaciones de JS y React.
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
En esta charla, construiremos nuestro propio Jarvis utilizando Web APIs y langchain. Habrá codificación en vivo.
Solucionando Problemas de Rendimiento en React
React Advanced Conference 2023React Advanced Conference 2023
22 min
Solucionando Problemas de Rendimiento en React
Top Content
Next.js y otros marcos de trabajo que envuelven a React proporcionan un gran poder en la construcción de aplicaciones más grandes. Pero con gran poder viene una gran responsabilidad de rendimiento - y si no prestas atención, es fácil añadir varios segundos de penalización de carga en todas tus páginas. ¡Vaya! Vamos a recorrer un estudio de caso de cómo unas pocas horas de depuración de rendimiento mejoraron tanto los tiempos de carga como los de análisis para la aplicación Centered en varios cientos por ciento cada uno. Aprenderemos no solo por qué ocurren esos problemas de rendimiento, sino cómo diagnosticarlos y solucionarlos. ¡Viva el rendimiento! ⚡️
De Monolito a Micro-Frontends
React Advanced Conference 2022React Advanced Conference 2022
22 min
De Monolito a Micro-Frontends
Top Content
Muchas empresas en todo el mundo están considerando adoptar Micro-Frontends para mejorar la agilidad empresarial y la escala, sin embargo, hay muchas incógnitas cuando se trata de cómo se ve en la práctica el camino de migración. En esta charla, discutiré los pasos necesarios para migrar con éxito una aplicación React monolítica a una arquitectura de frontend más modular y desacoplada.

Workshops on related topic

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
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
React Summit 2023React Summit 2023
139 min
Crear un Sitio Web Editable Visualmente con Next.js Utilizando React Bricks, con Blog y Comercio Electrónico
WorkshopFree
Matteo Frana
Matteo Frana
- React Bricks: por qué lo construimos, qué es y cómo funciona- Crear una cuenta gratuita- Crear un nuevo proyecto con Next.js y Tailwind- Explorar la estructura de directorios- Anatomía de un Brick- Crear un nuevo Brick (Texto-Imagen)- Agregar un título y descripción con edición visual RichText- Agregar una imagen con edición visual- Agregar controles de barra lateral para editar props (padding y lado de la imagen)- Anidar Bricks usando el componente Repeater- Crear un brick de galería de imágenes- Publicar en Netlify o Vercel- Tipos de página y campos personalizados- Acceder a los valores meta de la página- Internacionalización- Cómo reutilizar contenido en varias páginas: Historias e Incrustaciones- Cómo crear un comercio electrónico con datos de productos de una base de datos externa y páginas de destino creadas visualmente en React Bricks- Funciones empresariales avanzadas: permisos flexibles, estructura bloqueada, componentes visuales personalizados
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
React Summit 2023React Summit 2023
71 min
Construyendo Sitios Web Ultrarrápidos con Next.js y Sanity.io
WorkshopFree
Nancy Du
Nataliya Ioffe
2 authors
Únete a nosotros en un masterclass práctico donde te mostraremos cómo mejorar tus habilidades de React para construir un sitio web sin cabeza de alto rendimiento utilizando Next.js, Sanity y la arquitectura JAMstack. No se requiere conocimiento previo de Next.js o Sanity, lo que hace que este masterclass sea ideal para cualquier persona familiarizada con React que quiera aprender más sobre la construcción de sitios web dinámicos y receptivos.
En este masterclass, exploraremos cómo Next.js, un framework basado en React, se puede utilizar para construir un sitio web estático con renderizado del lado del servidor y enrutamiento dinámico. Aprenderás cómo utilizar Sanity como un CMS sin cabeza para gestionar el contenido de tu sitio web, crear plantillas de página personalizadas con Next.js, utilizar APIs para integrarte con el CMS y desplegar tu sitio web en producción con Vercel.
Al final de este masterclass, tendrás una comprensión sólida de cómo Next.js y Sanity.io pueden utilizarse juntos para crear un sitio web de alto rendimiento, escalable y flexible.