optimizely for developers

Op#mizely  For  Developers

Yahel  Carmon  Director,  Insight  Products  

Blue  State  Digital  @yahelc  

James  Fox  Solu#ons  Architect  

Op#mizely  !

Overview

Op#mizely  For  Developers  • Explore  the  world  of  tes#ng  possibili#es  with  Op#mizely  for  a  full  stack  developer  • Learn  how  to  help  your  end  users  get  their  experiments  up  and  running  correctly  • Inves#gate  interes#ng  use  cases

Introduc9ons

• Solu#ons  Architect  at  Op#mizely  !• Assist  Customers  in  Advanced  

Product  Training  and  Support  !• Provide  Technical  Exper#se  and  

Consulta#on  James  Fox

Introduc9ons

• Director  of  Product  Insights,Blue  State  Digital  

• Op#mizely  User  for  almost  4  years

!•

•Worked  on  the  2012  Obama  Campaign  with  Kyle  Rush  

Yahel  Carmon

Early  Tes9ng  at  BSD

Website  Tes#ng  at  BSD  • GWO:  Major  pain.  • Op#mizely:  Started  as  simpler  solu#on    • Power  was  hidden  but  has  slowly  revealed  itself.

Op9mizely’s  Developer  Friendliness

Op#mizely’s  JSAPI  • Programma#cally  launch,detect  and  interact  with  experiment  info   (if  you  know  what  you’re  doing)  

• Integrate  with  other  data  pla[orms

Op9mizely  for  (the)  President

Obama  2012  • Integra#on  of  Op#mizely  events  into  all  tracking  scripts.  • Contribu#on  form  tests  for  every  big  email  send  • Manual  labor  reduced  by  automa#on.

Op9mizely  for  (the)  President

Final  Days  of  the  campaign  • Real-­‐#me  data  FTW.  • Discovered  major  latency  bug  thanks  to  Op#mizely  • Handled  everything  we  threw  at  it.  

Varia9on  Code  Tips  &  Tricks

What  is  Varia#on  Code?  • Javascript/jQuery  code  generated  by  Op#mizely  • Manipulates  the  targeted  page  to  look  like  varia#on  • Generated  by  Visual  Editor,  but  can  run  any  code  you  put  in  it

Timing  is  Everything

Timing  • Front  End  JS  can  change  almost  anything  • The  key  is  when  the  code  runs  • Advanced  Op#mizely  usage  means  controlling  code  #ming

Change  Dynamic  Content  w/  $.ajaxComplete

Ajax  Events  • More  and  more  content  is  changed  with  AJAX  • Execu#ng  varia#on  code  when  new  content  arrives  • jQuery  .ajaxComplete  can  let  us  listen  for  this

James  -­‐  Example  w/  $.each

Batch  Changes  • Dynamically  loaded  content  needs  to  change  correctly  • Change  one  row  in  Op#mizely  then  update  to  work  with  $.each  • Sets  of  changes  can  be  made  to  dynamic  element  

Responsive  Website  Tes9ng

CSS  Media  Queries  • Most  responsive  websites  leverage  CSS  Media  Queries    • Use  Op#mizely  to  make  different  changes  at  different  screen  widths

Desktop  -­‐  >  768  pxTablet  -­‐  >  500  -­‐  768pxMobile    -­‐  >  up  to  500  px

Responsive  Website  Tes9ng

CSS  Media  Queries  • Append  <style>  tag  to  the  body  for  different  changes  to  the  same  elements  at  the  right  page  width

Advanced  Ideas  with  New  Features

New  Features  • Experiment  API  • Programma#cally  create,  start,  stop,  update  experiments  • Example  might  be  crea#ng  and  controlling  headline  tests  in  automated  fashion

Next  Up... !

Automated Experimentation at Scale - Wojciech Galuba, Facebook

Product Deep Dive & Optimizely API - Eric Higgins, Optimizely !

Thanks  for  Coming!

Op#mizely  For  Developers

Yahel  Carmon  Director,  Insight  Products  

Blue  State  Digital  @yahelc  

James  Fox  Solu#ons  Architect  

Op#mizely  !