Optimize for non-Webflow sites·续2
- Video details
- Continue watching

Optimize for non-Webflow sites·续2

This is essentially the only part of our tool that does in fact use a cookie. So this pop-up module is based on a cookie. Um. We'll in the next one. which is why you have a time clock here. So if you wanted to exit the preview opportunity, you would actually select exit. Otherwise, we are in a testing format for about nine minutes and-and counting. what's great here is that you can see this check box is telling me that we are successfully running the optimization. And so, act now is in view. I can actually see that here. I could technically- Technically. Click on that. It will then take me along the website just like I would in a real setting. Scrolling back up, see that in view.

A couple of things that I want to call out with the preview module. First of all, we're gonna edit previews. And this gives us the option to toggle to the other variations in the optimization. So if I select base variant, save and reload, it's gonna show me what does the base site look like, right? This could be served to visitors. Is it her? Because that's part of the experience as that control. Um, and so I just want to make sure that still looks great. We're good to go there, still getting the green checkmark. Let's go back to our variation, save and reload. Now from here, you can also test the goals. So if we go to edit one more time, settings, we're gonna enable browser test events, for the sake of verifying the goal. So now it's gonna show me what's possible for this page, and again, forgive me, I'm gonna test the count, so I have a lot of activity going, but let's clear that. And what we'll do is, I'm gonna click on this one more time. And what you'll notice is we now have an opportunity that actually fired. and so remember I had added a bunch of numbers to recognize what we were testing. So this is the campaign or the- experience, rather, that is, um, currently active. And when I click that CTA header, I fired this particular goal. So this gives me a real-time way to evaluate the goals. In fact, are working. Um, what you're seeing here are essentially because I have other optimizations live on this page. that's showing me what possibly could have been triggered because that goal, meaning this click, is associated with the goal. With more than one optimization. But for this case, I'm just trying to, QA the singular optimization, so I just want to look for that name and the parentheses, see the event, and now, essentially, we're good to go to launch.

The last thing I'll call out here is that in the edit preview section under settings, um, there are two other toggles here. By default, we will ignore audience settings. Um, and I didn't- really add an audience here, so maybe we can do that a second time through. but what we do here is that if we wanted to toggle these off, the system would only run the optimization if I passed as a user, the audience criteria. So because I have no audience limitation set, it's still gonna pass. but if you had set, for instance, mobile only, I'm on a desktop computer, this will actually fail. So you have a really great way to bear- very quickly validate the goals, the visuals, the functionality, as well as audience criteria before you launch. Very last thing about the preview is that you can share this with folks who don't have access to Webflow. So if you copy this link and paste it in a browser, it is gonna be quite long, but it will load the exact same preview experience without having to have that individual, be- We'll see you in the next part of your dashboard. This is great for if you have additional numbers of your team that are, uhm, you know, not connected to your day to day, but you want them to see what you're running, or be able to manipulate the previews and feel good about how the optimization is run.

Alright, so let's go back to our slide deck for one quick second. Just to summarize again the visual editor panel, and then we'll build a second- I'll see and time through. So, the panel is visual, right? We're looking at our website. The left-hand side is going to have what you build as you keep going. Again, the base variation is automatically created for you. That's just your control. It gives you the baseline of what happens if the existing version is shown to visitors. Um, next we have the element selector. That's the most important concept to grasp here. When you- So if you things in your view, it will populate a selector. That selector is essentially the identifier of how our system knows what to change. You can manipulate that always through the breadcrumb. You can also type over that. I didn't mention that before, but if you know the names of elements, I will be very impressed. you can actually paste these in here yourself. And then lastly, the, section up here for goals. and hold. And audiences, is in the menu up top. you don't always have to manipulate those, but you can, if you are interested to.

