Use the Visual Experience Composer in Adobe Target

Hi, my name is Jason Hickey and I’m a principal consultant for Adobe Target. This is part one of a two part series for Adobe Target. In this lesson, we’ll be learning about the Visual Experience Composer. After completing this training you’ll be able to use the Visual Experience Composer to change the layout and content of a page. Let’s get started. From previous trainings, you may recognize this as the home page for Adobe Target. Today we’re going to be going up to the top right hand corner and clicking Create Activity. If this button is grayed out for you, you’ll need to be an editor or an approver inside of Adobe Target. User roles and permissions are covered in a different training. Once you click Create Activity, you’re going to have a series of options. This is lesson is going to focus on AB Test. Click AB Test and a form box will pop up asking you to enter a URL. Here, you can enter the URL where you want to run your AB Test. Once you’ve got a URL in mind, click Create Activity.

Now your website will be loaded into the Visual Experience Composer. The first thing you might notice is as I move my mouse around a blue box follows me. This box is context sensitive and it knows if you’re hovering over a link, an image, an input field, some copy, in this case I’m hovering over an H1 tag. Clicking this now will highlight this in orange, signifying that this is the element that I’m gonna change. We’ll also open up the context box, giving you many options for what you wanna do. We’ll go through these now. The first option is Edit Text HTML. By clicking Edit Text HTML, I open a What You See Is What You Get, or WYSIWYG HTML editor. Here, I can make my changes. So right now, I will say modified by Adobe Target. And perhaps I want to make Adobe a different color here. So I’ll go over here and I’ll say text color and I wanna make this a green color and maybe I wanna make all of this Comic Sans.

Now I can hit Done.

Now you can see the change in action.

If I click this again, I can look at the other things that I can do, so below Edit Text HTML, I can edit the background color. Clicking Edit Background Color gives me a color picker pop up. I can access some predefined colors here and you can see them change in real time to my right as I make these changes, I can also do an RGBA or a Hexadecimal color.

Once I’ve found the color that I like I can hit Done.

Clicking here again, will let me give other options. I can Insert an Element. By clicking Insert Element, I can say insert an image, HTML or text. For now I’ll insert text.

You can see this inserted text inherit the style of the previous text and it shows up below. I don’t like that so I’m going to click Undo.

Clicking the text box again, you’ll see Edit CSS Class. If the element in question has a CSS Class, it’ll show up here and you can delete it or modify it. Maybe we can browse around and see if anything has a CSS Class. Like this one. Link button. So maybe I have link button two, and can hit insert. Now you can see that the button changed from a blue button to a small, gray button.

Again, clicking into the text field, I’m gonna try Remove Item.

Remove Item will hide my item from the page.

I don’t like that so I’m gonna click Undo.

Perhaps I can scroll down here though, and figure out something that I wanna remove.

Like this box. Remove item. So now you can see I’ve removed one item from this list of items. Other things we can do are rearrange. So if I click this container again, and I say rearrange, I can now grab this item and move it wherever I want to on the page. So maybe I think that Mobile Interaction is what I want to highlight, I want that first on the page, I’ve moved it first and now I’m gonna hit Yes. So now Mobile Interactions are first on my page.

Let’s click this again and see what else we have. We’ve talked about Remove Offer but what about Hide Item. So if I hide an item instead of remove it, the rest of the page won’t bend to fill that space. I’ll just have white space here instead. This makes Remove or Hide a valid option, depending on what you wanna accomplish.

Rearrange can also be useful in navigation items. So you can see here I’ve highlighted a list item and I can say Rearrange and maybe I want Top Optimization Tips to be the second thing on this list, I can drag it from the fourth spot to the second spot and hit Yes.

In addition to this, if I click this, now I’m just clicking the link instead of the whole list item. You’ll see an extra item on this list that we hadn’t seen before, which is Edit Link. Because the Visual Experience Composer is aware of what kind of element you’re interacting with, it’ll give you different options depending on what you’ve selected. So, since I’ve selected a link here, I have the opportunity to edit this link. So right now this link is going to Optimization Tips, but I could make this go to Google.com if I wanted to, just by changing the URL right here. Google.com. And I could hit Insert.

So now this link will take me to Google.com.

Let’s talk about a couple other things that we can do with the Visual Experience Composer. Going back up to this text box that I illustrated earlier if I click this text, now I get Resize and Move. So maybe I wanna make this box a little bit bigger. If I click Resize here, you’ll see that I get a width and a height as well as a drop down here where I can make this a big or as small as I want. So, maybe I wanna have this just a little bit bigger, and I’ll click OK.

In addition to making bigger or smaller, you can also move an element on a page, so again by clicking Move here instead of Resize, now I’ve got an XY coordinate and I can drag my item anywhere that I want to on the page. So maybe I want it to go centered again or maybe I want to align down here to the bottom left instead. So now, I can hit OK.

Lastly in the Visual Experience Composer, if you click an item, and you decided that you’ve clicked the wrong selection or you wanna go above and have a bigger selection, the last item here is Expand Selection. So if I Expand here, you’ll see I’ll go from highlighting text, to highlighting an H1, to highlighting the entire header, to highlighting the entire page. So if I do this I could edit the entire page.

Now you should be able to use the Visual Experience Composer to change the layout and content of a page. Please stay tuned for part two, where we cover more advanced options. -

