Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Adrian	
  Gregory	
  
Op/mizely	
  
Success	
  Growth,	
  Team	
  Lead	
  
Chris	
  Moen	
  
City	
  Pass	
  
Lead	
  Web	...
Test	
  Big,	
  Test	
  Fast	
  
Chris	
  Moen	
  
	
  
@bigfrontend	
  
Tes0ng	
  Major	
  Varia0ons	
  on	
  Page	
  Load	
  
VS	
  
Why	
  Rock	
  the	
  Boat?	
  
•  Big	
  difference	
  in	
  user	
  experience	
  
=	
  big	
  difference	
  in	
  user	
 ...
Useful	
  Prac0ces	
  
TEST	
  ON	
  THE	
  DEFAULT	
  PAGE	
  URL	
  
•  Avoid	
  Redirects	
  
•  Keep	
  your	
  SEO	
 ...
Useful	
  Prac0ces	
  
CONSIDER	
  MULTIPLE	
  PAGES	
  
•  What	
  are	
  the	
  implica/ons?	
  
•  Follow	
  the	
  exp...
HOW	
  TO:	
  Offer	
  Major	
  Varia0ons	
  
VS	
  
<div>ide	
  and	
  Conquer	
  
	
  
	
  
•  Iden/fy	
  blocks	
  to	
  be	
  
replaced	
  with	
  new	
  content	
  
•  Us...
Global	
  CSS	
  
•  Use	
  for	
  basic	
  block	
  layout	
  with	
  varia/on	
  classes	
  
Global	
  CSS	
  
•  Ac/vate	
  varia/on	
  classes	
  in	
  varia/on	
  code	
  
	
  
Replace	
  Blocks	
  with	
  Ajax	
  
•  jQuery.load	
  with	
  callback	
  init	
  
•  Facilitates	
  dynamic	
  varia/on...
Replace	
  Blocks	
  with	
  Ajax	
  
VARIATION	
  FILE	
  
•  Keeps	
  new	
  code	
  all	
  in	
  
one	
  place	
  
•  K...
Use	
  your	
  <head>	
  
SET	
  UP	
  FOR	
  SUCCESS	
  
•  Give	
  Op/mizely	
  
something	
  to	
  work	
  with	
  
•  ...
Simple	
  and	
  Precise	
  Targe0ng	
  
	
  	
  
Relevant	
  Global	
  Segments	
  
	
  	
  
Takeaways	
  
•  Run	
  big	
  tests	
  on	
  mul/ple	
  pages	
  and	
  devices	
  
•  Keep	
  things	
  simple	
  in	
  ...
Tes/ng	
  asynchronous	
  features	
  at	
  
Bleacher	
  Report	
  
Peter	
  Has/e	
  
@sillypog	
  
Bleacher	
  Report	
  funnel	
  conversion	
  project	
  
Bleacher	
  Report	
  is	
  a	
  leading	
  sports	
  media	
  s...
Tes0ng	
  resulted	
  in	
  increased	
  social	
  
conversions	
  
746%	
  increase	
  
	
  March	
  2013	
  vs	
  July	
  2012	
  
Tes0ng	
  the	
  social	
  promo	
  
Our	
  baseline	
  promo	
  
Social	
  promo	
  popup	
  
•  Loaded	
  via	
  ajax	
  aeer	
  30	
  seconds	
  on	
  page.	
  
•  Inserted	
  to	
  pag...
Preserving	
  context	
  with	
  global	
  data	
  
BR = BR || {};!
BR.facebook_like_popup_data = BR.facebook_like_popup_d...
Using	
  manual	
  ac0va0on	
  to	
  test	
  on	
  impression	
  
•  Don’t	
  want	
  to	
  run	
  experiment	
  on	
  pag...
Using	
  custom	
  events	
  to	
  track	
  social	
  widgets	
  
•  Social	
  buons	
  served	
  through	
  iFrames.	
  
...
Tes0ng	
  complex	
  features	
  
More	
  promo	
  types	
  
Base	
  
Popup	
  
Flyin	
  
Footer	
  
Varia0on	
  code	
  overrides	
  defaults	
  
