# Optimizely Web Experimentation

<p><a href="https://www.optimizely.com/platform/experimentation/" >Optimizely Web Experimentation</a> (formerly Optimizely Web) lets you you test and experiment new features on your website. It is typically used by marketing teams and product managers to learn more about the customers&rsquo; product journey, and test new features to boost conversion rates and overall customer engagement.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="connection-compatibility">Connection compatibility</h2>
  
  
  
  <div class="quick-info">
    <div>
      <div class="connection-modes-column-headers">
        <table>
          <tr class="connection-modes-column-headers">
            <th colspan="4">
            Destination Information
          </th>
        </tr>
          <tr class="destination-info-content">
            <td>
              <ul>
                <li>
                  <b>Status:</b> Generally Available 
                </li>
                <li>
                  <b>Supported sources:</b>  
                  
                      Web
                  
                </li>
                <li>
                  Refer to it as <b>Optimizely Web</b> in the <a href="/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/filtering/#filtering-destinations">Integrations object</a>.
                </li>
              </ul>
            </td>
          </tr>
        </table>
      </div>
      <div class="table-content connection-modes-table">
        
          <table>
            <tr class="heading connection-modes-header">
              <th colspan="4">
              Connection Modes
              <a href=/docs/destinations/rudderstack-connection-modes>
                <i class="fa-regular fa-circle-info"></i>
              </a>
            </th>
          </tr>
            <tr class="connection-modes-column-headers">
              <th>Source</th>
              <th>Cloud mode</th>
              <th>Device mode</th>
              <th>Hybrid mode</th>
            </tr>
            
            <tr class="connection-modes-row">
              <td>
                Web
                
              </td>
              <td>
                 <img src=/docs/images/no-image.svg loading="lazy"
                    decoding="async" class="img__small" alt="not supported" />
              </td>
              <td>
                <img src=/docs/images/tick.svg loading="lazy" decoding="async" class="img__small" alt="supported" />
              </td>
              <td>
                 <img src=/docs/images/no-image.svg loading="lazy"
                    decoding="async" class="img__small" alt="not supported" />
              </td>
            </tr>
            
          </table>
         
      </div>
      <div class="table-content message-types-table">
          <table>
            <tr class="heading message-types-header">
              <th colspan="9">
              Supported Message Types
            </th>
          </tr>
          <tr class="message-types-column-headers">
            <th>Source</th>
            <th>Identify</th>
            <th>Page</th>
            <th>Track</th>
            <th>Screen</th>
            <th>Group</th>
            <th>Alias</th>
            <th>Record</th>
            <th>AudienceList</th>
          </tr>
          
          
          
            
              
              
          
          
          
            
              <tr class="heading message-mode-header">
                <th colspan="9">Device mode</th>
              </tr>
              
              <tr class="message-mode-row">
                <td>
                  Web
                  
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                  <img src=/docs/images/tick.svg loading="lazy" decoding="async" class="img__small" alt="supported" />
                </td>
                <td>
                  <img src=/docs/images/tick.svg loading="lazy" decoding="async" class="img__small" alt="supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
                <td>
                   <img src=/docs/images/no-image.svg loading="lazy"
                      decoding="async" class="img__small" alt="not supported" />
                </td>
              </tr>
              
            
          
            </table>
        </div>
    </div>
  </div>
  

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">Based on your website&rsquo;s content security policy, you might need to <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk/#allowlist-destination-domain" >allowlist the domain</a> from where you are loading the Optimizely Web SDK.</div>
  </div>
</blockquote>

