Hi everyone, I'm Krista Seiden,
Analytics Advocate at Google, and today I'm joined
by Jon Mesh, who is a Product Manager
Google Optimize. In this Quick Tip video
Jon is going to go into detail about
using the Optimize Editor to do some
really advanced edits. Now, if you missed
our prior Quick Tip video on navigating
the interface and using the editor,
I would highly recommend checking those
out because that's going to give you a
good overview before you go ahead and
jump into these advanced tips.
So with that, I'm going to go ahead and hand it over to Jon.
Great. Thanks Krista.
So let's go ahead and dive right in.
I want to get some quick things out of the way.
Now one of the first things I
want to show you here is that this top
right here there's a couple of buttons here.
This first is the interactive mode.
Now interactive mode is really useful if
you need to navigate around your site.
For instance, if you have a particular
part of your flow that's hard to get to
just by typing in the URL.
So that's a really useful thing to use right there.
I'm actually going to go back to the main page.
The other thing that I want to show you in
that particular right corner is this
little settings dialog. Now this settings
dialog is used for moving elements.
Now by default what we've tried to do here
is make it really reliable and easy and
simple for people to move things around
on the page so to show you what that
looks like if I want to just drag this
particular button over to the left side,
we made that really easy so that I
haven't broken the page or done anything
too problematic with it.
I'm going to undo that and show you what that looks
like when I change that for move anywhere.
And you'll see a couple of
interesting things here so first of all
if I move this out of the way I've just
moved the text; I haven't actually moved
the whole element. And you can see
why we kind of made that not the default option.
So we want to make sure that
you're successful, but we also want to
give the power to people who really want that.
So what I'm going to do here
instead is use our hierarchy bar here to
select a larger container,
in which case I can move that a little bit more easily.
Now it's going to still be behind that
particular banner there so we're just
going to move toward the center.
Ok.
So that's the settings dialog and
there's a couple of other detailed
controls there you can read about in our Help Center.
Next thing I want to focus on
is this hierarchy bar up here.
Now you can see as I'm clicking around that's
changing depending on what element I'm on,
but it's not just for showing you the
hierarchy of the page, it actually helps
you navigate that page as well.
So you can see here that I can actually click
higher up in this hierarchy to see
different sizes of elements.
I can also go back down if I need to get to a
particular thing that's a little bit
lower so maybe I want to go down here
and move this down or something like that.
But beyond selecting that I can
actually go even deeper.
I'm going to go into this advanced selection dialog over
here, and here you can see that I've got
that same selector, and I can do things
like change the options here of based on
how my site and structured,
or I can actually go and just type in
more selectors or different kind of selector here,
and then add any of the changes
that I want to add.
So that's selection.
There's one more thing I do want to show
you about selection and that's our
multi-select capabilities.
So we're going down to the bottom of the page and I'm
actually undo that change. Now, I want to
change these product titles down here at
the bottom to be a little bit larger.
Now I can do that one of the time but
instead what I'm going to do is just
hold shift like you would expect many
other word processing programs,
and you can see here I've got a select similar.
Now what that's going to do when I click that
is actually choose the selector
that helps grab all of those different
pieces, and we try to do again a really
good job of helping you be more
efficient and quick at making these edits.
Once I do that I can very easily
just go ahead and change that to a
larger size for all three of those at
one time, no problem.
Ok, let's move on to editing
now that we've covered selection.
The first thing I want to cover with editing
is actually our CSS editor.
Now that's this icon up here.
I can go here and you'll see a couple changes that
already show up in this particular dialogue and
these are the changes that I just made
with the WYSIWYG editor.
So I can go back and I can change those a little more
detail, or I can add new ones.
Now these aren't just applied at the element level,
they're actually applied at the top
of the page as the page is loading, and
that means that you're less likely to
encounter flicker when you're running your tests.
You can in the change dialogue
actually choose to run that on
the element level as well if you want them.
So that's the CSS dialogue.
Next I want to show you what it looks like to
insert HTML. Now my developer gave me
some code here to add sort of a lightbox
popup we're going to do here is just
grab any old element and insert this
HTML by copying and pasting that.
And I actually have this control of whether I
want to append that or insert that
before after exactly how I want to deal with that.
So you can see, there we go,
that's the new element that just came up,
and then I can just deal with that as
they did for any other element, I can
change the size and etc.
Now what happened when I just change that size
though is if we look at our change list
is actually added another style there,
and I didn't really want to do that,
I wanted to be a little more performance.
So I'm going to undo that change and go
back and change the actual HTML that I added.
So I can edit that change right here
And just go ahead and type in the new
height that I want for that dialogue.
Ok. And that's fixed up,
No problem. So you can see there that's
where you can edit all of your different
changes or delete some of the ones that
you don't particularly want, things like that.
Finally I want to cover adding
javascript to this page. So if there's a
script that you want to run that might
do something more advanced than the
editor or maybe there is something that
specific to your site that you want to run,
it's very easy to add that, and it's not
just at the top or the bottom of the
page that you can run that, you can
actually run that anywhere you want.
So maybe you wanted to do something like
add a scrolling, you know,
light box or something like that on top of these
images and you want to do that right
after maybe this larger container has loaded.
So I'm going to select that,
and I'm going to run JavaScript, and I'm
going to run that right after the
closing tag. And then I could add
whatever script that I wanted to, to be
able to make that light box and that
kind of scrolling behavior appear.
So that's how you can add javascript here to your tests.
Ok, so that's all of the editing functionality.
the last thing that I want to cover is the validation.
Now one of the key parts
of validation is again always looking at
what this looks like on a different
device so let's go ahead and go over to
a Nexus 7 and see what that looks like on a tablet.
Now in this particular case
it looks like everything's turned out
pretty well, but looks like that
move anywhere command that I ran kind of
overlaps with some of my other texts so I
maybe need to go back and tweak that a little bit.
And I could do that right here as well.
No problem.
The other thing that is
really important to note about this is
it's not just screen size.
Many of you who have apps might want to run a
particular promotion for that app based
on the operating system, and what we're
doing here is actually using Chrome
development tools to change the user
agent of this particular page as it's
loading, so the server actually thinks
this is an Android tablet.
So there's some pretty advanced stuff that we've
done there.
Ok, so that's one step of validation, and the
last thing that I wanted to cover is
this other little dialogue right up here
this is our Diagnostics dialogue.
And you can see in this particular case,
the page was modified after the initial load.
Now don't get too scared off by that, that's
very common in a javascript-based environment,
but what's really important about this is
it's good to check this test not only in
the editing different modes in the
mobile editing mode here, but also in preview mode,
and to make sure that that's the highest
fidelity representation you can see
exactly what your test is going to look like
on your page.
Ok, that's a quick tour of all the
advanced features of the editor. Thanks so much.
Great. Thank you Jon.