Optimize for non-Webflow sites

All videos

Optimize for non-Webflow sites

Trouble with this video? YouTube may be blocking it for you. Watch it directly on YouTube instead.

In this tutorial, we cover how to use Optimize for non-Webflow sites.

<details>

<summary>

Video transcript

</summary>

Hi there, in this video, we'll talk you through how to optimize on your non-Webflow website. First things first, let's talk about the navigation. There are a lot of options here that help you talk about, or look at reporting, uh, an option to set up a landing page that's separate from occupations, think of components as a library, and then you have another access point to see what activity's been happening in your site, and account settings, where you'll find things like integrations, It's going and general goals that you might set at the account level. Naturally, helping support take you to articles and help documentation to help you learn more. Today, we're going to focus on optimizations because that is where you'll see a list of activities that you've already created, in terms of, optimization that you're running, art and draft state, et cetera. Also, on that section is where we'll see the entry point to running a new optimization, and this is where we get the option to build an optimization- through the visual editor, which is our no code solution, the code editor where you can use JavaScript and CSS to build, or choosing a playbook, which is a state of ideation, or giving you some suggestions of what to consider running on your site. We even help you build out some of the variations as well, depending on what you select.

The next thing I want to cover quickly before we get into the actual tool, it's just a vocabulary check. Often, I'm going to use the words optima- I love this. I this. And optimisation and variation. And these two are actually nested within each other. When we talk about the changes that you're making on the page, so what are you actually testing? Uh, we're gonna reference that as an optimisation. An example might be that you're changing CTA language. So if I'm running an optimisation in my hero section of my website and I want to change CTA, uh, that's my optimisation. Now, the options that you set up to then run with- and that are called the variation. And so you have full control over both what you choose to manipulate on the site, and then what you actually input as the options.

So in this example, I might say, let's pretend that my, uh, call to action says something like, uh, learn more. I want to see if running the language get a demo, talk to sales, or sign up today, is actually better alternatives. So in that sense- I'm creating three new variations as part of the one optimization alongside with the learn more, or my baseline, variation.

and that's one of the things that's, I think, difficult at, at first, or folks to really grasp is you really want to isolate your optimizations, or one change per optimization. So let's talk about the hero just for a hot second. If we have your hero section, which simply has- The headline, an image, a CTA, maybe even some sub-copy. You're probably interested in changing a lot of those pieces. I encourage you to make those separate optimizations. So change your headline in one experience, change your CTA in another. This just gives you more flexibility to see what's working independently. it also allows more possible versions to be shown to visitors. The more options you have in separate options separate up and, optimizations, the more combinations that can be served together.

Okay, next is just a quick detail about how to look at your website. Right? Naturally, everyone's site is made up of a bunch of pages. In this case, I'm only displaying two. Think of each page as a new area of opportunity for where you can run optimizations. On a singular page, you might consider, as my example, a headline test and a CTA test. Yes. Run those at the same time, gives you more options of what to show the visitor, gives you higher learnings. Now, within each of those optimizations, which I shouldn't use the word test, because realistically, you could get to choose whether it's a test, an AI optimize or a personalized. So within these optimizations, you then define those variations, uh, of which our system will always pull forward, the current version of that part of the site for you. Do it. As labeled as the no change or the base variant. So in my CTA example, the learn more copy is the baseline. And so that will actually be present as part of the optimization to have as a control. So you'll have a, a stray comparison. What does the new copy look like in comparison to when the existing copy on the site runs? Um, in this example, we've created for optimization. It runs across two different pages. This is an awesome place to start.

and again, what you'll notice in the tool when we go build is once you start building one variation. So that's that new part that you're adding to the site. The system will automatically create for you something labeled as no change or base variant. This is simply whatever the, the website looks like today and current day, before you made any alterations. So if I'm manipulating the CTA, what is- this is CTA have today, that's going to be your no change. That is always, active to today's stance. So if you go and change that CTA separate from the optimization, then no change will- will also be updated.

