--- title: "Jamstack personalization with Contentstack and Uniform" description: "#Contenstack and #Uniform personalisation for #Jamstack websites. This website runs on Gatsby and we'll be showing you how easy it is to personalize website with Uniform!" date: "2023-07-20T08:02:42.000Z" url: "https://timbenniks.dev/videos/uniform/054-d41ch2lnxtq" youtube_url: "https://www.youtube.com/watch?v=D41Ch2LNxTQ" playlist: "uniform" image: "https://i.ytimg.com/vi/D41Ch2LNxTQ/maxresdefault.jpg" tags: ["composable-architecture", "cms", "api-design", "personalization", "performance"] --- # Jamstack personalization with Contentstack and Uniform #Contenstack and #Uniform personalisation for #Jamstack websites. This website runs on Gatsby and we'll be showing you how easy it is to personalize website with Uniform! Watch on YouTube: https://www.youtube.com/watch?v=D41Ch2LNxTQ ## Transcript hi this is tim from uniform in this video i'll be showing you how we connect uniform optimize to content stack the headless cms so we will be doing this through our starter kit website so this website is currently running locally on my machine so i can show you some stuff once this is built and put to netlify or for sale or wherever it's actually a gemstack website and so this is a fictional conference talk website or a conference called uniform conf and in here we kind of build stuff for you to see how personalization can work so we have talk tracks for developers we have talk tracks for marketers and stuff like that and based on what the user's behavior is on the website the content will change right so this header here will change based on your behavior and the talks for you will also change on your behavior so currently we didn't do any sort of thing on the site so this is all default stuff but let's say i enjoy developer talks so i'll go there so there is a component here and normally on a real website there's a whole bunch of other stuff about the developer talk track so now when i go home again i actually say hey there's a developer hero now because we tracked with uniform that you liked that developer page and so you had the intent to be a developer and there was a signal based on your click that we now track and know hey this person likes developer stuff you can also see that this component changed and it became personalized talks for you right so it's mainly developer related and a bit of marketing right but now let's say let's go to marketing so here we have marketer content so when i now go back home we have a score of 50 50 equal right and we just show the first one because that was your first interest but let's say i go to marketers again click on the home page suddenly marketers had more points than developers so we're showing you marketer hero and also this these talks that are personalized for you are now actually also more marketer driven so in the next bit i'll go over to the uniform application where we create those intents and those signals and things like that and i'll go go into that a little bit and after that i'll show you how the content is taken from content stack based on the intents that we see or that the things that people do like for developers we need to take the variation of the component for developers so let's roll this is the uniform app and as you can see this is where we actually register our intention signals and the ones we just spoke about we're actually developer and marketer right so i create a person that has an intent of being interested in being a developer and then when they go to a page a signal is sent so the signal that we have is actually type behavior so you go somewhere and we track that and you can give a specific strength for the calculation to it and this one is actually very simple so we won't go in too deep for now and we have the same for marketers however there's also different ones that we didn't go in but i'll quickly show you we have a call for papers campaign that is sent out as an email and then when you click on actually write down the call for papers you can actually get a query selector and based on the query selector we can also personalize something for you and then yet another one is the conference registration once you have registered we have actually created a cookie for the fact that you have registered so when you then come back to the conference page we know you have registered and we will show you the right content so nothing is more annoying that when you have a ticket for something and the way the web page doesn't know that you already have a ticket right so that's what this will do so now let's have a look how this connects in content stack so this is our stack in content stack as you can see we have a bunch of content types and you can already see some personalization stuff but let's first start with how we track the behavior of a user right so let's go to the pages and then to the developers page because here is what when we track what a user is and what their intent is right and so we added a component here okay so let's look at that component and what you see now it's loading for a bit there's actually a uniform bit here because we have an extension that you can find here extensions we added a custom field and that custom field has a bunch of tags for us that signify the intent that we had in our uniform app from previous right so the intent tag for this component when this is loaded is in fact developer so with this we will know as uniform that this component is interest is there for interested people in development right and we actually have the same if we go to the marketers page there's also a component and this component actually has the marketer intended tag okay so that base um that's how we track and so now let's see how it works when we actually go to that um that paid the home page where we personalize that hero right so when you go to the homepage we again have our homepage hero and you see there's the content type personalized hero so when we open this guy you actually see that this one component the homepage hero which is this big guy here actually has a bunch of references to other components that are called hero right so personalized hero is kind of a wrapper around all the heroes that can possibly be shown so welcome to uniform conf is if if i didn't have any intents it's this one when i click on developers and go home again you actually see developer hero right so now it's actually showing developer hero and so when we open one of those components you can see that these heroes also have the intent tech developer or marketer or whatever so this basically means that uniform in the code can connect okay we have an intent that is developer because if somebody visited that page we tracked it and then on the home page we load all the components because on the home page we have actually loaded here we go the hero for the home page but we load all of them we have all the variations and based on the intent tags that we've seen that match up we actually show you that component and this is how simple it is it's a little bit of content modeling and you're basically just connecting um variations of a component as a sub component and in the code the magic happens but this is not a video for code we'll do that another time but this is kind of how it all connects up and so the cool thing is when you make a jam stack website um on build it's dynamic right so we query all those variations that you see here they're all in your javascript bundle and it's not big there are like four fields there that's almost nothing but then when we do some tracking on the page behavior we have all the information there because in the code we also have all the information about what type of intents exist we have this because on build we query our own uniform api to get all the intents in json and then we can just mix and match because all the information is there so this is how you do personalization on a jamsec website so gemstack just became dynamic anyways this was everything for now thank you for watching and i'll see you next time