Adrian Gregory, Success Growth Team Lead at Optimizely
Peter Hastie, Front-end Developer at Bleacher Report
Chris Moen, Lead Web Developer at CityPASS
The Developer Showcase highlights useful tips and tricks directly from developers using Optimizely.
The session is moderated by Adrian Gregory, Success Growth Team Lead at Optimizely, and features Peter Hastie, Front--end Developer at Bleacher Report, and Chris Moen, Lead Web Developer at CityPASS, sharing how they've used advanced features in the editor and the Optimizely API to run more dynamic tests and improve performance on their site.
The covered features include:
-Testing content that appears after page-load
-Getting the most of your goals with custom events
-Testing an entire new page layout without redirects
-Getting the most of the Global CSS & Global JS
-Implementing code for efficient targeting, tracking, and segmenting
MuleSoft Online Meetup Group - B2B Crash Course: Release SparkNotes
Optimizely Developer Showcase
1. Adrian
Gregory
Op/mizely
Success
Growth,
Team
Lead
Chris
Moen
City
Pass
Lead
Web
Developer
@bigfrontend
Peter
Has/e
Bleacher
Report
Front-‐end
Developer
@sillypog
Developer
Showcase
4. Why
Rock
the
Boat?
• Big
difference
in
user
experience
=
big
difference
in
user
behavior
• Evolving
vs.
Redesigning
– Keep
designers
engaged
• Op/mizely
is
fast!
5. Useful
Prac0ces
TEST
ON
THE
DEFAULT
PAGE
URL
• Avoid
Redirects
• Keep
your
SEO
guy
happy
6. Useful
Prac0ces
CONSIDER
MULTIPLE
PAGES
• What
are
the
implica/ons?
• Follow
the
experience
CONSIDER
MULTIPLE
DEVICES
• Don’t
just
be
responsive
• Segment
device
types
8. <div>ide
and
Conquer
• Iden/fy
blocks
to
be
replaced
with
new
content
• Use
id’s
for
faster
Javascript
9. Global
CSS
• Use
for
basic
block
layout
with
varia/on
classes
10. Global
CSS
• Ac/vate
varia/on
classes
in
varia/on
code
11. Replace
Blocks
with
Ajax
• jQuery.load
with
callback
init
• Facilitates
dynamic
varia/on
content
• Re-‐display
block
in
callback
12. Replace
Blocks
with
Ajax
VARIATION
FILE
• Keeps
new
code
all
in
one
place
• Keep
in
your
codebase
• Minimizes
extra
hp
requests
• Ajax
request
URLs
will
cache
13. Use
your
<head>
SET
UP
FOR
SUCCESS
• Give
Op/mizely
something
to
work
with
• Invaluable
for
targe/ng
and
segmen/ng
• (and
all
of
your
other
interface
JS)
16. Takeaways
• Run
big
tests
on
mul/ple
pages
and
devices
• Keep
things
simple
in
Global
CSS
and
Varia/on
Code
• Replacing
content
with
Ajax
gives
you
dynamic
possibili/es
• Give
Op/mizely
something
to
work
with
by
se`ng
global
variables
18. Bleacher
Report
funnel
conversion
project
Bleacher
Report
is
a
leading
sports
media
site.
Goal:
diversify
traffic
and
increase
repeat
visits.
Strategy:
increase
social
network
“likes”.
Rapid
itera/on
using
Op/mizely.
23. Social
promo
popup
• Loaded
via
ajax
aeer
30
seconds
on
page.
• Inserted
to
page
via
jquery.lightbox
plugin.
• Shown
once
Facebook
widget
has
rendered.
• Context
specific
text
and
social
link.
24. Preserving
context
with
global
data
BR = BR || {};!
BR.facebook_like_popup_data = BR.facebook_like_popup_data || {longname:''};!
!
$("#facebook-content > p").html(!
"Like B/R's <span class="team-color">”!
+ BR.facebook_like_popup_data.long_name + !
"</span> Facebook Page to the Get the Latest News”!
);!
25. Using
manual
ac0va0on
to
test
on
impression
• Don’t
want
to
run
experiment
on
pages
where
users
don’t
see
the
popup.
– Conversion
rate
was
ini/ally
very
low:
0.4%.
– Would
skew
conversion
rates
lower.
• Ac/vate
the
experiment
in
response
to
impression
event.
– window[‘op/mizely’].push([“ac/vate”,
123456789]);
26. Using
custom
events
to
track
social
widgets
• Social
buons
served
through
iFrames.
• Can’t
detect
click
on
these.
• Social
APIs
provide
callbacks:
– FB.Event.subscribe('edge.create’,
callback);
– twr.events.bind('follow',
callback);
• Use
these
to
fire
consistent
event
off
window.
• Op/mizely
goal:
custom
events.
• Also
applies
to
immediately
ac/vated
tests.
• window.optimizely.push(['trackEvent', ‘PopupConversion’])
32. Keeping
the
code
clean
• Aggregate
references
to
window[‘op/mizely’].
– what
if
it
changes?
• Remove
hard
coded
experiment
numbers
from
feature
code.
– want
to
manage
these
easily.
• Try
using
Global
Javascript
for
this.
34. Linking
window
events
to
experiments
Window
Promo
AB_Tester
w Promo
triggers
window
events
used
for
ac/va/on
and
tracking
Op/mizely
y API
calls
aempt
to
ac/vate
experiment
or
track
events
Popup
html
v Popup
html
loads.
x AB_Tester
pairs
events
with
enabled
experiments
Experiments
json
u
Listeners
added
to
window
object.
35. Takeaways
• Get
familiar
with
the
Op/mizely
API
and
the
optimizely
object.
• Avoid
dilu/ng
your
goals
by
using
manual
ac/va/on.
• Consider
the
order
of
events
when
se`ng
variables
in
varia/on
code.
• Don’t
make
your
site
dependent
on
your
tes/ng
service:
have
defaults
and
separa/on
of
concerns.
38. Adrian
Gregory
Op/mizely
Success
Growth,
Team
Lead
Chris
Moen
City
Pass
Lead
Web
Developer
@bigfrontend
Peter
Has/e
Bleacher
Report
Front-‐end
Developer
@sillypog
Developer
Showcase