</html>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="get-started">Get started</h2><p>Once you have confirmed that the source platform supports sending events to Optimizely Web Experimentation, follow these steps:</p>
<ol>
<li>Define <a href="https://help.optimizely.com/Build_Campaigns_and_Experiments/Custom_events_in_Optimizely_X" >custom events in the Optimizely Dashboard</a> and add those events as metrics in the corresponding experiments.</li>
<li>Add the Optimizely Web Experimentation snippet to your web page immediately after the opening <code>&lt;head&gt;</code> tag. Then, include the RudderStack JavaScript snippet.</li>
<li>From your <a href="https://app.rudderstack.com/" >RudderStack dashboard</a>, add the source. Then, from the list of destinations, select <strong>Optimizely Web</strong>.</li>
<li>Assign a name to your destination and click <strong>Continue</strong>.</li>
</ol>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="connection-settings">Connection settings</h2><p>To successfully configure Optimizely Web Experimentation as a destination, you will need to configure the following settings:</p>
<ul>
<li><strong>Send experiment data to other tools:</strong> By enabling this setting, you can send your experiment or campaign data to other destinations connected to the same source.
<ul>
<li><strong>As a track call</strong>: When this setting is enabled, an <code>Experiment Viewed</code> <code>track</code> event will be sent to RudderStack along with other configured destinations for each active experiments per page load. The <code>properties</code> of this event will be Optimizely&rsquo;s experiment metadata.</li>
<li><strong>As identify call:</strong> When this setting is enabled, an <code>identify</code> call will be sent to RudderStack and other configured destinations, with the traits as <code>experiment name</code> and <code>variation name</code> .</li>
</ul>
</li>
<li><strong>Send experiment viewed event as non-interaction event</strong>: In case you want to send the <code>Experiment Viewed</code> track event to Google Analytics, enable this setting. The <code>track</code>event will then be sent to Google Analytics as a non-interaction event, i.e. an additional property <code>nonInteraction</code> with value <code>1</code> will be appended to the properties of that event.</li>
<li><strong>Revenue on Order Completed event:</strong> Enabling this setting will send <code>revenue</code> as a property of the <code>track</code>only for the events with event name <code>Order Completed</code>.</li>
<li><strong>Track categorized pages:</strong> Enabling this setting will send <code>page</code> calls to Optimizely Web having <code>category</code> as <code>track</code> events.</li>
<li><strong>Track named pages:</strong> Enabling this will send <code>page</code> calls having <code>name</code> as <code>track</code> events to Optimizely Web.</li>
<li><strong>Custom campaign properties:</strong> In this section, provide the mapping of the campaign metadata to the RudderStack <code>track</code> event properties for the <code>Experiment Viewed</code> event. Please note that the <code>event property</code> should be the <code>track</code> event property and the <code>campaign property</code> should be the corresponding metadata of the campaign.</li>
<li><strong>Client-side Events Filtering</strong>: This setting lets you specify which events should be blocked or allowed to flow through to Optimizely Web Experimentation. For more information on this setting, refer to the <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/event-filtering/" >Client-side Events Filtering</a> guide.</li>
<li><strong>Use device mode to send events</strong>: As this is a <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/#device-mode" >web device mode</a>-only destination, this setting is enabled by default and cannot be disabled.</li>
<li><strong>Consent management settings</strong>: Configure the consent management settings for the specified source by choosing the <strong>Consent management provider</strong> from the dropdown and entering the relevant consent category IDs. See <a href="https://www.rudderstack.com/docs/data-governance/consent-management/overview/" >Consent Management in RudderStack</a> for more information on this feature.</li>
</ul>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="page">Page</h2><p>If you have enabled the <strong>Track Categorized Pages</strong> or <strong>Track Named Pages</strong> dashboarding setting, then RudderStack sends a <code>page</code> call having a name or category as a <code>track</code> event with the event name as <code>Viewed ${category} page</code> or <code>Viewed ${name} page</code> to Optimizely.</p>
<p>A sample <code>page</code> call is shown below:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">// &#34;home&#34; is the name of the page.
rudderanalytics.page(&#34;home&#34;);</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="track">Track</h2>
<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text">This destination does not strictly adhere to the <a href="https://www.rudderstack.com/docs/event-spec/ecommerce-events-spec/" >RudderStack Ecommerce Event Spec</a>.</div>
  </div>
</blockquote>
<p>RudderStack sends a <code>track</code> call to Optimizely with a valid event name associated with an active experiment.</p>
<p>If you have enabled the <strong>Revenue on Order Completed event</strong> dashboard setting, then RudderStack sends the <code>revenue</code> property only for the <code>Order Completed</code> event and not for any other event.</p>
<p>RudderStack converts the value of <code>revenue</code> to cents before passing it to Optimizely. Thus, $5 will be converted to 500 cents.</p>
<p>If <strong>Revenue on Order Completed event</strong> is disabled in the dashboard, then the property is passed as is, without any conversion.</p>
<p>A sample <code>track</code> call is as shown below:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.track(&#34;Order Completed&#34;, {
  revenue: 30,
  value: 30.0,
})</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="sending-experiment-data">Sending experiment data</h2><p>If the <strong>Send experiment data as track call</strong> dashboard setting is enabled while configuring the destination, RudderStack automatically records and sends a web experiment as a <code>track</code> event with <code>Experiment Viewed</code> as the event name and the experiment metadata as the event properties.</p>
<p>You can then send this <code>track</code> event to the other destinations (connected to the same source in RudderStack) to analyze the experimentation results.</p>
<p>This <code>track</code> event call consists of the following properties:</p>
<ul>
<li><code>campaignName</code></li>
<li><code>campaignId</code></li>
<li><code>experimentId</code></li>
<li><code>experimentName</code></li>
<li><code>variationName</code></li>
<li><code>variationId</code></li>
<li><code>audienceId</code></li>
<li><code>audienceName</code></li>
<li><code>nonInteraction</code></li>
</ul>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">If you provide the <strong>custom campaign properties</strong> in the destination settings, then the campaign metadata key will be overridden by the corresponding event properties.</div>
  </div>