Alright, let's go back into our tool, and I will show you quickly the account settings. This is where the, account-wide goals do live. so if you are in that camp where you have, events that you are going to track or want to measure across all of your- optimizations, this is where you do that. essentially you will go through the flow of what we did where we created our events, and just let our support team know that you are interested to make those events your account-wide, and then they will be able to associate it here for you. So until you see anything listed in this section of your settings, you do not have account-wide goals yet. You'll still have to, reselect those goals every single time you go to an optimization. conversation. but once you have them created once, let our team know, and we'll help you associate them here. Another quick point that, um, I mentioned it super quick earlier, but the total conversions is simply giving you an aggregate of you of everything else that you've selected. So in this case, I have populated two different form events through an integration. the total conversions would represent if either of those had occurred. Awesome. in this list, since we're on the account settings, you will see, my account ID, as far as the dashboards concerned, the page views, which might be helpful to compare against your contract values. And then as we scroll down, you have integrations, the full snippet that you have placed on your site, et cetera. Notice that I have six cents a day. People, that's why it showed up in that audience panel. I also have HubSpot enabled, which is how I'm getting those form submissions.

Okay. let's go back to the optimizations, and we will build another one from scratch. So let's do new optimization. and actually, let's not build from scratch, which actually use a playbook this time, so you can see that alternative flow. So, let's do- I'll just do a headline, because that's simple. And I'm gonna select that same page that we did before. Again, this is a test account. I made this page up. I do actually foster what's saving the previous, so if you're interested in adopting dogs, uh, go check them out there on the east coast. Um, but for now, let's focus on what we're doing. We are building playbooks. So notice at the right hand panel. Thank very much. And all the visual editor is now coaching me a little bit more descriptively. Right. It's not just saying, click anything. It's saying, please click a headline. So if I select our headline up top, it will now populate some options for me. And these are going to be populated based on just, options across the web and then specifically a generated from my website. And so if I hover, it will give me, a quick visual again. To understand if it's working. Some of these may or may not fit for your business. Some of them you might like. Um, so if you want to try the template, it will open the editor to further manipulate. Likely the AI generated are going to be a bit closer to, what you're going for, given that it's able to read the content on your site. So I'm going to say, uh, change, try this template. And now we're back to the regular edit, edit flow. We're kind of the, the. I'm I'm sorry. Playbook helps you get started. Now we can keep manipulating as we desire. so in this case, I will, uh, keep this as is. I'm going to save left hand side, watch our base aeration come into play. And then our other variation is created for us. I'm going to leave the label this, uh, changing lives. Okay.

So from this point forward, all the steps that I already showed you are exact. The same. The one thing I didn't call out is, one of my favorite ways to quickly manipulate things is paying attention to the existing, inline CSS that you have in your site. So forgive me for a moment. I'm going to navigate away from what we're doing. I'm going to select our CTA. This is where you see a pop up. this is intentional because I have already saved a change on the headline. And if you remember our best practice, it's to try to isolate changes, one per experience. so the system's actually warning me here here. You sure you want them and they both the CTA? most cases, you're going to say no. in this case, I'm trying to show you something, about how I can grab a class. So I'm going to say yes, but in most cases, take this warning seriously, go back and separate and then build a separate optimization for what you're changing. But for now. Oh, I'm going to say expand just so I can get this class that is associated with the button. and copy that to my clipboard. And now I'm going to go back to the variation, and reselect the headline. And what I'm going to do here is actually paste that in and notice that it just inherited the class that I have in the site. So if you are familiar with the classes that you have, please use those so you're- or advantage to quickly make sure that content is following a very similar pattern that you have across the site. you'll notice that because I manipulated the CSS, there is that blue dot there. The blue dot will always show up to whatever you've changed in the style panel as a quick way to verify. but very, very easy, uh, quick way to make sure it's settled. I'm actually not going to save that until we're back. Bye bye.