// Block runs on script load!
BR.getNamespace('BR.testing.features.social_pr...
Set	
  values	
  through	
  varia0on	
  code	
  
/* _optimizely_evaluate=force */!
BR = BR || {}; // Must not declare with...
Useful	
  prac0ces	
  and	
  
Implementa0on	
  details	
  
Keeping	
  the	
  code	
  clean	
  
•  Aggregate	
  references	
  to	
  window[‘op/mizely’].	
  
– what	
  if	
  it	
  cha...
Ac0va0on	
  data	
  file	
  
[!
{!
“name”: “Facebook_PopupHeat”,!
“experimentId”: 123456789,!
“activationEvent”: “OpenedFac...
Linking	
  window	
  events	
  to	
  experiments	
  
Window	
  
Promo	
   AB_Tester	
  
w  Promo	
  triggers	
  
window	
...
Takeaways	
  
•  Get	
  familiar	
  with	
  the	
  Op/mizely	
  API	
  and	
  the	
  
optimizely	
  object.	
  
•  Avoid	
...
Q	
  &	
  A	
  
Adrian	
  Gregory	
  
Op/mizely	
  
Success	
  Growth,	
  Team	
  Lead	
  
Chris	
  Moen	
  
City	
  Pass	
  
Lead	
  Web	...
Optimizely Developer Showcase
Optimizely Developer Showcase
Upcoming SlideShare
Loading in …5
×

of

Optimizely Developer Showcase Slide 1 Optimizely Developer Showcase Slide 2 Optimizely Developer Showcase Slide 3 Optimizely Developer Showcase Slide 4 Optimizely Developer Showcase Slide 5 Optimizely Developer Showcase Slide 6 Optimizely Developer Showcase Slide 7 Optimizely Developer Showcase Slide 8 Optimizely Developer Showcase Slide 9 Optimizely Developer Showcase Slide 10 Optimizely Developer Showcase Slide 11 Optimizely Developer Showcase Slide 12 Optimizely Developer Showcase Slide 13 Optimizely Developer Showcase Slide 14 Optimizely Developer Showcase Slide 15 Optimizely Developer Showcase Slide 16 Optimizely Developer Showcase Slide 17 Optimizely Developer Showcase Slide 18 Optimizely Developer Showcase Slide 19 Optimizely Developer Showcase Slide 20 Optimizely Developer Showcase Slide 21 Optimizely Developer Showcase Slide 22 Optimizely Developer Showcase Slide 23 Optimizely Developer Showcase Slide 24 Optimizely Developer Showcase Slide 25 Optimizely Developer Showcase Slide 26 Optimizely Developer Showcase Slide 27 Optimizely Developer Showcase Slide 28 Optimizely Developer Showcase Slide 29 Optimizely Developer Showcase Slide 30 Optimizely Developer Showcase Slide 31 Optimizely Developer Showcase Slide 32 Optimizely Developer Showcase Slide 33 Optimizely Developer Showcase Slide 34 Optimizely Developer Showcase Slide 35 Optimizely Developer Showcase Slide 36 Optimizely Developer Showcase Slide 37 Optimizely Developer Showcase Slide 38 Optimizely Developer Showcase Slide 39
Upcoming SlideShare
Bleacher report
Next
Download to read offline and view in fullscreen.

0 Likes

Share

Download to read offline

Optimizely Developer Showcase

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Optimizely Developer Showcase

  1. 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  
  2. 2. Test  Big,  Test  Fast   Chris  Moen     @bigfrontend  
  3. 3. Tes0ng  Major  Varia0ons  on  Page  Load   VS  
  4. 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. 5. Useful  Prac0ces   TEST  ON  THE  DEFAULT  PAGE  URL   •  Avoid  Redirects   •  Keep  your  SEO  guy  happy  
  6. 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      
  7. 7. HOW  TO:  Offer  Major  Varia0ons   VS  
  8. 8. <div>ide  and  Conquer       •  Iden/fy  blocks  to  be   replaced  with  new  content   •  Use  id’s  for  faster  Javascript    
  9. 9. Global  CSS   •  Use  for  basic  block  layout  with  varia/on  classes  
  10. 10. Global  CSS   •  Ac/vate  varia/on  classes  in  varia/on  code    
  11. 11. Replace  Blocks  with  Ajax   •  jQuery.load  with  callback  init   •  Facilitates  dynamic  varia/on  content   •  Re-­‐display  block  in  callback    
  12. 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. 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)    
  14. 14. Simple  and  Precise  Targe0ng      
  15. 15. Relevant  Global  Segments      
  16. 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  
  17. 17. Tes/ng  asynchronous  features  at   Bleacher  Report   Peter  Has/e   @sillypog  
  18. 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.  
  19. 19. Tes0ng  resulted  in  increased  social   conversions  
  20. 20. 746%  increase    March  2013  vs  July  2012  
  21. 21. Tes0ng  the  social  promo  
  22. 22. Our  baseline  promo  
  23. 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. 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. 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. 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’])  
  27. 27. Tes0ng  complex  features  
  28. 28. More  promo  types   Base   Popup   Flyin   Footer  
  29. 29. Varia0on  code  overrides  defaults   // Block runs on script load! BR.getNamespace('BR.testing.features.social_promo');! if (BR.testing.features.social_promo.type === undefined){! BR.testing.features.social_promo.type = 'popup’;! }! ! // Block runs on document ready event! BR.getNamespace('BR.SocialPromos').Launcher = (function($, _){! function launch(){! $(window).trigger('LaunchSocialPromo_' + BR.testing.features.social_promo.type);! }! ! $(function init(){! if (BR.facebook_like_popup_enabled && !BR.CMS){! launch();! }! });! })(jQuery, _);! Sets  default  if  not  done  by   Op/mizely  varia/on   Launch  promo  version     set  at  load  /me  
  30. 30. Set  values  through  varia0on  code   /* _optimizely_evaluate=force */! BR = BR || {}; // Must not declare with var! BR.testing = BR.testing || {};! BR.testing.features = BR.testing.features || {};! BR.testing.features.social_promo = BR.testing.features.social_promo || {};! BR.testing.features.social_promo.type = 'flyin';!
  31. 31. Useful  prac0ces  and   Implementa0on  details  
  32. 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.  
  33. 33. Ac0va0on  data  file   [! {! “name”: “Facebook_PopupHeat”,! “experimentId”: 123456789,! “activationEvent”: “OpenedFacebookLikePopup”,! “trackEvents”: “--- n- PopupConversionn”! }! ]!
  34. 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. 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.  
  36. 36. Q  &  A  
  37. 37. 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  

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

Views

Total views

962

On Slideshare

0

From embeds

0

Number of embeds

2

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×