Alright, now let's talk through the quick steps and then we'll do this, live. So first things first is how do we want to access the editor or the build process itself? So. This is where you, again, you have those options to use the visual editor, code editor. You can also set up a redirect in case you want to shift traffic from one page to another. It's simply inserting a URL. You can also run playbooks, which, again, are- are ideation opportunity for you to consider different types of optimizations. Uh, just know that if you do choose playbooks, they are automatically selected as AI optimized. So you're opting into using- our bread and butter style of optimization that allows for our system to help figure out what works best for the visitor.

Now, if you don't choose a playbook for the rest of the styles, the next step is actually choosing how do you want to optimize. And this is where you get the choice between running an AI optimized, a test, and a personalized. I'll explain these separately. but for right now, just know that the option exists there and you need to choose it up front. because these- these. Different style optimizations do affect some of the settings that you have at your disposal. You can't change it later. So it's- I'm really helpful to, ground your optimization at large. What do you want to change in the site and why? Connected to how do you want to optimize it? What do you really intentionally trying to get out of this optimization? in a really short example, if you're trying to figure out what works best for different kinds of visitors, it optimize- might be the way to go. Uh, if you're looking for a very clean split test where you can see a clear one winner, test may be the- the opportunity for you there. And then personalize is best used when you already have some learnings and you want to take action on certain audience, uh, activities and make sure that certain audiences see certain experiences.

Okay, cool. You choose how to- Like it says, choose your optimization style. Next is defining the page target. So this is where you actually input a URL string to say, here's where we want to run that optimization. Pretty simple, you'll see this in the tool. You'll be able to actually create new page targets or select from a drop-down. So if you've built on the home page already, you can just select the home page from the drop-down. You don't need to create those tokens over and over again. Next is- is our build process. So this is where we will actually build those options within the ver- the optimizations. also set goals and audience limitations if you'd like. So if you want to restrict the optimization to a certain group of individuals, primarily by attributes like geolocation, device type, something from the URL string, even actions, behaviors that they've already- taken on your site, you can do that within the specific optimization. And then lastly, it's just a state of launching.

Alright, so let's build these steps together, live in the tool. So when you're in your dashboard reminder, we're gonna stay on our optimizations tab. This is where you see a list of what's been created in the past, whether it's dr- drafted or live. This top right hand section is where we see our en- . . street point for building something from scratch. So, as we go through this, forgive me, I'm in a test account. Some of the screens may not look the exactly the same as yours, primarily when it comes to data. but otherwise, the steps are exactly the same.

first things first, this is our entry point. What do we want to build with? So we have a visual editor, code editor, a redirect, or a playbook. Uh, we'll go through this twice through- I like to start from scratch, the first time around. So we're going to use the visual editor, just so it's the most open-ended flow. Next, we choose our style of optimization. Um, and this is where I really appreciate that we have a summary on the right-hand side to help you remember what each optimization type is really best for. so you'll know that there's a call out here, um, in the flag. additionally, you can see the summarized list of- maybe why you might choose a personalization, a test, or an AI-optimize. Again, this selection does impact some of the settings as you progress on, so it's helpful to know how do you want to optimize it before you build. Let's select AI-optimize for today's purposes, and continue on.

Here, we select the page that we want to optimize on. Um, and in this drop-down, you'll see that you can actually add a page. each. So. So if I were to do that, it's gonna give me a prompt to insert a name, a URL string, and then you can actually manipulate whether you wanna run on more than one page or not. This is going to be helpful if you wanted to do, like, a group style of experimentation. So, as a quick example, let's say that you have three or four product pages that are formatted exactly the same, obtain the same structure. and in a structure, just different content for different products, and you wanted to test, um, maybe a placement of, an image, or maybe the styling of a particular text box. If you input more than one URL here, you will be able to run the optimization across all of those specific product pages at the same time, essentially giving you more, a larger audience to test across. So keep that in mind, but, But initially, I recommend running an optimization on just one page for the sake of simplicity. Um, so you can build it new here, you can also go back and actually select it from a page you've already created. So, since I'm in my test account, I'm gonna just search for a page that I know I've tested on before, and continue.

