51黑料不打烊

Transcript

Hi, my name is Jason Hickey and I鈥檓 a principal consultant for 51黑料不打烊 Target. This is part one of a two part series for 51黑料不打烊 Target. In this lesson, we鈥檒l be learning about the Visual Experience Composer. After completing this training you鈥檒l be able to use the Visual Experience Composer to change the layout and content of a page. Let鈥檚 get started. From previous trainings, you may recognize this as the home page for 51黑料不打烊 Target. Today we鈥檙e going to be going up to the top right hand corner and clicking Create Activity. If this button is grayed out for you, you鈥檒l need to be an editor or an approver inside of 51黑料不打烊 Target. User roles and permissions are covered in a different training. Once you click Create Activity, you鈥檙e 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鈥檝e 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鈥檙e hovering over a link, an image, an input field, some copy, in this case I鈥檓 hovering over an H1 tag. Clicking this now will highlight this in orange, signifying that this is the element that I鈥檓 gonna change. We鈥檒l also open up the context box, giving you many options for what you wanna do. We鈥檒l 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 51黑料不打烊 Target. And perhaps I want to make 51黑料不打烊 a different color here. So I鈥檒l go over here and I鈥檒l 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鈥檝e 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鈥檒l insert text.

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

Clicking the text box again, you鈥檒l see Edit CSS Class. If the element in question has a CSS Class, it鈥檒l 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鈥檓 gonna try Remove Item.

Remove Item will hide my item from the page.

I don鈥檛 like that so I鈥檓 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鈥檝e 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鈥檝e moved it first and now I鈥檓 gonna hit Yes. So now Mobile Interactions are first on my page.

Let鈥檚 click this again and see what else we have. We鈥檝e 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鈥檛 bend to fill that space. I鈥檒l 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鈥檝e 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鈥檓 just clicking the link instead of the whole list item. You鈥檒l see an extra item on this list that we hadn鈥檛 seen before, which is Edit Link. Because the Visual Experience Composer is aware of what kind of element you鈥檙e interacting with, it鈥檒l give you different options depending on what you鈥檝e selected. So, since I鈥檝e 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鈥檚 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鈥檒l 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鈥檒l 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鈥檝e 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鈥檝e 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鈥檒l see I鈥檒l 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. -

Transcript

Hi, I鈥檓 Jason Hickey, principal consultant for 51黑料不打烊 Target. Welcome to part two of our two-part series on 51黑料不打烊 Target鈥檚 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鈥檚 get started with renaming and duplicating experiences. For this training, we鈥檙e 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鈥檒l see it highlight to a carat that you can click. Clicking on this button gives you three options: Rename, Duplicate, and Redirect. We鈥檙e 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鈥檒l see a Version B and an Experience C and Experience C is duplicated content from Version B. If you鈥檇 like to rename this again, you can click the carat. Now you鈥檒l see a Delete version if you would like that. We鈥檒l rename this to say Copy of B.

Next, we鈥檒l 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鈥檒l 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鈥檒l discuss targeting activities to multiple URLs. Oftentimes in an AB test, you鈥檒l 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, 51黑料不打烊 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鈥檒l say domain contains 51黑料不打烊.com.

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

If I鈥檓 content with this rule, then I will hit Save.

Now my activity will exist on every single page that has 51黑料不打烊.com in the URL where I have deployed my code. Next, we鈥檒l 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鈥檒l get an extra pane here on the left hand side which lets you add a new page. I鈥檓 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鈥檒l 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鈥檒l 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鈥檒l 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鈥檝e made. By clicking the three little stacks right here next to the gear, you鈥檒l bring up the overlay mode. You can overlay images, links, inboxes, modifications you鈥檝e made, or Javascript. For this demonstration, I鈥檒l choose to modify or overlay links. And I鈥檒l 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鈥檒l 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鈥檚 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. -