More Related Content

Similar to Optimizely Developer Showcase(20)


More from Optimizely(20)


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  
  2. Test  Big,  Test  Fast   Chris  Moen     @bigfrontend  
  3. Tes0ng  Major  Varia0ons  on  Page  Load   VS  
  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      
  7. HOW  TO:  Offer  Major  Varia0ons   VS  
  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)    
  14. Simple  and  Precise  Targe0ng      
  15. Relevant  Global  Segments      
  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. Tes/ng  asynchronous  features  at   Bleacher  Report   Peter  Has/e   @sillypog  
  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. Tes0ng  resulted  in  increased  social   conversions  
  20. 746%  increase    March  2013  vs  July  2012  
  21. Tes0ng  the  social  promo  
  22. Our  baseline  promo  
  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);   –'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. Tes0ng  complex  features  
  28. More  promo  types   Base   Popup   Flyin   Footer  
  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. 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. Useful  prac0ces  and   Implementa0on  details  
  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. Ac0va0on  data  file   [! {! “name”: “Facebook_PopupHeat”,! “experimentId”: 123456789,! “activationEvent”: “OpenedFacebookLikePopup”,! “trackEvents”: “--- n- PopupConversionn”! }! ]!
  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.  
  36. Q  &  A  
  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