"Personalization" is right now one of the hottest buzzwords in the development world. Marketers, developers, and content creators evaluate the possibilities and alternatives to handle custom scenarios while offering powerful experiences to the users. Let's talk about personalization, the benefits, the challenges, and how we can manage and offer personalized experiences. We will see code examples using some of the features introduced in Next.js 12, the newest version of the framework, and connecting to Storyblok, a Headless CMS that offers a real-time visual editor.
Video Summary and Transcription
Personalization is the ability to offer exclusive experiences based on existing data. It is important to meet customer expectations and stay competitive. There are four types of personalization: explicit, implicit, interrupted, and seamless. Implementing personalized experiences involves using tools like Next.js and NetJS. Best practices include avoiding annoying users, testing strategies, and monitoring analytics.
Available in Español
1. Introduction to Personalization
Short description:
Hello, everyone. Now let's talk about personalization. Personalization is the ability to offer exclusive experiences to personas based on existing data. Today, we will discuss web personalization and its importance. Customer expectations have changed, and not offering personalized experiences would not meet their expectations. Additionally, if our competitors are offering personalized experiences and we are not, we won't get good results with sales, visitors, and customer engagement.
Hello, everyone. I hope you're enjoying the conference. Now it's time to talk a little bit about personalization.
First of all, I wanted to introduce myself. My name is Facundo Giuliani. I'm from Buenos Aires, Argentina. I'm also an organizer of the React Buenos Aires local meetup. Well, if you want to talk to me, I'm on Twitter. I'm Facundo Zurdo. We can keep in touch there.
Has it happened to you that when you go to a restaurant, for instance, the waiter refers to you by name or the waiter already knows what's your usual order. Or if you go to a certain shop, you see that the people working at the shop are analyzing to say that in some way, the customers, I mean, if you go by yourself to buy something, you're not going to have the same talk with the employee from the shop that a family of members will have because, I don't know, probably they are looking for something quickly, that they want to leave the shop quickly. But yeah, I mean, probably these different experiences that you will have, again, with the waiter or with the employee at the shop and et cetera, when this happens, I mean, when they are offering different experiences depending on the customers, we are talking about personalization. Personalization is the ability to offer exclusive experiences to personas based on existing data. So we are talking about personalization in real life to say that in some way.
What we are going to analyze today and to talk about is web personalization, which is the ability to deliver content granularly and offer exclusive experiences to personas based on existing data. So we mentioned the example of the waiter, the example of the shop when you go to buy some groceries for instance. But how we can analyze that or how we can see that in websites. So probably you experienced some scenarios, some personalized scenarios like getting target offers based on browsing behavior, based on what you are browsing, what you are seeing in your computer or on social networks, Instagram, Facebook, and etc. You are receiving target offers, I mean, personalized offers to you with products that may be interesting for you. That will be a case of web personalization. Another case of web personalization would be going to a certain media platform or you are reading news in the newspaper and you can see specific videos based on where you live. I mean, in the country that you live in, in the city that you live in, you get this personalized content that, again, probably will be more interesting to you than some generic content. So when this happens, we are talking about web personalization.
The question is, why is that important? I mean, why should we care about web personalization? Well, first of all, the customer expectations have changed. In the past, well, I mean, not only in the past, but also in the present, these real-time interactions that I was mentioning before, we are getting used to that. And so we want the same experiences when we are using a website, a web platform. So as the customers are used to these kind of behaviors or these kind of experiences, not offering them personalized experiences would not meet their expectations. So that's something that we should evaluate. Also related to the same case, if we are not offering personalized experiences and our competitors are doing that, well, we won't get good results with the sales, we won't get good results with the visitors, or we won't also get good results with the time that the customers are spending on our website.
2. Types and Benefits of Personalization
Short description:
If the customer or the user is happy, they will spend more time on our website. Offering personalized content to our customers and users will create better impressions. There are four types of personalization: explicit, implicit, interrupted, and seamless. Explicit personalization is based on criteria set by the visitors, while implicit personalization analyzes visitor behavior and context. Interrupted personalization surprises visitors with unexpected content, while seamless personalization integrates personalized content into the overall experience.
That's something that we should also consider. I mean, if the customer or the user is happy, they will spend more time on our website browsing the content, seeing what to do and etc. And of course, if we are talking about the brand or the company that we are working for, offering personalized content to our customers and users will get better impressions from them.
When we talk about personalization, we can differentiate types of personalization. I will mention four of them. The first two are explicit personalization and implicit personalization. The explicit personalization is when we customize the content according to certain criteria that is set by the visitors. This happens, for instance, when we enter to a website, and we ask the visitors to set certain details related to them. We ask them some personal details so we can identify them, and after that, we can offer personalized content based on the information that they share with us. And the implicit personalization would be when we are analyzing the behavior of our visitors or customers or the context of our visitors, of our users. For instance, the behavior of the customers, the user, would be the pages that they have visited in the past or the things that they have purchased in the past. So that's something that we can evaluate to offer in the future personal experiences for them, personalized experiences for them, but also the context, as we mentioned before, a context would be, for instance, the city where they are browsing our site or where they live, or I don't know, the weather that we can evaluate, the weather of the city where the person is browsing our website from.
The other two types of personalization would be the interrupted and the seamless. So interrupted personalization, we talk about that when we show something to the person that is browsing our website that they don't expect to see. That will be, for instance, a pop-up, a modal with information or with a suggestion. And the other type of personalization, seamless would be when the personalized content that we are offering to the users is an integral part of the experience. I mean, when we show this personal experience or we show the customized content in the middle of the of the website or the webpage that they are visiting. So they see this personalized content as part of the overall experience, right? I mean, the complete webpage.
3. Benefits and Challenges of Personalization
Short description:
Offering personalized experiences provides optimized landing pages and call to actions, better qualified leads, enhanced user experience, greater brand affirmative. Challenges include setting the scope, using a suitable database or content management system, managing data silos, and measuring the impact. Strategies involve collecting visitor data, creating visitor profiles, setting goals, and preparing a personalized experience strategy. A demo of a personalized experience is shown on an e-commerce platform.
So what are the benefits of offering personalized experience to our users? Seeing that from a company point of view or an organization point of view, we will get optimized landing pages and call to actions, because the users that will visit our website will be more focused on what they really want or what they really are interested in, and based on that, we will also get better qualified leads.
From the point of view of the visitor, we will enhance the user experience. I will enter to a website that is showing me content that I'm really interested into and that is treating me as the person that I am, right? I mean, I'm getting the content that I want to see, and not a general overview or we are not getting the same content for all the visitors of the website.
Finally, we will also get greater brand affirmative. The brand if they are offering personal experience to each person, I mean, like treating each person as an individual and caring about them, will get a better image and a better affirmative.
What are the challenges that we have to face when trying to create personal experiences? So the first of these challenges will be setting the scope of the personalized experiences that we want to offer. The scope would be defining the personas that we want to evaluate or the different personas that we will have in our website and creating experiences for this type of personas.
Another challenge would be the database or the content management system that we are going to use. These platforms should support the information that we need to store related to our visitors and the platform should offer us a good way of browsing this information or a good way of analyzing the data that we are storing so we can create these personalized experiences for the users.
Once we define the personas and we have the data related to them, we should take care of the data silos, because the way that we are dividing the users will limit us to say that in some way when we want to interact with the data and the way that we are going to define the methods that we will use to create this personalized experiences, so that's something that we should pay attention because if we are setting the wrong personas or the wrong types of users of our website, we it will get complicated to analyze the data and divide these different analytics that we are getting from our users and that will affect the way that we are managing our strategies to offer personalized content.
Finally, we have to measure the impact of the strategies that we are applying this. I mean after we are creating personalized experiences and we are getting certain different strategies related on how to get this personalized experiences, we should measure the impact. I mean the resource that we are getting from this person likes experiences and see if that's good or not or if we should change something or evaluate something that we are doing in a certain way and do that in a different way.
So, some strategies that we can use to create personalized experiences, I mean some steps that we should follow to say that in some way, we should collect the data from our visitors, we should ask the visitors for details, we should map their journeys, we should we could create cookies, we could track the pages that they are visiting, etc. I mean, the idea is to get the most, I mean, the great amount of details from the users so we can make better decisions in the future.
After that, we should create these visitors profile so we can structure the different types of users that we will have and then for these types of users, we can set the goals that we want to achieve related to these types of users from our company's point of view and what we want to offer to this different types of profiles of visitors.
And finally, we will need to prepare a strategy. I mean, after we know the different types of users or visitors that we have and the goals that we want to achieve related to these types of users, we should create a strategy to offer the personalized experience to them and to identify the users prioritize the users and of course get revenue or get good results based on that.
So, let me show you a short demo of a personalized experience. Here we have an e-commerce platform where the users can purchase different types of items. They can purchase sportswear or elegant clothing and we have a general catalog too. This is the homepage of our website where we show these white banners that shows certain discounts or offers for the users.
As you can see, this is a general offering. I mean, we are not offering any particular product category here. So, what we want to do now is if I visit one of the different categories that I have in the website, let's say sportswear, we are identifying our user as a person that is interested in sportswear. So the next time that the users go to our website and visit our homepage, what we are going to do is show, instead of the general offer, we will show this white banner offering discounts and about sportswear. So, I mean, we will take this category as the preferred for the user.
4. Personalized Banners and Next.js
Short description:
We identify users' interests based on the categories they visit and show personalized banners on subsequent visits. We use the Storyblock content management system, which offers a real-time visual editor and component-based organization. The pages are static, generated at build time using Next.js. Next.js also provides server-side rendering and functions that can be deployed in CDNs. Additionally, Next.js offers a middleware for custom logic and tasks before each request.
So, what we want to do now is if I visit one of the different categories that I have on the website, let's say sportswear, we are identifying our user as a person that is interested in sportswear. So the next time that the users go to our website and visit our homepage, what we are going to do is show, instead of the general offer, we will show this white banner offering discounts and about sportswear. So, I mean, we will take this category as the preferred for the user. So if they go now to elegant clothing, when they go to the homepage, they will still see this sportswear offering.
So to do that, this experience, we are using a content management system. We are using Storyblock content management system, headless content management system that offers a real-time visual editor where you can see the content that you are creating on how it is going to look like. And it offers you the possibility of organizing the content that you are consuming and using from your website in the form of components. So you can see that here in the visual editor, I'm selecting this component, this personalized content, and we have different variants. We have the general one with the call to action for the general offer that we saw before. But after that, we have other two variants related to the categories of products that we are offering. We have the sportswear, as we mentioned before, and the elegant. And as you can see, we are managing all the content related to the page inside Storyblog.
But the thing is that from the code of our application, we should grab one banner or the other, or we should show one banner or the other, and one thing that we should consider in the way that this project was created. These pages that we are visiting are static web pages. We generated them at build time using a static site generator. So what we are going to do is to generate all the static assets for all the pages of our website. The homepage, the different catalogs, and etc. And we should also create the static version of these personalized pages, showing the banner with the offering for the different types of users. For this demo, I used Next.js. As I mentioned before, Next.js is a framework that offers us the possibility of generating static content at build time. So that is what I did. Besides that, Next.js also offers server-side rendering in the case that we want to generate dynamic content from the server. But I also used Next.js because in the last version of Next.js we also have a couple of features that are interesting. One of them are the functions. These are scripts and functions that are executed server-side rendering code, but with the possibility of deploying them in the CDNs that Vercels offers. So, we don't have to worry about having server-side rendering on a specific server. We can deploy these functions in CDNs and have them closer to our users. And also we will have a middleware with Next.js. Next.js offers us the possibility of creating this Intermediate tier that executes custom logic and tasks before every request. So, what we are going to do with the middleware, I will go back to the demo, and I want to show you this is the page and this is the code of my application.
5. Implementing Personalized Experiences with NetJS
Short description:
We have all the code to generate the markup related to our pages and at build time generate the static assets. We will generate personalized versions of the pages, including a different banner for different types of users. The most important part is the middleware, which analyzes a cookie to show personalized versions of the homepage based on user type. Best practices include not annoying users with recommendations, testing strategies before deployment, monitoring analytics, and regularly revisiting strategies. Visit the provided links to learn more about personalization, NetJS, and Edge functions.
We have all the code to generate the markup related to our pages and at build time generate the static assets. Besides that, we have a function that will bring the information from the Content Management System related to each one of the pages and the content that we will use to generate the markup for the pages. And we will also generate the personalized versions of the pages.
So we will have the general home and we will also have each version of the homepage with a different banner for the different types of users. We do that bringing the personalized stories. We are bringing these pages from the Content Management System and we are looking for the ones that have personalized content. But the most important part that I want to show you here is the middleware. We can create a file called middleware in the pages folder in any NetJS project, and this middleware will analyze a cookie which is user type and based on that user type if we have that cookie from the user that is visiting our webpage we will show the personalized version of the homepage based on that user type. If we don't have the cookie for that user, we will create it based on the catalog page that the user is visiting if it is Sportswear or Elegant.
Again, this is a very simple example and a very simple website but I wanted to show you how we can implement personalized experiences and how we can get advantage of edge functions and middlewares for the experiences that we want to offer to our users.
Some final words, best practices that we should evaluate when creating personalized experiences. We shouldn't annoy the users with recommendations. That's something that we should have to consider, we have to offer personalized content but not annoying them with offers and etc. because the users will get angry because of that and they won't visit our website anymore. Besides that, we should test the strategies that we are creating and that we are implementing in our products before deploying that. I mean getting a good test period will give us a good picture of how our product will behave when we deploy it. We should monitor the analytics as we mentioned before. We should analyze how the users are behaving based on the strategies that we implemented to offer personalized experiences and besides that we should revisit the strategies regularly to see if they are working or not or if we are getting the results that we want to get or not.
Finally if you want to read about personalization and NetJS in deep you can visit the first link which is a tutorial that we have in the Storyblock Home official website. This is a tutorial on how to create a website with personalized experiences using NetJS and Edge functions. You can visit the second link to visit the NetJS technology hub that we have in Storyblock with other tutorials, code samples, videos and etc. to learn more about how to connect Storyblock and NetJS. Finally the last link you can visit that to learn more about Edge functions and this new feature that Vercel is offering in NetJS. Thank you very much, enjoy the conference and see you soon.
