Author a web campaign

Learn how to author a web experience using the web visual editor in Journey Optimizer campaigns.

NOTE
You must install the Adobe Experience Cloud Visual Editing Helper Chrome extension to be able to load your website into Adobe Journey Optimizer.
Transcript
Hello, my name is Robert Calangiu and I’m a product manager for Adobe Journey Optimizer. This video will show you how to author a web experience using web visual editor in Adobe Journey Optimizer campaigns. In order for you to follow along this tutorial you will need to be pre-configured and enabled for web channel on Adobe Journey Optimizer. Please check with your admin or refer to the public documentation if you have any questions. I will walk you through the web visual editor capabilities using the sample website and for this I will go to Journey Optimizer and open up an existing campaign. After I have everything set up I will hit edit content in order to author my content and this will open up a visual preview of the web page that I’ve specified. You will see the right side we have the web surface and we will have the URL for editing. If you are using a single page URL then those fields should be identical but if you want to target multiple pages and for the web surface you have a rule defining a multi-page surface then you need to specify a URL for editing that matches the surfaces. And just another note before we begin the authoring process the visual authoring for web in AGO is powered by a browser extension called Adobe Experience Cloud Visual Editing Helper. So you need to have this installed in your browser. Now let’s go forward and edit the page. I’ll start with the header so now we’re inside the editor and in the header you’ll see the web surface on the left side and on the right side we have design and browse buttons which specify the mode we’re in. We’re now on the design on the authoring mode but the browse mode is a mode you can use to navigate to the website to the page that you want to author or for example for example if you want to target specific pages that are under authentication you can use browse mode to authenticate navigate to those pages and then switch back to design mode and do the authoring. We also have the undo redo buttons which can be used to revert the changes that you don’t like. Let’s start the authoring. You can start authoring your web page using different options like the first option would be to navigate through your web page and select the elements that you want to change and then perform modifications on them or you can decide to insert different components like predefined components from the left rail. I’ll demonstrate both workflows in the next few moments. So let’s say that first I will select this hero image and I wanted to change it and I’ll go to my assets essentials which should contain all the assets I have across dx products and I’ve changed the image. Now I can see that this text and call to action is not so well aligned here and I can choose to position it more to the center of the screen. As you can see here in the properties panel you have access to a lot of settings and you can do a lot of customizations for each web element on your web page. You have even advanced options which you can use and you can also do like inline styles if you have anything in particular you would like to configure. Let’s continue to modify my website. Let’s say I want to personalize this text. For this you can see that when clicking on each web element contextual menu appears with different options and you can choose what type of action you would like to do. For this one I will add personalization. This opens our personalization editor which is common across ago channels so you’ll get access to all the profile attributes segment membership decisions and so on that you have across channels. So I want to say hi first name try out our new collection I’ll save it and next what I would like to do is I would like to click track this call to action to see how many users are clicking on shop now and I’ll give it a name a label shop now and in the reporting after I launch the campaign I will be able to see how many users hit shop now button and if I want to track something else for example I want to track how many users clicked on the main cloud I can do that as well and I can define multiple elements to be clicked on and I can define multiple elements to be clicked tracked so I can see the reporting on them let’s go back to the components and demonstrate how you can insert a new component on the page so for example I want to insert a link I click on the link on the left rail and then I need to choose where I want to place that link and let’s say I want to insert it after this text and I can say here the text link and I can paste in an url and I can modify the link I can style it and so on again the same happens with all the other components you need to click on the component and then insert it wherever you want on your website after you did your modifications if you go here on show modifications rail you’ll see what where all the modifications start to your webpage and you’ll be able to individually delete them or to do a bulk deletion once you finish your authoring process then you can go back and you can simulate the content or you can go back to the review and activate and simulate the content there and you will have the ability to have like a personalized preview using the test profile that will resolve all the profile attributes and you’ll be able to share a link with your colleagues or stakeholders so that they can view the preview as well thank you
recommendation-more-help
7e382214-bd30-4de2-bc8b-f6f6e7182305