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 !
Recommended