Optimizely for Developers
-
Upload
optimizely -
Category
Technology
-
view
107 -
download
0
description
Transcript of Optimizely for Developers
![Page 1: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/1.jpg)
Op#mizely For Developers
Yahel Carmon Director, Insight Products
Blue State Digital @yahelc
James Fox Solu#ons Architect
Op#mizely !
![Page 2: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/2.jpg)
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
![Page 3: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/3.jpg)
Introduc9ons
• Solu#ons Architect at Op#mizely !• Assist Customers in Advanced
Product Training and Support !• Provide Technical Exper#se and
Consulta#on James Fox
![Page 4: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/4.jpg)
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
![Page 5: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/5.jpg)
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.
![Page 6: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/6.jpg)
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
![Page 7: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/7.jpg)
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.
![Page 8: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/8.jpg)
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.
![Page 9: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/9.jpg)
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
![Page 10: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/10.jpg)
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
![Page 11: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/11.jpg)
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
![Page 12: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/12.jpg)
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
![Page 13: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/13.jpg)
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
![Page 14: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/14.jpg)
Responsive Website Tes9ng
CSS Media Queries • Append <style> tag to the body for different changes to the same elements at the right page width
![Page 15: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/15.jpg)
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
![Page 16: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/16.jpg)
Next Up... !
Automated Experimentation at Scale - Wojciech Galuba, Facebook
Product Deep Dive & Optimizely API - Eric Higgins, Optimizely !
Thanks for Coming!
![Page 17: Optimizely for Developers](https://reader034.fdocuments.us/reader034/viewer/2022051515/54c6334e4a7959991a8b465e/html5/thumbnails/17.jpg)
Op#mizely For Developers
Yahel Carmon Director, Insight Products
Blue State Digital @yahelc
James Fox Solu#ons Architect
Op#mizely !