The other thing I didn't show you yet is the change log. So when I click changes here, it actually shows me what I've manipulated. And so in this case, you can hover. It will give you some bounding box dots to show I've changed the header. And then the down here is where I actually selected to expand. I'm going to delete that because I don't really want to expand, right? I just want to have changes to the header. and so now we're kind of back. Bye. To that beginning state of what I did prior.

All right. This time, let's actually set an audience to mobile only. So I'm going to, exclude desktop. Let's just verify those rules. It's device type is desktop safe. So I'm excluding desktop. So when I have, this experience. Previewed, it will, it should fail for me, right? Because I'm on a desktop computer. All right. Let's click done. We go back to our reporting view. This is where we would launch. Um, and what I actually want to do here is let's go back and preview this optimization. But I'm going to show you how to look at both what we created the first time and this one. So let's preview and continue. We get our checkbox that the headline test is running and I can actually minimize this to show you that's still running. if I click edit, the other thing that you can do here is add an experience. And so I'm going to go find my other experience that we already built together. Um, again, you can search for names. So another reason why it's super important. Then I'm going to select the act now variation. And I'm going to try to run both of these together. And so now you can actually see what does it look like for a visitor. Uh, when they, when you have more than one optimization running on the page, and they actually get served one of those two options. It's really great as well. If you wanted to see, okay, what does the base variant look like in one with the other variation of the other? So it's, it's really a quick, quick way to see what are the possible options that are shown to visitors. Um. We'll see you in the next slide. let's verify the audience actually works. So I'm going to toggle these off, which allows me to just double check. Is it actually excluding desktop? Save and reload. And notice that I only added the exclusion for one of the experiences. And so it is giving me that warning. Hey, you have an audience mismatch. you don't fit the criteria. So we're not going to run the headline experience. And notice that we are back to the basic. or I should say the control version of the headline. The, CTA copy forever did not have any audience criteria so that actually can run. So super cool. Same thing with that preview, for our friends that are not in Webflow every day. you can create the grouping. It will load it for them. and they can always verify the same way you did what the settings are in play. and proceed from there.

Amazing. Okay, so that's kind of the wrap of optimizations. notice that again, all of these are in view. It gives you a very good summary of some of the high level details, specifically what type that you've done. I know I built two AI optimized experiences, but the flow is the same. The only difference is, I'll show you quickly in a personalization. whole need an need an if we edit, you will see in the configurations tab the option to actually reorder the, p- way of priority. So essentially our personalization works in a waterfall fashion. so if I actually wanted mobile only to be the priority rule, I would brag that to the top. otherwise you still have a baseline, the default will be your control. It's a catch-all for all visitors who do not fit. Do you know this is? Is or right? The audience criteria that you have in play. otherwise, uh, the build process is exactly the same. You actually select an audience first, but then you manipulate the page the same way you did before. and then similarly with our test optimization, it is going to allow you to set a, breakdown between the variation. So in this case, I have, Again, another headline experience. We would not run these at the same time. but you have our base variation and our, our, our created variation. If I go to configuration, you will see a traffic allocation area where I could say, hey, you know what? I don't want to run these 50-50. I would prefer to give more traffic to my test variant. So I am going to alter this. As long as it equals 100, you will be able to proceed. So now I'm shifting more traffic to the variation I created, essentially running a quicker test. Let me get more data on if this variation is working. If you wanted to reverse that and say, well, it's run 70% here and 30 here, you're essentially reducing the risk of the variation and serving more traffic to the base variant.

Otherwise, all the steps that I shared are, The same through building with the variation. You still have to select the, the type where, how you want to enter the page that you want to optimize on, the type of optimization that you want to proceed with. The element selector is forever important. and you have the flexibility to set up goals, reuse, components that you've already built, and proceed from there. Hopefully, this was really helpful to get you started. Um. you I highly recommend just building something for fun. You never have to launch these if you don't want to. Just get yourself familiar with how to use the visual editor, um, and become familiar with the different settings that you have at your disposal. Thanks so much! Thank you very

</details>