</blockquote>

</html>
<p>A sample <code>track</code> call is shown below:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.track(&#34;Experiment Viewed&#34;, {
  campaignName: &#34;test campaign&#34;,
  campaignId: &#34;1234567890&#34;,
  experimentId: &#34;0123456789&#34;,
  experimentName: &#34;test experiment&#34;,
  variationId: &#34;1122334455&#34;,
  variationName: &#34;test variation&#34;,
  audienceId: &#34;1212121212&#34;,
  audienceName: &#34;sample audience&#34;,
  nonInteraction: 1,
})</code></pre></div>
</div>
<p>If the <strong>Send experiment data as identify call</strong> dashboard setting is enabled, RudderStack sends an <code>identify</code> event with the following traits for each active experiment:</p>
<ul>
<li><code>experimentName</code></li>
<li><code>variationName</code></li>
</ul>
<p>You can then send this <code>identify</code> event to the other destinations (connected to the same source in RudderStack) to analyze the experimentation results.</p>
<p>Note that:</p>
<ul>
<li>In case multiple experiments are active, then multiple <code>identify</code> events are triggered.</li>
<li>RudderStack persists the <code>identify</code> traits for the subsequent <code>identify</code> calls, that is, the <code>identify</code> calls contain the previous <code>identify</code> traits as well.</li>
</ul>
<p>A sample <code>identify</code> call is as shown:</p>
<div class="rs-code">
  <div class="rs-code__head">javascript<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript">rudderanalytics.identify({
    `Experiment: ${experimentName}` : variationName
});</code></pre></div>
</div>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="faq">FAQ</h2><!-- end-chunk -->
<!-- begin-chunk -->
<h4 id="do-i-need-to-add-optimizely-webs-javascript-snippet-to-my-website">Do I need to add Optimizely Web&rsquo;s JavaScript snippet to my website?</h4><p>Yes. You need to add the Optimizely Web snippet immediately after the opening <code>&lt;head&gt;</code> tag of your web page. Then, include the JavaScript snippet of RudderStack.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h4 id="why-i-am-not-able-to-see-the-events-in-my-experiments">Why I am not able to see the events in my experiments?</h4><p>Define the <code>custom events</code> in Optimizely Web&rsquo;s dashboard and add those events as <code>metrics</code> in corresponding Optimizely &rsquo;s <code>experiment</code>.</p>
<p>While defining the custom event, you need to provide an <code>API Name</code> and while using RudderStack&rsquo;s <code>track</code> API, use this <code>API name</code> as the <code>event name</code>.</p>
<br />

