--- title: "Contentstack Personalization for developers" description: "Learn how to implement Contentstack Personalize in the most minimal way possible. This video dives into the base setup, creating experiences, setting up attributes and writing the code that makes it all work in Next.js." date: "2025-01-30T15:29:59.000Z" url: "https://timbenniks.dev/videos/contentstack/025-5o4yhtm5qba" youtube_url: "https://www.youtube.com/watch?v=5o4yHTm5QbA" playlist: "contentstack" duration: "18:08" image: "https://img.youtube.com/vi/5o4yHTm5QbA/maxresdefault.jpg" tags: ["cms", "api-design", "personalization", "cloud-infra", "frontend"] --- # Contentstack Personalization for developers Learn how to implement Contentstack Personalize in the most minimal way possible. This video dives into the base setup, creating experiences, setting up attributes and writing the code that makes it all work in Next.js. Watch on YouTube: https://www.youtube.com/watch?v=5o4yHTm5QbA ## Transcript this is Tim from content stack and in this video I will show you the simplest way to connect content stack to your next4 app and use personalization and so for extra sugar I've also added in live preview so you have the whole [Music] thing I kind of assume that you understand the glossery of personalization at content stack and so if you look at my screen here I'm here at the Academy course for personalization so it's like you know what our experiences what our attributes what our audiences those kind of things and so generally content Stacks personalization is Rule based therefore you put something into the front end to the API and it gets you back the variant of personalization that you want like the variant of content um you don't really have to do the course right now you can still watch this video and be like oh that's cool but then I would urge you to actually do go there and learn so if we look at my stacks here right as you can see the left side here now there's a personalization icon and so I've created a personalization project that is then connected to my personal like my project stack here that does some personalization and so let's just go over the setup that I have and then based on that I'll show you the website and then we dive into the code all right so um personalization in content stack has experiences so you can do different ones like if I do a new one you can do like a segmented like you are this type of person or you click this button so you'll see this content or a test where we can serve you different things and then when people click on stuff we send events to you know personalization it's either events or conversions if people actually like fill out a form or whatever and then you can choose which version wins and that's what you'll show so I will not do an a test right now we'll keep it more simple so we're starting with normal segmented personalization so my experience here is are you a marketer or a developer when you come onto my website and so oh you can see there's already some analytics because I've been you know trying this stuff out and so as you can see the configuration I have three different variants here in my experience and so you're either a marketer or developer or both we have some unicorns here and so you can see that this the ID zero for marketer is actually a marketer audience so what are audiences well let's go here these are my audiences right so you're a marketing developer or a marketer or a developer so let's go to marketer here and so for example here I've set marketer and you are one you fit in this audience if there's an attribute that you love personalization set to True we'll talk about attributes in a second for developers is probably doesn't read documentation but only looks at like code samples is true or and this is the interesting one if a query par parameter for Persona as unicorn is said then you fall into the marketing developer and actually there's a bunch of different ones that we give you out of the box and so those are attributes based you know you you have these attributes and because of those you fit somewhere in an audience so your operating system could be windows or your country could be France or you can have a few custom ones so let's go and talk about these custom attributes right so I just created a marketer key loves personalization and kind of that's it right so you kind of say this is now an attribute that I can use elsewhere and so this lost personalization is actually used here if love personalization is true then you match the marketer audience all right this is my base I also have set up a few like when you click on a button there's an event being sent this you can later on use for ab test but we don't go in that too deep right now so let's go to my stack so in my stack here um if you go to the settings there's now a variance Tab and feel free to ignore the EAB test here because I've been fiddling around and you see it's unlinked so this is not even linked to the personalized project because the interesting thing here is you don't have to have personalized to do variants different variants of content in content stack you can have your own personalization engine and Link that to showing different variants that's a bit too far for this video but let let's have a look at my marketing developer that's actually connect Ed to personalize right and so you have these different variants in here so you're both you marketing developer you're marketer or a developer and it's linked to my page type so I have a content type for Pages very simple so when we now go to this page here you can see there is now a new drop down here for entries and then you have different variants you can select right this is my marketer or developer experience that we have selected in personalize and then you say well let's have a look at the marketer version right and now you can see the title is different so it has actually is like a variant field and so you always get the base and then you over over overwrite something specifically for that field and you actually have some personalization going on here in live preview and you can see um for example if I now go to my developer you see there's some different overwrites here I look at this one and there it goes so it loads the base one it looks at where my entry is and then it just adds that in the live preview you see hey this is my developer page and so here you can just edit your different variants hit publish like you can see if I do the base one and I hit publish you can actually select which variant you want to publish as well all right so now with that out of the way let's have a look at the website so let me just hard refresh it for you and zoom it in a little bit all right so I added a bunch of debug information here for you for you know the developers amongst us you can see this is my base variant and I also have like these little edit buttons because um live preview and editing everything is turned on so let's first do this query parameter because that's the easiest one right so when I do per oh Persona equals unicorn so you see it directly personalized which means what we do is based on query string we send um this in a header to the system and so content stack returns to you you know this variant of this entry and that happen server side and that's why this is so fast and so basically this is personalize this is just the the prefix zero is experience zero which is I'll show you quickly I know there's a bunch of talking here because I have to take you through this Stu so um oh yeah we have to be here so you see experience short ID zero and then here it says two so when we go in here you'll see two which is both which is marketing developer which is the Unicorn so this is basically what it's sending to our API and returning in so you can see how we sent that actually and we look at the network and we go with our entry Fetch and we we go to the headers and scroll all the way down you'll see here this is what it's sending for what it wants to get back as a variant and so that's when you see this so now when I set like now we did it with the query parameter right but you can also set an attribute in code so when I hit marketer here it's setting the marketer personalization and you see now that it goes to experience zero um and then variant zero which is zero for marketer and that is of course a similar thing and so when I set it for developer you see now it says id4 which is four the fact that this has now a four as an ID is just because I've been adding a few in different like different ones here like you can actually make a draft again edit this and add variants and then the IDS will just keep going up and so now it's showing you that one and I can also reset all of them and then be back here and so um a bunch of different things are flying about because I just showed you that we actually have some analytics um the thing is it only sends one analytics call per day per person so it's a real count so these are not like um I went to this experience 66 times no it's just oh I just click developer first so that's what you're seeing now if you now go to this site and then go as a marketer I'll see different stuff here all right so let's go and have a look at some of this code shall we CU it's you know what it's not that crazy so this is just just a normal next 14 outof the box project um and let's go um so to get started with personalization we need a middleware and so what this thing is doing a middleware runs every time you you know load the page and so what we do every time you load the page and and so when it's not any of these things it will actually grab your project uid for your personalization project and it gets the a URL for your region so in my case it's Europe right so I have EU personalized Edge content stack and so you basically set your URL and it initializes personalize and you see it grabs the request because a middleware sits in between you you go for a request then it goes to the middleware and then you you know go to the response and so we sit in the request and we do a few things so from that request it grabs what it needs it finds the specific variant parameters which is this one right right now it's experience zero but no personalization when I click this it's experience zero with the first personalization variant that's what this thing gets and then what it does in this case it's parsing that URL and sets a query parameter for that variant param so essentially it just adds some sort of personalization variable here with this attached and that will actually then be used to query content stack and we do it this way because then these URL gets cached so it's super super fast on the CDN and after that we actually rewrite it back to not have that short param again so we don't see that in the front end and so this is like a little trick for super fast caching and um to keep state for each page load of what that variant is and then what it does is it adds the personalization stay to the response this is a very simple function that literally just adds two cookies and we can have a look at those if you want we can go to application cookies and so first it's your unique user ID of me as a visitor here and then it has this right it shows okay what is active right now well it's experience zero variant zero and then so the experience is the first one and then the active you know one that's zero so when I go to marketer now oh that's the zero one already let's do developer and then we look at these cookies you see it's number four so it stores this and so every time it sets this so you know browsers and front and sdks and whatever can do stuff with this and show you different things all right so that's the base so then I have my content stack file in my lib here I create my stack you should notice if you have watched this before this kind of things then I'm initializing my live preview that's also not really for this for this video but then here I add a few things so I'm actually creating a context and in a production project this won't just be living here you make a lovely file and you do everything right I just wanted to have like one file to do all the magic for you so you can see it that's what this simple project is about so I'm initializing personalization and I'm creating a react context which means if you grab the personalized context now it's basically um set up once and you you don't you don't have to touch it again and you can just import to create context you get the instance of personalizing you can do a bunch of functions and then when I get my page when I query it if there's this variant parameter I'm doing something to that this variant allias makes it from this to this and that is then sent to my query to the content stack SDK as give me this variant please and that's all the is to it so when we go to our page without looking at all the extra stuff uh you know here's just the get page to get your page and it sets it there's this little extra thing that it needs from the URL next to get my variant param which is this one right and so it just grabs the search parameters and grabs which one that is and now it's saved right and that we can send to the get page and it Returns the right variant if you don't send this it just doesn't send you a variant it's just a base variant and here is my personalized inst in instance with the used context because there's a few extra things we can actually be doing here right use effect which like when the page renders on page ready we do some stuff so this is for um visual editing don't look at that now but we're actually sending an impression because we want to get information in personalization dashboard about what are we looking at right now and so this zero here is again the same as this zero which is basically my um experience right and so the fact that this experience is triggered it now can you know do some analytics which is what we were looking at here before which currently is not much but if this runs for longer it will um and so that's like the basic thing here because because of the query string parameter and so basically this thing that's sent in the headers it can show the right stuff so when it's developer it shows you this one when it's marketer it shows you marketers when it's nothing shows you nothing and this is just the change of header that goes to the API and so there is extra stuff because you see me click these buttons right so what we can do is we can set these attributes and then just reload the page and if it's custom attributes it will always remember that you clicked on those so when I click marketer now and I just go back to the page it is still marketer because it remembered this and that's because it's a custom attribute that we send and so I just made one little button if you look at the page here for the type marketer right so for marketer um I'm getting my personalized context again so I can do some stuff based on personalization so if it's marketer my attribute will be marketer is true developer is false and those attributes live here right so this is my attribute uh marketer is true developer is false that's what we're looking at here and you see also see an event man let's let's look at that in a second and so here we actually say personalize set and the personalization attribute for marketer right so we have if we look at marketer it's sending marketer true developer false in this set and after that we also trigger an event and that event in this case is the I click the marketer button right now I'm not doing anything with these events but if you have an AB test and you're sending these events based on that you can actually look at oh this one is more popular let me just say this one is winning this is not for this video and after that I just literally refresh the page because this is a very simple demo of course you don't do this normally um but that's kind of it so when I now hit marketer it will just refresh as marketer because we set this attribute and I can actually show you probably when I say let's see if I can do preserve the log we refresh clean everything out let's say we go to developer now so you can see a few things that happened before it refreshes the page right so you can see user attributes and so when we look at the payload here it actually says developer true marketer false and then there's also I think there's an event uh I think we should have this one and so I'm also sending this CTA developer event and that's what we saw here trigger event because I clicked on developer right so it's sending that event and so when we have a look here at my events it's sending the CTA developer event so right now we don't have an IA so it doesn't do much but it's that's basically how easy this stuff is right it it it kind of feels like if you implement Google analytics you're sending stuff as well right so when I click a button I'm setting an attribute or I'm triggering an event or stuff like that and so um there you have it you can see this is is clearly a super simple project but with this in mind you can do a bunch of really cool things and it's rule based right now and so it's quite different than I'm personally used to because I've worked at other companies at build personalization before um but because of that it's so simple because it's all server side you send something into it and it shows you back a ver a version of whatever page you have and that makes it simple for developers because I literally just implemented this in a few lines it's not too crazy so anyways thank you so much for watching um if you want to learn more or talk talk to me directly or have some feedback whatever join our Discord link is in the description of this video and um speak to you soon cheers