Skip to main content

We are currently experiencing an issue that is preventing customers from submitting support tickets. Please contact us at (866) 819-4486 if you need immediate assistance.

x
Optimizely Knowledge Base

Initial implementation in Optimizely

This article will help you:
  • Add a snippet to your site to start running Optimizely experiments and campaigns
  • Configure your Optimizely settings
  • Implement advanced settings including: custom events, integrations, custom dimensions, first-party data, and offline conversions

Before you create your first experiment in Optimizely, you’ll perform some initial setup to prepare your program for long-term success.

Adding a small snippet of code to your site will immediately enable you start testing and personalizing. But take a little time to evaluate your site’s functionality and your team’s skill sets. Then, configure a version of Optimizely that enables you to run impactful tests and campaigns as your program matures.

Perform a light technical audit to ensure that Optimizely is set up for your site’s technical framework, staging and production environments, activation states, and more. A data audit will help you turn on the right integrations and gather data that moves the needle on the metrics that matter most to your company.

You’ll perform these tasks just once, unless major changes to your site or business model alter the technical specifications of your site.

What you need to get started:
Materials to prepare
    • Access to edit your production environment and development environment (if you have one) 
    • Optimizely snippet (or multiple snippets, if you have a development environment or you're testing multiple domains)
    • Technical audit: what technical assistance do you need to build a certain type of experiment?
        • Technology frameworks used on the site, such as Angular JS and third-party integrations
        • Technical limitations tied to KPIs
    • Data audit: what tools, team roles, and frameworks for measurement or targeting are available to you?
        • Analytics tools used on the site
        • Tracking that feeds into company KPIs

People and resources
    • Developer
    • Program manager
    • Analyst

Actions you'll perform 


Deliverables
    • The snippet on all pages
    • Results of the technical audit:
        • How the site's advanced functionality works
        • The best ways to test that functionality, for QA
    • Identify the naming conventions and technical specs for how and where everything is tracked
    • Additional code added to correct pages
        • Custom events
        • Custom tags
        • Revenue
        • Integrations
    • Implementation document
        • How the snippet is set up
        • Recommendations from the technical audit
        • Tracking conventions


What to watch out for

    • Not verifying that integrations are working correctly
    • Incorrect placement of the Optimizely snippet
    • Incorrect placement of custom event code
    • Analytics that aren't functioning as expected
 

Add the Optimizely Snippet

To start running A/B tests on your site, you'll need to add a small snippet of code to the <head> tag of your site's code. This snippet contains your unique Project ID, and it allows the experiments you create in Optimizely to execute on your site. It automatically updates to run any test you create in the Optimizely Editor. You don’t have to change a thing.

Want to see how the snippet is installed and follow along? Watch our two-minute video on snippet implementation: 


Or, read this article on implementing the snippet. Check out this article to learn more about implementing the snippet with a tag manager.

Many mature optimization teams also have access to separate staging and production environments. Separate environments can save you a headache; they reduce the risk of accidentally launching an unfinished or unverified experiment to the live site.

If you have separate environments, add a separate Optimizely snippet for each.

Perform a technical audit

When you configure Optimizely for the first time, perform a technical audit of your site to ensure that you can build the experiments and campaigns you want. Optimizely makes it easy to create a basic A/B test on your site just by adding the snippet -- but for more advanced functionality, you may need to evaluate the technical implementation of your site.

Consider: what are the technical requirements for building an experiment in Optimizely?

  • What technology frameworks are used on your site? If you use Angular, Backbone, Ember, or Knockout, you may need to change your activation mode.
  • What third-party integrations does your site use? You may be able to connect these to Optimizely.
  • What are the technical limitations tied to KPIs? Some metrics, such as in-store purchases, may be important to your business but difficult to track in Optimizely. Identify KPIs that require complex technical solutions so your team can make decisions about how to connect them to your testing program.
  • Does your team have access to separate staging and production environments? If so, you'll add the snippet to each and use these environments to perform rigorous QA.

DOCUMENT YOUR TECHNICAL AUDIT

Document the technical specifications and all initial setup in an implementation document and link it to your testing charter. Update your technical audit document whenever your Optimizely setup changes. As your testing and personalization roadmap grows, this document will help you keep track of the types of experiments you can run in each project and troubleshoot.

Collaborators

In Optimizely, users are called collaborators. Learn how to add, remove, and change user roles for collaborators on your team in this short video:


Or, read this article for more detail on managing collaborators.

Privacy settings

Many of Optimizely’s settings such as descriptive names, force variation parameters, and draft and paused experiments are useful for QA and debugging an experiment. However, you may want to turn them off to increase the privacy of your Optimizely project and comply with the law in certain countries.

In the Privacy settings you can:

  • Mask the descriptive names in client-facing code as numerical IDs
  • Enable the force variation parameter so you can force yourself to see a specific variation before you set the experiment live
  • Exclude experiments in draft and pause mode from the Optimizely JavaScript file
  • Anonymize the IP address of visitors in compliance with legal stipulations in some countries
  • Filter individual IPs or an IP range out of your experiment results

Learn more in this article about Optimizely’s Privacy settings.

Project JavaScript

Project JavaScript is an advanced configuration setting that lets you run code before the Optimizely code snippet, without having to change your native site's code. With Project JavaScript, you can run more advanced experiments that depend on reusable variables, targeting conditions, and API calls with ease and efficiency.

 
Note:

This setting is available with select Enterprise plans.


Some common use cases for Project Javascript include:

  • Tracking unique custom events, such as scroll depth and mouse hover
  • Reusing custom modules, such as lightboxes and banners, across multiple experiments
  • Running experiments on single-page apps that happen without reloading the page
  • Managing multiple analytics integrations on the same page
  • Targeting more than one experiment to the same audience

Activation mode

By default, all Optimizely experiments are evaluated as soon as the Optimizely code snippet is loaded on the page, which means that a visitor must meet URL and Audience targeting at this point in the page load. Once a visitor is bucketed into an experiment, the actual code to change any elements on the page will run as soon as those elements appear in the DOM.

Sometimes, you may want to wait until a later point in time to activate your experiment. You can do so by setting the experiment's activation mode to either Manual or Conditional.

Consider setting up manual or conditional activation if:

  • You’re testing a multi-step form, which appears in a modal and uses a “Next” button but doesn’t load a new page.
  • You’re testing a web application, which re-renders the page when visitors perform certain actions, but doesn’t re-load the page.
  • You’re testing an e-commerce site and want to run an experiment when customers modify the product.
  • You’re running an experiment that changes an object that appears at a certain scroll depth.
  • You need to run experiments on an AJAX site, where elements are dependent on ajaxComplete
  • You’re running an experiment on a site using Angular, Backbone, Ember, or Knockout.

Read more about activation modes in this article on implementing manual and conditional activation.

Advanced Implementation

Perform a data audit to learn about the analytics tools and data that your company uses to measure success.

  • What analytics tools does your company use?
  • What types of events are important to track?
  • What types of data feed into the company KPIs?

Use this data audit to consider setting up some additional functionality. The advanced options below allow you to gain a more detailed view into visitors’ behaviors on your site and connect your work in Optimizely with your customer data.

Depending on the size and maturity of your testing team, you may not wish to set up all advanced options at once. The list below prioritizes functions that most teams add first at the top; functions further down enhance the types of tests that more mature programs run. Many of these options require a developer to implement.

Use this list to evaluate added functionality that your team might find useful today. Return to it as your program matures and starts to run more sophisticated experiments.

Document your data audit in your and all initial setup implementation document and link it to your testing charter.

Set up custom events

Custom event goals allow you to track events other than clicks and pageviews on your site. If you’d like to track scroll depth, user pathing, cart abandonment, drop-offs in an order form, or other visitor behaviors that can’t be tracked by a single pageview or a single click, set up custom event goals using our API.

Read this article to learn more about setting up custom event goals.

Talk to your product manager or analytics team to decide on custom events you’ll track in Optimizely. Review each page or section on your site; discuss the major actions visitors take in that section. What behaviors determine success on that page? How do you track that behavior? If the event can’t be tracked as a click or a pageview, work with your developers to set up a custom event.

As your site evolves, you’ll revisit your custom event goals on a monthly or quarterly basis. Re-evaluate whether new goal types will help you gain visibility into sections of your site that have changed.

Turn on integrations

Optimizely integrates with many best-of-breed platforms; each provides a different view of your site.

Read this article on integrations to learn which services that we integrate with and how to connect them to Optimizely. You can also use this list to identify additional services to add to your technology stack.

Set up custom dimensions

A custom dimension is an attribute that describes a visitor in your Optimizely variation; for example, a visitor who is logged-in versus not logged-in. Custom dimensions allow you to track how important groups of visitors behave in your Experiment.

The aggregate view in Experiment Results provides you with something like an average: a change in behavior across all types of visitors. It’s hard to move the needle on a metric across all visitors beyond key opportunities, so you’ll likely only see smaller gains in the aggregate. Segment by dimension to identify the visitors that your change makes the greatest impact on. You may find opportunities to personalize based on results for custom dimensions.

By default, Optimizely automatically tracks four types of dimensions:

  • ad campaign
  • source type
  • mobile or desktop
  • browser type

Learn to add custom dimensions and capture data about the visitors who matter most to your business. You can add up to 10 custom dimensions in Optimizely.

Connect first-party data

You can target experiments based on first-party data that you have about customers. Simply add a JavaScript snippet that contains information about your visitors above the Optimizely Snippet in the head tag.

For example, imagine that you’d like to target your experiment based on gender and logged-in state, which are declared in the variable CUSTDATA. Add the JavaScript variable that includes all of the data properties you’d like to target above the Optimizely snippet.

Then, use custom JavaScript audience targeting to create an audience.

Connect offline conversions

Offline conversions, such as phone calls tracked by call-tracking software, happen away from the webpage but may still be important to connect to Optimizely.

You may find it useful to connect offline conversions to Optimizely.

For example, in travel and retail, it can be useful to connect customer service data to the experiments you run. If you’re running a test that attempts to reduce confusion about a purchase process, you may want to track the number of related calls to your call center.

In B2B, you might want to connect Salesforce data to your experiment to measure the number of valuable leads.

Read this article about tracking offline conversions to set this up in Optimizely.