When to use custom code, shared code, project Javascript, and extensions
- Optimizely Web Experimentation
- Optimizely Personalization
Optimizely Web Experimentation lets you use custom code, shared code, or project JavaScript to make powerful changes to your site and extend your testing capabilities even beyond Optimizely's standard toolkit.
You could use them to track certain specific metrics that are not included as default metric options, like scroll depth or cart abandonment.
Though they share similar objectives, project Javascript, shared code, and custom code differ in scope:
- Custom code runs at the variation level.
- Shared code runs at the experiment level.
- Project Javascript runs at the snippet and can potentially affect all experiments. Functions and variables you define exist within its own special scope but you can also define them at the Window level to be accessible globally.
Project Javascript is the first point of execution in the snippet, which means you do not have to change your native site's code to run more advanced experiments.
Custom code, shared code, and project Javascript are good solutions for these situations:
- Track unique custom events, such as scroll depth and mouse hover.
- Add API calls for custom metrics.
- Run experiments on single-page apps that execute without requiring the user to reload the page.
- Send data from Optimizely Web Experimentation to your analytics service. Custom and shared code or project Javascript are acceptable solutions for ad-hoc cases, but if this is a situation that comes up regularly, you should consider the Optimizely Web Experimentation analytics extension instead.
You can typically use any of the three options for any of the use cases listed above. Your choice should be determined by whether you are working at the variation level (in which case, use custom code), the experiment level (shared code), or at the project level (project Javascript).
Use templates
You should use templates instead for these situations:
- Reuse custom modules, like lightboxes or banners, across multiple experiments. Use editor templates.
- Manage multiple analytics integrations on the same page. Optimizely Web Experimentation's analytics extensions accomplish this goal more efficiently than writing your own code.
- Add functions to use across multiple variations and then call them with different parameters in the variation code. The better approach depends on the context. Custom code or project Javascript can be used for ad-hoc, but Optimizely Web Experimentation also provides editor templates that offer more reusable options in cases like this.
Add custom code, shared code, and project Javascript
Project JavaScript
To include project JavaScript in your project, go to Settings > JavaScript.
Shared Code
To include shared code in an experiment, select Design > Shared Code and find the Javascript tab. Paste your code in the window provided. See shared code in Optimizely Web Experimentation for more information
Custom code in a variation
To include custom code in a variation, go to the variation in the Visual Editor, select the Variation Code Editor, and find the Javascript tab. Paste your Javascript in the space provided. See custom code in Optimizely Web Experimentation for more information.
Add templates
Adding templates is more involved than adding custom code, shared code, and project JavaScript. See the developer documentation to learn more.