---
title: "Product Meetup #2: Interesting usecases with Adam Lamarre"
description: "In this instalment we look into more complex use cases for personalisation. Search results and indexation can generate amazing results when personalised properly. Adam Lamarre shows how to integrate Uniform with Algolia for great results on Jamstack websites!"
date: "2021-04-01T22:03:41.000Z"
url: "https://timbenniks.dev/videos/live-uniform/002-tngn1e4hefi"
youtube_url: "https://www.youtube.com/watch?v=Tngn1E4HEFI"
playlist: "live-uniform"
duration: "59:08"
image: "https://img.youtube.com/vi/Tngn1E4HEFI/hqdefault.jpg"
tags: ["composable-architecture", "cms", "api-design", "personalization", "devrel"]
---

# Product Meetup #2: Interesting usecases with Adam Lamarre

In this instalment we look into more complex use cases for personalisation. Search results and indexation can generate amazing results when personalised properly. Adam Lamarre shows how to integrate Uniform with Algolia for great results on Jamstack websites!

Watch on YouTube: https://www.youtube.com/watch?v=Tngn1E4HEFI

## Transcript

all righty then we are live awesome what's up what's up adam how are you good how are you great so thanks everyone thanks everyone for joining us oh i'm just hearing myself back in the youtube video sorry i just muted myself hiccups hiccups that's how it goes so welcome everyone and today we are going to talk about some fancy stuff about more complex use cases of personalization and for that we have adam here who knows a whole bunch of that stuff so adam you want to introduce yourself a sec yeah my name is adam lamar platform architect at uniform on the optimized team and mostly focused on building up the tracker and other sdk aspects of uniform optimize so yeah there you go thank you for joining and so um before we continue and dive deep into all the relatively complicated stuff but also really cool to demo stuff let's talk a little bit about personalization um to make sure that we all have that the basics in place and then from there we go into the use cases and then it's adam's party basically so how we work at uniform is kind of api first with personalization and so i'm still pretty new at the company so adam when i say something that doesn't quite fit please break in and tell me well there you go um so generally how we feel like personalization works is that users actually have a specific intent of doing something on your website right so um content speaks that's what people love so if you have the right content for the right person based on the intent that they have with your website it's all party everybody's happy so in this case i have a little example here right now it's called your site.com but let's imagine this is a conference website right and then in this conference website we have the separate talk track so we have talk tracks for marketers we have talk tracks for developers there's also a call for papers campaign so people can write in to submit a talk and in that we have three different intents right you might be interested in marketing talks you might be interested in developer talks or you might be a speaker and so we call those things intents and then when we know the intent we can start by um figuring out what kind of signals we can give for the the system to be able to personalize for you and so if you can see here in the middle the person who has the intent to submit a talk actually has a signal that they read the call for papers right they might have even received an email and clicked on a link so these different signals actually um give us the opportunity to rank the user to to make something personalizable for them and so those different signals can also have um different strengths right so when you come from let's say the email campaign and because you we know you're a speaker so you have received an email do you want to fill out the call for papers sure you click on that link and that signal is actually super strong you can see that here on the left that's 100 strength we can also maybe we just went to the call for papers page so we can also track the fact that you have the intent and that you're interested in doing something with the call for papers but it's not the email but it's the page and then it's 50 strength and so having these kind of things um figured out we can start personalizing content for you based on your intent and your interests and all the signals and all the things together and so i guess this was might have been my fastest way of trying to explain how personalization works with uniform adam do you maybe have something to add to round it out no i mean i think that summed it up pretty nicely and then you know the reason why i was so short in introduce it is because that's our that's one of our goals you know one of our goals is to get up and running with personalization as fast as possible so exactly really simple right keep it simple allow you to control what signals you know get triggered and when they get triggered i mean allow you to build those out without complex rules or or anything like that so that's simple so yeah so oh i'll just put this back as you can see we have a couple of cases we want to go over today and so i kept this one short so adam has a little bit more time to actually go a bit deeper and talk about those cases and to also see how they are coded so um let's start with case number one which is our job board in which we also use algolia with uniform to personalize and in the chat please feel free if there's any sort of questions or you have remarks bills please feel free to share and we can discuss those um comments as well so adam that the space is yours you might want to share your screen or maybe start with the story i can do that we go awesome looks good there it is awesome so we have this beautiful job board um kind of personalized site um and we want to put this together as a way to show you know how to make uh like a behavior driven site and actually allow personalization to happen and in kind of subtle ways um so this site has job job postings the content is completely random um on it um some of these titles are actually pretty amusing um i kind of wish i would have one of these one of these jobs uh job titles they're pretty funny yeah so let's have a look so there's healthcare and what else yes we got healthcare jobs we have nursing jobs management and the basic flow here is you know someone would come to this page land on the home page and they basically indicate that they're interested so um you know me if maybe i'm looking for a nursing position i'll click i'm interested this takes me to the detail page and you know this is maybe not exactly what i want maybe i want something a little a little different um and when i navigate back to the homepage you know things things have started changing um you can see you can see the hero we now have a call out saying start your next adventure in nursing today whereas before this hero basically just stated you know you know find your next adventure today so we can we can start you know little little tweaks there to sort of personalize it for our users behavior and so adam is is this partner also remembered so when i come back to this page let's say tomorrow will i also see nursing here yeah um so it's it you have control over how long that data sticks around for um so we have sort of two layers we have a visitor layer and a visit layer visits expire at a certain after a certain period of time whereas visit visitor will stick around for as long as that data is available and what the storage that you choose you have that control and you can configure where that data is stored on the on the actual um you know signals themselves so so we have we actually got two things out of this uh you know beyond the hero if you actually pull out the sidebar as well i didn't show this before but we have categories and locations here as well so those are the two uh sort of entities on the site so you have locations all the different locations and this list actually gets personalized as well so the job we actually clicked on was in this west west kenneth town um town and before this would have just been somewhere along the way but we know the user is interested in a job in west kennethtown so we can start personalizing the list based on this and give them this higher in the listing basically and so is this list coming from some database or is this maybe already algolia data or how does that work um so the site's actually uh kind of unique um all this data was sort of generated um just using uh like a a library to generate fake data and basically just this whole site uh was generated off of a json file so there's actually no there's no like we you know uniform does a lot of a lot of cms work and but the tracker is kind of agnostic of where your data comes from and you know to have a json file sort of backing this site up is is pretty interesting and it shows how like flexible it could be if depending on where your data comes from so it doesn't yeah so yeah we got the we have the locations personalized and we have the categories personalized as well and we also started pulling out the categories here as well so we went to a nursing job the nursing position is now uh you know highlighted here so if you wanted to re-navigate back to just the nursing listing um you'd be able to do that here as well pretty easily and also our data has changed as well um so we have this personalized job postings for you and before this was just sort of a recent postings you know a general like a listing of the most recent postings on the site uh but we've now we've started to sort of adjust it a little bit and show and and do our best effort to show jobs that may apply to the user so we have we lucked out here we actually have all nursing nursing positions here in west kenneth town again totally random assignment these job titles have no relation that they're saying but exactly because you know what i used to be a nurse and i we didn't have a legacy infrastructure agent no i do like that title though yeah yeah it would be interesting um yeah so we have that there and we also have the nursing section has been resorted um so if you remember before this is actually the section section so health care is now second and we can sort of basically start ranking even the sections um as well so we can have these these really dynamic um listings below and even these as well even the other listings have sort of benefited from that one interaction you know we've done one interaction we've visited one page but you know we're now personalizing each list as well inside here uh as west kenneth count so you might not be interested in that nursing position but if we can start servicing stuff that's in the same area as you then that's also uh possible here as well so best effort to do you know best as we can to match the most relevant content to you essentially um and then we don't have any status the whole point is that the user probably doesn't really realize that we're personalizing it's just working kind of secretly behind the scenes and it's just a website that really works for you i guess that's the point here right exactly and i mean that that personalization was very fast i mean you didn't like you didn't even notice it happening right it's it's like we would navigate into a page and navigate it back like it was a normal interaction there was no long delay it was just you know super fast loading that data so and so this is basically a jam stack app right so it's static so the so basically how this is now rendered is based on hydration then exactly so you know we have a listing of you know most recent jobs so the job the the goal and we have that in page state this is a next gs app so we have a page state and our best our our effort is to show you know we have a list of maybe 10 or 20 jobs for most recent jobs and our our effort is to show you the ones that match your behavior um so you might not get any particular matches in this case and you might want to use algolia maybe even in this recent job posting section as well to actually load you know and we have demos of that we can show that later and so you might want to hit algolia to actually render the content for this if you have a personal experience if you really if you really want to make sure you get that personalized data for each each uh each um you know each each user so but this is sort of best effort so not only is this a static app the back end is also static as well so it's static all the way down um so it's yeah and the other thing i want to show here is i wanted to start showing out the algolia stuff too because that's pretty neat um so we have the search box here that we have ignored up until this point and um if we did not have personal and we didn't have any you know scoring at all associated with us this wouldn't rank anything but if i just started coming in here and typing legacy infrastructure agent you know now now we're getting these these rank for us as well so we're actually adding conditions to the algolia query and we're not excluding anything we're you know we're allowing things to fall through you know this we have no ranking on health care dimitri port in this example but um you know we allow these to come through but we're doing our best effort to surface things that are most relevant so how we're tagged so basically on the intent tag of nursing right now and the location you add that to the algolia search algorithm so they return different matches based on the intent tags that you had selected previously right exactly so you know uniform uniform yeah uniform tracker keeps you know scoring data internally and basically we translate that scoring data um and we add those conditions onto the algolia query and then algolia index has those stacks also for each item exactly okay yeah cool makes sense so but if we went and did some other actions you know as well um you know if we came down here and looked at a management position as well all these scores are additive as well so if i came in you know looked at this new management position came back you know well now we'll slowly i'll start to get a different personalized experience so i'll have oh there you go second so we haven't forgotten nursing nursing is still most relevant and actually these are probably a tie because you know uh nursing we've visited one nursing page and we visited one management page uh but we do but we do we can start building these things and now we know even more that we're interested in i think the one i clicked on was west kennedy town as well so we know that okay yeah so we will have even more strength in west kennedy town than we did before so you know these really the scoring really really paints a picture that represents you know what the user's done on the site the the scores they've accumulated along across the site and we just use those and in in consideration with buildings components and algolia queries and everything like that so so if i went up here now it went to senior group consultant if i started searching for you know senior consultant so we have some west kenneth town so west canada town is actually ranked higher now um because we have a lot of strength in west kenneth town so it's going to start recommending things that are just in that town more but it will factor in the just a management position and so these are management positions and nursing positions so yeah so how hard was it to put this together because i can imagine let's say your amazon right and whatever you search is going to be personalized a little bit because they know you're buying history and there's this huge algorithm and all of that stuff behind this but this is just a static example but you're doing pretty sophisticated stuff here so was it really hard to to put this together it wasn't um you know i was able to it didn't it didn't take long it didn't take long at all to put this together and do you want to show some codes to see how some of these interactions look like yeah i think that would be really interesting unless you have another story and i just completely derailed what you wanted to say no the only thing i was going to do is gonna go to the bottom we have a little forget me button down here we can just reset our state essentially and we get back to where we were before you know no no changes at all basically just uh reset and uh we can kind of see that the play the pages kind of gone back to its cold state you know we don't have any data based on user or anything like that so so before you show any code is there a way to show that scoring that we did let's say you click on nursing how do you now know that we have to personalize for nursing can you show the score somewhere um we do we have a chrome plug-in i don't have it installed right now um so and this site doesn't uh run the correct version for that oh yeah so i'm just gonna console log it then yeah so we'll show the console log but we have a really nice um chrome extension as well um and it actually will show you your scoring data and everything so this is going to be useful so there's some lots of console logs here yeah so yeah this isn't gonna be totally useful so but there's a chrome extension and it allows you to actually try it that way no um there's a chrome extension it'll actually show you the scores that we have based on the user and it'll show you um it'll actually let you run out like what if scenarios as well if you want to try different scenarios where you're adding strength to certain intents and stuff like that um so that's all available in there this site is just it doesn't doesn't work on this site so okay sorry for the question next time it works yes yeah now the chrome extension's really cool and it's really great for you know seeing what seeing testing all your different scenarios and seeing how they how they look on the front end exactly exactly yeah for qa that would be amazing because otherwise you have to go click 15 things to get a specific point it's pretty hard to get there sometimes or to automate it for example anyways let's dive into some nitty gritty stuff cool um so i think i want to show the algolia stuff first because that's what we you know we we came here for today um you might want to zoom in just a little okay there we go yeah perfect okay and first i want to highlight sort of the algolia feature that we're leveraging and i'll just jump back over to my browser real quick um so we're actually using uh filter scoring to do a lot of this um this is a built-in algolia feature and they basically allow you to specify uh field filters from this a little bit as well yeah yeah cool yeah so i'll let you provide you know an array of filters um it could be in the form of a string or you can use an array and represent those in an array as well all the different classical of facet filters um so we're using these two to do that um so basically you can say the field name you want to filter on uh the value that you want to that you want to filter and you can associate a score with it okay what alagolia does is it takes takes those scores and will actually reorder the results for you um so if you have a if you have a score that's you know you're assigning a value to google here three um it'll come in it'll it'll uh you know any results with those values get get a score boost of three and then these code of these can add on to it um and there's also an option that you can that we're using as well to um make it uh basically a sum of those scores so you know if you have multiple matches then those will add up on the actual result score that you get back um so if you're tagging multiple things like we were you know we're tagged with what's kenneth town and nursing um you know that these scores will actually add up so things that are tagged with both you'll you know in this case you had both of these tags you'll end up with a score of five and those will rank higher in the listings compared to something that was only ranked a two essentially and only had one of the tags uh wow this is this makes it pretty easy integration wise right yeah it's really nice it actually fits really well with what yeah structure things you're basically concatenating a string based on whatever we want to filter to and run exactly and this is the filter this is the sum or filters as well so that's the option we're leveraging as well so we're setting this to true basically saying we want we want these scores to be added together and it just it works really nicely and it's a really seamless integration between uh the tracker and um algolia queries so um all sorts of all sorts of different ways so you can add these in but uh they're very powerful and uh that's that's how we're sort of approaching things um so we jump back um to the code we actually so the tracker uh itself um so this is this is next chess um we have starters for and we have component libraries for vue and we also have just uh examples for regular uh vanilla js as well um so you know if you don't use a framework then that's that's totally fine um but this is using the react uh uh library that we we uh ship and basically there's a hook that gives you it can give you the scores and this is you'll you'll receive updates to the score um as you're scoring changes so we can listen for you know intent scores and basically when when a user executes a query we're going to take those intense scores and transform them and put them on our algolia query um so well this is just a an object and we just the the keys of this object are intent names these are the same intent names that are defined on in algolia as well in that intent tag field we're filtering on um so basically we iterate over those keys and we build a tag filter which i just showed before for each one and this this is this handles building out that query that i just uh shared the docs for so it adds the field name it adds the value and then if a score is passed it also um passes that in as well and adds it to the query so each one of those tags that you're tagged with get added to the query um and then we we have we have all the pieces that are basically collected and it kind of looks like this i kind of put an example there just to illustrate a little bit yeah so you you basically are we're defining on our search results we have an intent tag field you know this is the value of it and we're boosting it by 50 because that's our score in that value you know we have a score yeah exactly so we're transferring those scores from uh from you know the traffic error scores onto the album so this is not a hardcoded score right this this score comes from the uniform.app dashboard this score is actually defined by you and this is here and that's how you're classified these these queries get these these scores get added on to the the actual algolia query same way same way if i was marketer 25 you know um these would these would add together for results that match both um but these come from your your particular scoring and that's how we can create the sort of you know unique personalized components just for you essentially yeah and so in this demo like do you query algolia for each list everywhere on the pitch do you query algolia this way and therefore you're able to show stuff or is this only in this type of hat thing only other type of head right now yeah and we have an example on the macathon demo hopefully a lot of time to showcase a little bit um that we actually do query like uh algolia um dynamically in components as well um because we wanted we wanted we wanted like a hyper personalized site you know we wanted the best possible results for each user you know and we had a lot of content so obviously if you have a lot of content you know a component like this that pulls from a subset of 20 on your site isn't going to is it isn't going to cut it um so you want something that you can pull you can source from all your data and algol is a great a great place to you know get that you know most relevant data using the circuit yeah exactly that's cool because i'm thinking if you want to show a list of jobs potentially getting all that stuff from an algolia index based on this query you can kind of personalize it from our end with our intent x in their index and then showing some stuff but then they almost become the database yeah and for those things they would power yeah in that case they would power it and it's really it's really neat as well because if you did it that way you could do pagination and as you as you went through your scores would still be reflected even on page two you know you would see you would you would you would have a whole a totally personalized listing um even even on page 10 so and that you just get that uh using the structure just out of the box you know um so it's there's a lot of powerful power in doing it and structuring stuff this way so yeah cool so yeah um yeah so basically yeah we you get those keys and then um because these are filters you know these are things that um you know we're assigning a score to but they're they're filters and we don't we don't want to filter necessarily we want to just boost um so we just we basically had a fallback condition that basically allows the rest of things even if they're not tagged with the things we specified to actually surface as well um so sure so you know we're not felt we're not filtering because that's not our intent here our intent is boosting um so we have all these conditions and we have our fallback condition and this does add one to your score but your your other scores are are far more yeah they're so much higher it's fine so this is interesting right because when you do one of those type ahead things you tend to want to filter but we don't actually do that we kind of add you kind of order which one is more important on the top and the rest also gets the score but just a bit lower yeah yeah right yeah exactly and we are we are we are filtering based on the the the queries the the text they type in but that's all for sure that's that's all we're filtering we're not yeah so we're just boosting and trying to try to get people to the content faster basically yeah exactly so i'm running through my brain now because i have something similar to this on my own website with tags and filtering and everything i'm just gonna have to add this now yeah it's done yeah it's really it's really it's not that hard i guess oh i'm just going to have to do it yeah that's hot and um just to show some of the personalized stuff as well um you know if we showed them the listing on the sidebar um you know we had a location here and we had and now we don't um so we have listings here um so these are personalized as well and we do ship a react component to do personalization and you basically just pass it a list of variations you want to personalize and then it sort of does the rest for you it takes those variations it'll run personalization on them and it will give you back an array of variations back and it can indicate if you if it actually personalizes variations or not and then basically your structure your your your your uh goal is to just you know take those personalized lists and just render it out to the page essentially so here you write count equals three so what does that mean here um by default um personalize you know tries to serve you the one best uh you know result um so we we want to find the most relevant thing uh you know in in terms of a hero you know you generally only want one result back so we default count count to one but we can you can also specify three um you know if you wanted the entire list back you could come in here and go categories.length and yes this would order them based on the personalized score that you have for each of those categories basically exactly so it would give you the entire list back personalized for you and you could do whatever you want with it so this is using sort of the render props method that that personalize has it also has a component kind of generation uh component as well but then it gives you this variations back and you can do whatever you want them and then you can even display a message saying that this is personalized for you and we were doing that on on the page and then this other prop here is personalized only um this this lets you filter basically if you only want results that the user's been personalized on and you don't want anything else so you know our by default this would give you maybe a default variant that you have set up as a catch-all but in this case we want to just surface you know the most relevant con you know categories that are to the user um so if we went this actually appears in the sidebar it'd be right here and we had nursing here before so if i went back if i went back to this nursing he came back we have nursing here now um and this basically is a result of this flag being passed in because if this was set to false then we would get we would get you know things that we might not have relevance on but we wouldn't just create shortcuts basically for the user to um you know access that content quickly again basically so we can pass that flag in and have personalized only give us things that we actually have strength on back essentially so okay cool so now i understand the count of three because you have those first two and now nursing came as the third yeah okay and if you open it up that's the nav drop down on line 77 i guess right it's actually this there's actually um it's actually this um so if i went to i closed this there's a component on me if you just can't see all of it um right now because we're focusing my personalized only so i went to management came back i'm now there management nursing um so we'll just keep adding to this real quick and just kind of show it um so i'll add social social services come back i've got social services here right now and this is sort of where that three kicks in uh this is just three okay yeah so if i go back here and go non-profit i'm interested in this it's gonna it's probably gonna kick one of those out or not even surface because we only want three um but if i went back and if you go to non-profit again now it's more important and therefore you might see it in the list yep so now it's actually the most important because before they were all tied you know each one had a similar strength we visited one page of each one they're all similarly similarly strength they went to nonprofit twice and now that's the most important one essentially nonprofit was just kicked out you know initially because it just it was further down the list and it just wasn't it was just tied with the rest of them so nonprofit is now our most important one because we visited two pages that related to nonprofit so okay that really works doesn't it it's crazy and you almost don't notice and that's what i like so much about it yeah yeah this it's it's super fast and it's it's very responsive to your behavior so you know if i'm coming here and click nursing now so we have nursing and non-profit now and it just works you know it's it's very fast there's no there's no lag on it at all so and so um how do you track this is this tracked on like page level the intent of nursing or is it like in a component how does it how does that actually work yeah the answer to that is um you could do both um you know tagging on targeting on a component level is actually very interesting and it's something where we we do it a couple different places it's um because you could actually create um sort of a composition of personalization to just depending on what what components show on the page so multiple components can push behavior in as they were as they're rendered on the screen so wow so seven components that make some sort of calculation of five different intent tags but maybe two components have the same intent text so that one is stronger on that page yeah so the page will the page will collect all those tags and add them on you know uh and the the components you actually see will actually be uh you know result in the score that gets pushed into into the tracker for you basically so it's that that way is actually really powerful and it's really cool that you can basically do a composition of components that push score this this particular site um is just pushing on a top level so on a page basis so if i go to pages and just go to my job slug page very simply there's a basically a hook to push behavior on with uh called use behavior tracking you pass it this intent tag object um which just specifies you know the relevant things to this particular job page that's being viewed right now and those get pushed into the tracker so basically you just need this one hook to start tracking behavior and this could be on a page level or this could be in the component level as well wow so that's really easy and so that intent tag right now this comes from your json or does it come from the intent text that it downloads when when you basically build the page yeah so this this this intent tag is what the actual job is tagged with um which comes it would either come from your cms or it would come from uh in this case my json file so this is just a big manifest with everything you need for this website exactly so there's about a thousand jobs in here um we're not pulling these out yeah we're not pulling these for each page it's um you know we're basically uh pulling from this and get static props instead of hitting a remote data source um i kind of like to explore exploring this idea because it allowed me to like rapidly prototype um you know exactly i don't need a cms now right you can just put it in and it just works exactly i kind of like that yeah that's cool so this is the intent tag field this is the structure of it so this particular job this product accountability agent um in wes carmen is tagged with has a healthcare intent and these are the things you you would define in in uniform dot app um and you would come in you would go in there and create an intent called healthcare and um that's that's sort of how the mapping kind of works there so this this healthcare has a has a entry in here as well um so we have this healthcare in the manifest and this manifest gets downloaded from uh cdn when you actually build your site you know these intents get pulled down from uniform.app one time they actually get baked into your application um so these get pulled down so you would create an intent called healthcare and in this case on this site we only we're only pushing behavior for healthcare um so we need one signal uh you know on each one of these right now because we're only using behavior on this site um so basically on this go back to this uh because before you go continue here this is actually for for you this is very normal right but i'm now starting to grasp more and more how incredibly easy it actually becomes context conceptually right because in your uniform.app you set up your intent text exactly then on build or on npm run start or whatever you do or yarn it actually grabs that stuff yeah here you go on the screen it grabs these and it puts them in a json file so in your javascript bundle you have the indent x and then if you either have a cms or you have something static like you're just showing there are intent x there as well and then the only thing it has to do our tracker has to just match them and then tracking is done and to me it was black magic how to do this on hydration but now it's it's actually relatively simple it's just putting them all together sorting a list to the most important one and that's what you show as the result of your personalization exactly yeah we kind of realized that all things were like all things were interested in our lists you know it always came back to a list and all our discussions on this and so we really embraced the list idea and it became more of a more became more of a sorting uh problem essentially yeah it's like a fancy sorting algorithm that is becoming super strong yep that's super cool i love it yeah sorry go on right now i would say just a like you know show we just described so this is uniformed on app and you come in here and define intents so this is this is unrelated to the site we just looked at but i mean come coming here and define this so these are event types by the way um i'm sorry no no worries so this is a developer you know uh intent tag in our system and basically this is using a similar thing that what we kind of showed on the um the the example the job board site with using behavior signals and the thing you just described is the actual manifest that gets downloaded this is basically just a json representation of all the all the signals that you have all the intent that you have defined in your app and you know you're not your application isn't fetching these when you when you're at runtime these these get pulled uh at build time and actually get bundled into your application so there's no runtime there's no runtime dependency on us and you know if our app could our uniform.app could be down completely uh knock on wood but we could be down completely and your site will still run um because this is the magic of yeah no origins baby exactly so it's possible in your application yeah so when i explain this i always say look ma no origins everything still works um it's what if i wanted to run next in dynamic mode so not next generate or next generate but actually in dynamic mode it would then still be compiled into your bundle right so even if it's running dynamic and not gem stack you still have it in your bundle exactly and this one that's what it sort of looks like um so we download this json file and generally how we do this is we actually look at the package.json we actually have a script um i don't have one here but we generally this is the cli stuff right yeah yeah we have a cli and basically it downloads this from our cdn the file i just showed and you know we end up just importing this into our application um and it's good this gets bundled into your application so it runs on build and you should be and you should be running it as frequently as you think you're going to change intents um if you're changing intense a lot then you'll probably want to run on each build and get the latest greatest for each ability or site um so it depends on you and you have the flexibility to do this and it gets bundled in your application so so is it possible from our dashboard to basically set up a web hook so when i publish my intents that i do a rebuild or something exactly yeah so if you go into your site settings that you have your site set up in the uniform.app and there's all sorts of good options in here but uh if you go to api keys um there is a um sorry books are we now showing a a live api key on our stream i love it now sales api keys are you know pre-shared yeah yeah sure there's no harm in them so um yeah so you can add a web book in here to trigger a build when this site um actually gets gets built uh or if you publish your new intent manifest this can fire off a web hook to do to do that so yeah and that that makes it all look really well oh june just posted something let us try a cool feature of stream yard look at this actually yeah you're completely right we should actually i want that on my hat so it's in every video i do it's actually really fun it's a good one i i've had like slides on conferences where this was my last slide and then i didn't have to say anything else good fun anyways um you have some well what we might mention here the part that i kind of like of this whole like the local tracker thing is that everything is a plug-in into the tracker right so if i wanted to write something else to track maybe i want to use local storage or something crazy i could actually do that in here and build my own right yeah and this is this is sort of this is the the bare minimum you need to get up and running with the default tracker you can pass in custom storage uh providers so you can if you you know you have if you need to meet compliance rules where you don't you don't want to store data in anything really and you're in you're leveraging client-side routing um you know you can store your data in in memory um and then the the visitor is only personalized while they're on the site when they go away all is forgotten and you know you're not storing any data on that and you can actually plug the storage methods in here um and actually make that to make that possible so we we ship we have a facility for doing cookie storage uh which has some pretty good use cases uh indexeddb as well and also just in memory as well which is just for as long as a visitor is available but you can also implement your own um if you want to store your data somewhere else um you know that if you if you need to meet other constraints or you have other other places you want to store that data you're able to do that so and of course google analytics plugs in here too right it does yeah i don't have that enabled but there is a there is an analytics plug-in here you can pass in as well to actually um you know we each basically each personalization uh trigger each personalization run will emit an event basically indicating the user has uh you know that personalization has occurred and that you can basically see the effect of that personalization as well and we also have some built-in mechanisms for doing uh testing uh uh like control groups i guess um so yeah a user might be it might land in a control group and personalization will run behind the scenes uh but they won't actually see the result of that personalization so you can you can you can see if the you know the effect of your personalization and to see how those two control two groups differ essentially and you can control the percentage of those people that land in that control group so yeah because you kind of if you actually put all this in place it would be nice to be able to prove that the conversion works by using your analytics tools because that's the way board members want to see the graphs right exactly how about our mac mac hackathon or our mecathon demo because that has a bit of commerce to it and that might also be pretty interesting to have a look at yeah i like this i like to say a lot and it uses algolia in a couple different ways and i'll just run through some run through this and couple that showed a couple different examples of that yeah so we have about 15 minutes so if anyone also wants to ask a question please feel free if there are no questions i think adam you're just doing so well it's all very clear i love it there we go yeah so what's the premise of this website um so this is a sort of hypothetical conference sort of what you described before um yeah the conference for developers and marketers um users can visit you know look at sessions on here they can also register they can buy tickets and they can also shop for merch um so on the home page we have a sort of a hero component here this will be like a you know maybe the first interact first thing that a user might see that's personalized um we have talks so talks that might be relevant most relevant to uh the visitor we also have merge down here and this merge is powered by algolia as well um so we'll see some cool like little uh personalizations happen in this in this area as well cool so if i if i just you know do behavior as well you know i go to this developer's page i'm looking at it it's interesting and i go back to the home page um it's sort of telling me to now take my development to the next level and this is you know this is very fast personalization um and it's personalized for me i'm now classified as a developer and things other things have also started to be personalized as well so now i'm getting personal developer personalized uh talks for me as well um and basically indicating that these these talks have been personalized for us yeah and if you go down to the merch we're now getting uh developer merch you know this is more specific to us whereas before it would show you know something that represented maybe all visitors now we're getting developer being most so uh merged so do you speak js i mean it's fun absolutely certainly we do yes exactly [Music] yeah and that now i just want to go and go to go to marketers as well get some more uh scoring so now i see some marketers and developers talks um as well so you know things that are associated with both are now most relevant and i actually got a special question on this part um so so you oh wait no my answer is question but my question is answered by what i see because my question was hey i have now 50 score on developer 50 scorer marketer why do i see marketers but actually it's marketing technologists so this header is shown based on a score that's equal between two things right exactly so if i actually went if yeah if i went back forget me went to marketers came back yeah i see a marketing one but because i'm marketer and developer i get a special kind of hero that indicates you know i'm a little marketer i'm a little developer um very dangerous combination yes potentially a thousand components for variations to be built the more complex your system gets right that's part of the game with personalization exactly you can be as granular as you want and with this you can target specific uh you know groups of of intents and um have those have as heroes so you can be as granular as you want essentially with the with your different um components um if we also go to the merge list as well now we're getting marketing technologists type you know things that represent both um shop merch as well so we can get some uh marketing technologies bags or whatever and i just really want to click this hoodie um because we have some we have some interesting interactions in there um so if i go into here um you can see our merge down here is is is pretty much the same as what we saw on the home page but if i if i want to start coming in here and i'm like starting to interact with this hero this this thing i'm trying to pick out a color for my hoodie um you can see that now i've basically expressed an interest in blue here and i want to show that um you know basically i love blue and now the site is going to be personalized so we our goal here was to hope like uh you know hyper personalize the site so now the different variants that are shown for the the merch are going to be uh in blue as well so we can add these little we'll call them enrichments um you can have these enrichments that basically give you more granularity over the variants that are shown so you know if i want to show gray instead because i've expressed interest in gray then that's that's great and he's going to add together um you can have scores in in multiple uh but this particular thing we're expressing interest in one and we're clearing out the rest so you're not okay sure you're not you're not accumulating score against color across colors you're just expressing interest in one color essentially so i think what we should note however when you now click on a color the page doesn't actually refresh and the content just changes to something new and so how does that work is this content already locally there do you we have all variations of this so we just show it or did we just add algolia we just asked algolia really using that using that code we just showed um you know that's how fast the mongolia api call is then exactly that's a little crazy you wouldn't even notice it if it was you know because it's kind of below the fold for a lot of people sure exactly you wouldn't even see that necessarily and i expanded my browser enough so we can actually see that behavior or that that a little interaction but you know the behind the scenes what happens is you know you express interest in a color um you know the tracker reclassifies you emits a new score algolia query runs because that that score is changed at that point and now we get this personalized merch list here um that that allows you to you know see very personalized and uh you know you know listing of products that i might be interested in so what is really fun about this for me looking into this because i've worked for many many years at agencies building these things for our clients right however we didn't have uniform and we didn't have all the super fancy tools because these kind of agencies work with bigger partners bigger monolithical systems that are already there for a while and this was so hard to do like of course you can do everything right it just costs time and money but trying to do this is so hard that a lot of developers don't even know about this because the mvp of those projects never is never big enough to get here so when i saw this like i've had many clients ask me for this stuff and i always have to say sure just takes you three sprints yeah of three weeks each exactly right because we have to do all the things together in that system and we have to hook it in and blah blah blah and now we did this in four days for the makathon it's ridiculous yeah i just wanted to say coming from agency that this is pure magic and that i hope that developers now start to see this as more normal and therefore also use it more or expect it yep yeah we always we always joke a little bit that you know personalization is one of those things that that slips to the mythical phase two of a project certainly you know our goal our goal with uniform you know like like our intro was super short uh with creating this you know yeah try to bring personalization into phase one and and use it as little or as much as you want you know maybe start with that hero on the homepage maybe start with some small interactions and dip your toe in the water because it doesn't take a while a lot of time to get up and running and you can start matching intense to your you know your different um you know taxonomies and then actually start having these these these small personalized experiences so even if you're just a man of our listing like exactly it could uh you know pay some benefits so well yeah like a lot of pages that we built now or components we can tag them with something right that's a normal thing to do already well if those tags just become intent tags yeah you're halfway there you just have to put it in and then at one point when you're ready to personalize you just start looking at those intent decks and do something with it yeah i think a lot of a lot of sites have have existing taxonomies as well yeah if you've got those taxonomies in some way to you know intent tags that represent it you know maybe group them or maybe create one for each um then you can you can you know you leverage your existing taxonomy basically and then and use that to power these these sort of interactions as well so yeah i cannot wait to start using this more it's going to be fun i'm not here to just say how awesome uniform is it's just the concept is so alien to me coming from agencies working on this that we always wanted it but just never could and now it's so close i'm going to have to build something yeah it's fun is there one last thing you wanted to show on the website um i think i think that covers the high high levels here so okay and what happens with our features like this this has a big commerce integration as well yeah exactly i'm interested in that let's have a look okay so we can if we go in here and add a product to our cart um you know we can do the whole checkout with bigcommerce as well um this is kind of interesting situation here so we've made some action we have something in our cart and if we go back to our homepage you know we have you can have you can configure intents to be sort of overrides so if you have any strength at all basically in that intent in this case we have an intent that basically says you have something in the cart um so if you have anything at all in your cart it'll go hey are you ready to check out because that's that's the goal right you know if you want people to buy merch and buy things on your on your site um so you can have little callouts here that's what we're leveraging here we have an intent there's intent that basically is override on this variant and if you have anything in that and that has something in cart intent and it basically shows that hero but the second i go here and actually you know remove my cart automatically no page reload at all we're back to our marketing technologies because we no longer have that intent you know when you remove something from your cart we removed that score and now we're just back to regular old mac marketing technologists and you can control these on a code level um you can push you can you can push things um as you see fit as users do interactions if you drop a cookie we can pick up that detection we can detect that as well and trigger signals based on cookies and um so there's all sorts of ways you can get intense strength so when you know just click add to cart right on the button click did we then bind some sort of a tracker thing in the code i think so yeah um yeah and i think there might be some events in the in the card as well oh it might be opening the card that triggers the event potentially yeah i think i think what we're doing here is when you add the cart we basically take the price of the hoodie essentially you push that into the tracker um so you if you have a lot of a particular product in your cart you know maybe you have a thousand dollars worth of merch in your cart you could have an intent that only triggered at a certain point so if you had a lot of things in your cart at that point we could trigger an intent based on that or show our variant based on that um so we're using the score here to actually kind of like basically say how strongly we're represented in this in this particular intent so when we add it in that score gets added when we remove it then gets removed and sort of things just run uh rerun again to with our updated score essentially so cool i cannot wait to try this out where we kind of have a bit bigger stories where people maybe by product that let's say some sort of skin care thing that might be a product that you buy every three months and then you can maybe even predict like your skin might be better now and then actually show something different based on that personalization but then also never ever show them the opposite product anymore right it's so much nicer for a user and if you then store that somewhere when you're in store and somebody helps you that they also know that right it doesn't have to be just websites it can be more omni-channel anyways we're digressing a little um i think we are reaching the hour um dude i really want to thank you for showing a little bit more like more complex use cases and how that works in the code and how we can actually really work together with algolia i think that's a great thing as well yeah absolutely so thanks man awesome no problem and this makathon demo is is open source so if anyone wants to check it out and show and see the different um you know personalizations uh scenarios that are you know shown here that um it's on our you can find in our github uniform kit up and uh check it out okay i will certainly do that myself anyways cheers thanks everybody for watching and we will see you next time bye thank you you