Now we're in our virtual auditor. and so this is where we can actually mouse around and see what manipulations- we want to make. You'll notice on the right-hand side that it's asking us for an action, so this is gonna guide you on how to actually build. Okay, now that we're in the visual editor, a couple things. On the right-hand side is where we're going to see essentially the style change panel, but for now it's gonna give us some action, so it's asking us to click in an element. up top is where you see- the page that we're already optimizing on, the desktop view, and interactive. These toggles do not change targeting at all. It's simply for your visualizations. So if I change to mobile, for instance, if I make changes here, it actually will still apply to any size of the website. it does not only change from mobile, you'd have to set that as a targeting option. Interactive is great as if you have pop-ups that happen on your- site, and you want to- I did those to make it easier for you to, create the optimization. You'll want to toggle on interactive mode, and this allows us to actually navigate the site. So if I were to click this, it would actually take me within this browser window to the URL link that's connected to that CTA. So just keep that in mind helpful primarily for getting rid of pop-ups. And then our left hand panel is where we will see the variation that we create over time. Bye. It's also where we can set goals and, configurations like audience details.

Okay, so let's take this action. Let's click on an element. and perhaps I want to, um, since I keep talking about CTA's, we'll- we'll do that as an experience. So notice that as I mouse around, these bounding boxes appear. That's helping you visually identify what is a section or element of your website that you're actually making. You'll see that we'll call out the actual, code that's connected to that as well as a label or an element, identifier. So let's select the CTA. And now that we have that selected, a couple of things. The silo panel naturally opens. This is where we have all the options to manipulate that. most important thing is understanding that this element selector is how our system is referencing that particular- . So if you are reusing element selectors across your site, by this exact name, we will change anything that has this name on this page. So just keep that in mind. Um, if you are using reusable names, you want to update that and perhaps customize them to where they're located on the site, so that you don't have any issues about. But the element selector is what's the most important. It's how our system is identifying what to change on the page.

If you find that when you're mousing around the visual editor, it selected something that's too specific. This is where the bread crumb option up here comes into play. So we are currently selected on the primary button. If I hover on the div class, it will actually give me options to manipulate the entire, text part of the hero. If I go- You can further it will encompass the image. Go ahead and click on that just for a moment so you can see what happens. Now it's giving me a much wider range to make alterations. It's also recognizing that this div class is technically an HTML area. And now if I wanted to make manipulations to even just a CTA, I can do so here as part of the HTML block. The caution with this is that you don't want to always go broader. You don't have better, because once I make an alteration here, I won't be able to make alterations at a smaller level. So if I also wanted to run an experience changing just the headline, it's going to give me some errors because I've made an alteration to this entire div class, even if it was only focused here. So it's really important to select what you want to actually manipulate. let's try it again here. Perfect. And keep it at that.

I just want to express the option that sometimes selecting individual editor gives you two specific of an element, and so the bread crumb is here, to help you kind of get as much as you'd like to manipulate in the view. From here, we can make changes really quickly. Um, so if I wanted to just change the copy, it's very simple, um, and quick to- . you in the visual editor immediately as, like, your first line of QA. you can change all kinds of other things, including where it links to, um, the styling, all kinds of things in this- in this list. I highly recommend you, at first, when you're first using the tool, familiarize yourself what's- what is in this list, primarily because a lot of these things are natural style changes, but we also have options, like, rearrange which- to. It allows you to reposition elements on the page. we also have AI copy suggestions, which, in this case, I'll demo because we have a text element selected. This will actually evaluate the text on the page and kind of give you all other options to try. So, if I wanted to, say, act now instead, I could hover. It will show it to me in the view. By clicking it, I've now decided to select that as my new- new text. So, AI copy suggestions is great for text elements. It can be used on a CTA, a paragraph, a headline, et cetera.

additionally, we have more features like dynamic content. So, if you wanted to insert tokenized values based on who the visitor is, perhaps if you are a B2B company, and you wanted to start inserting your customers' names in some of these callouts, it- through a tool like Sixth Sense or Demand Base, then if you don't have those, using something that we offer to you called Enhanced Match, offers you that way of doing our reverse IP lookup to insert tokenized values. Uh, I'll come back to that. I just want to call it out as something that's a bit more advanced individual editor. Essentially to say that not everything in this panel is just dialing, you can actually make real manipulation. I believe. The last call out in that same way is inserting a new element. Excuse me. So we have the way to, just like you can rearrange and move the CTA around, you can actually insert something brand new to the page to make it different.