Hi, I’m Jason Hickey, principal consultant for Adobe Target. Welcome to part two of our two-part series on Adobe Target’s Visual Experience Composer. After this training, you will be able to rename and duplicate an experience, create a redirect experience, target an activity to a single URL or a group of URLs, create a multi-page activity, use the mobile viewport feature to preview and build experiences for responsive websites, and use our overlay feature to highlight certain types of elements. Let’s get started with renaming and duplicating experiences. For this training, we’re going to start with the Visual Experience Composer already open and content already modified. If you need a refresher on how to do this, you can refer to part one of our training. To rename or duplicate an experience, take your mouse and move it over to the left part of your screen, where you see Experience A and Experience B, or the A and the B. When you hover over the B, you’ll see it highlight to a carat that you can click. Clicking on this button gives you three options: Rename, Duplicate, and Redirect. We’re gonna start with Rename and Duplicate. Hitting Rename opens up a configurable text box where you can change this experience to be named whatever you want. I can say Version B instead of Experience B and click out of this box to have it save. I could also do the same for Experience A and change this to say Control or maybe Default.

To copy an experience, again, click the carat and say Duplicate.

Now you’ll see a Version B and an Experience C and Experience C is duplicated content from Version B. If you’d like to rename this again, you can click the carat. Now you’ll see a Delete version if you would like that. We’ll rename this to say Copy of B.

Next, we’ll cover creating redirect experiences. Back in the Visual Experience Composer, you can add a new experience by clicking this plus sign and saying Add Experience. Now I have Experience D with no changes on it. Clicking the carat again gives you Redirect to URL. By clicking this option, you get to enter a URL field here, so I can enter a website.

Google.com. And there is an option to say Include the Current Query Parameters. You can decide to check or uncheck this box depending on your business needs. Hitting Save makes this page uneditable with the Visual Experience Composer. You’ll see a success message that says your page has been redirected to Google.com and no longer can I click around and open up context boxes. Moving back to Version B or the Copy of B, you can see I can still use my visual composer and edit things as I wish.

Next, we’ll discuss targeting activities to multiple URLs. Oftentimes in an AB test, you’ll want your page to actually exist on more than one page. Maybe this is a global navigation test or a free shipping banner or something else entirely.

On the top right of the Visual Experience Composer, you will see some options. Click the gear and then click URL to open up the URL configuration. By default, Adobe Target only includes the original URL that you intended to use where the activity should appear. If you want your activity to appear on more than one URL, click Add Additional Pages or sections that represent the same URL.

And click Add Rule. Here, you can add extra URLs, domains, paths, hash fragments, queries, or parameters. I think that I want this task to be on the same page of every single site, so I’ll say domain contains Adobe.com.

You can add rules to this if you want as well.

If I’m content with this rule, then I will hit Save.

Now my activity will exist on every single page that has Adobe.com in the URL where I have deployed my code. Next, we’ll discuss the concept of a multi-page activity or a journey test. Unlike adding multiple URLs, where the change exists in the same spot across the whole site or a template, adding additional pages lets you follow a user across their journey on your website, where the changes might be in different spots or they might be different changes entirely. By clicking Add Additional Pages, you’ll get an extra pane here on the left hand side which lets you add a new page. I’m gonna add this demo page URL and call this the Demo Page. By clicking Continue, I get a fresh Visual Experience Composer on the Demo Page, and I can make any changes that I want. And these changes will still be a part of my copy of the experience here. So perhaps I wanna make this change and say Continued Experience from previous page.

And hit Done.

I can swap back and forth between my pages and I can swap back and forth between my experiences.

Next, we’ll talk about mobile viewports, which lets you design for responsive websites. Many modern websites use responsive web design tactics to give a seamless user experiences across all devices. You can plan ahead for this in the visual composer by using our mobile viewports. Again clicking the gear, Add Mobile Viewports. I have already preconfigured a couple of mobile viewports to get us started. Now you’ll see a third pane here where it says viewports. If I click viewports now, I can add the iPhone 6 and the iPad.

Now the Visual Experience Composer can seamlessly switch between our desktop mode, my iPad mode, and my iPhone 6 mode. And now you can see how the site will change. At this breakpoint of the iPhone 6, you lose part of the form, where it goes into a responsive design. This is very useful for making sure that your tests work in every single breakpoint that your site has to support.

Lastly, we’ll cover using the Visual Experience Composer overlay to highlight certain elements. The overlay feature of the Visual Experience Composer lets you highlight certain elements and color code them so you can find them more easily or understand what modifications you’ve made. By clicking the three little stacks right here next to the gear, you’ll bring up the overlay mode. You can overlay images, links, inboxes, modifications you’ve made, or Javascript. For this demonstration, I’ll choose to modify or overlay links. And I’ll overlay them with an orange color. Up in the right hand corner, you can see an Apply button to turn this on. And as I hit Apply, you’ll find that all the links on the page, of which here there are two, have now been overlaid so I can find them most easily or see what’s been done. To turn this off, click the overlay button again, turn it off and hit Apply again. By now, you should be able to rename and duplicate an experience, create a redirect experience, target an activity to a single URL or a group of URLs, create a multi-page activity for journey testing, use the mobile viewports feature to preview and build experiences for responsive websites, and use the overlay feature to highlight certain types of elements. -