Do (10x) more with extensions
Download as PPTX, PDF0 likes307 views
The document outlines a workshop on using extensions in Optimizely, highlighting their benefits such as reusable templates and ease of configuration for non-technical users. It includes detailed instructions on creating extensions, customizing them with HTML, CSS, and JavaScript, and integrating them with content management systems and external APIs. The workshop covers various levels, from beginner to advanced, with practical examples and takeaways emphasizing the effectiveness of extensions in streamlining experimentation.
Do (10x) more with extensions
- 2. Do (10x) More with Extensions! Martijn Beijk Director Solutions Engineering EMEA, Optimizely David Sertillange Senior Solutions Architect, Optimizely Hiltsje Smilde Solutions Architect, Optimizely Bradley Taylor Senior Front End Engineer, Optimizely Bryce Wellington Front End Engineer, Optimizely
- 3. 1. Introduction 2. Workshop a. Starter - banner b. Advanced I - CMS c. Advanced II - API 3. Closure
- 5. Extensions - Overview 1. Reusable templates 2. Built by developers using HTML, CSS and JavaScript 3. Configured by non- technical users on a per- experiment basis 4. Extensions streamline experiment creation and reduce code duplication
- 6. 1. Show a banner 2. Integrate with external APIs 3. Help marketers to leverage complex behavioral call to actions without writing any code 4. Integrate with your content management system Extension Examples
- 7. Extension – Components • Fields • HTML • CSS (optional) • Apply JS • Reset JS
- 8. Fields 1. Provide an interface that allows non-technical users to configure extension 2. Users provide values for variables used by your code 3. Field types: 1. Selector 2. Text 3. Number 4. Dropdown 5. Color 6. etc. 4. Referenced in code using mustache syntax: {{ extension.FIELD_API_NAME }}
- 9. HTML 1. Provides the structure of the Extension 2. Can reference Field values 3. Define optimizely-extension-instance for easy removal via Reset JS. 4. Reference fields using mustache syntax: {{ extension.FIELD_API_NAME }}
- 10. CSS 1. Extensions may inherit CSS styling from the page where it is included, but you can optionally define CSS styles 2. Use standard CSS file syntax 3. Does not support Field values 4. CSS gets appended to the <body> of the document using <style> tags and jQuery. 1. Use double-quotes (“”) for any strings
- 11. Apply JS 1. The JavaScript which inserts the HTML into a page (reference using extension.$html) 2. Can use utilities and other Optimizely helper modules and page variables to assist in development
- 12. Reset JS 1. The JavaScript which runs to remove the Extension 2. Used in the visual editor and when using dynamic page activation 3. Use extension.$instance (unique id randomly generated for each instance of the Extension on a page)
- 13. Using the Extension 1. Enable the extension before adding it to an experiment 2. The step of enabling makes sure you can never use an extension that’s still in development
- 14. Adding to Experiment 1. The extension becomes available as an extra feature in the visual editor. 2. When you add the extension you can configure the editable fields. 3. You can make multiple variations by adding the extension with different values for the editable fields.
- 15. Workshops
- 16. Starter For everyone who has never used extensions before For everyone interested in using an extension for CMS integration For everyone interested in making behavior or external API calls with an extension Advanced I Advanced II
- 17. Starter
- 18. Create a New Base Extension 1. In the ‘Implementation’ tab under ‘Extensions’ click on ‘Create New’ ‘Editor Extension’ 2. Give the extension a name, editor URL, and description
- 20. Add a New Text Field 1. Add a new text field (one line) by clicking ’Add’ on the left. 2. Give it a label and an API name.
- 21. Add New Field to HTML 1. Reference the new field in the HTML using mustache syntax: {{ extension.FIELD_API_NAME }}
- 22. Add Another Field 1. Add another field that enables you to change the style of the extension 2. For example a dropdown
- 23. Changing Style 1. Add a style tag in the HTML 2. Reference the new field in the HTML using mustache syntax: {{ extension.FIELD_API_NAME }}
- 24. Q&A
- 25. Advanced I
- 26. Advanced Workshop: Grab Content from CMS to an Extension • Help the attendees understand the power of extensions when used with an API • Fetch content from CMS and render extension asynchronously • Deconstruct extension from optimizely.com
- 27. Extension Configuration • Use Contentful’s Content Delivery API, a read-only API for delivering content. • Content is delivered as JSON data, and images, videos and other media as files. • Client-side JavaScript SDK • Extension fields to build API query
- 28. Extension Configuration • Gather query values • Make API request • Pass response to $render to compile
- 29. Advanced II
- 30. Advanced Workshop: Weather-Specific Call- to-Action • Help the attendees understand the power of extensions when used with an external API • Demonstrate how extension developers can allow deep customization of the added elements with Fields
- 31. Advanced Workshop: Personalization Only: Behavior API • Leverage Optimizely Personalization to capture visitor behavior data • Discover how to use your visitors behavior information to create personalized experiences • Learn how editable fields can be used to work with your extension code and configuration
- 32. Closure
- 33. Takeaways • Extensions are re-usable templates that make running experiments easier. • Keep using extensions! • Send this to your developers: • https://github.com/optimizely/addons-library
- 34. Thank you!