Optimizely Developer Showcase


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

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