# VWO Destination Config Reference

<p><a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/" >VWO</a> (Visual Website Optimizer) is an A/B testing destination that runs only in web device mode. RudderStack&rsquo;s JavaScript SDK passes <code>identify</code> traits and <code>track</code> events to VWO in the browser, prefixing each trait and event name with <code>rudder.</code>, and can report the variations VWO applies back to RudderStack as events.</p>
<p>In a VWO destination spec:</p>
<ul>
<li><code>type: vwo</code></li>
<li><code>definition_version: 1</code></li>
</ul>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="sample-configuration">Sample configuration</h2><div class="rs-code">
  <div class="rs-code__head">yaml<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml">version: rudder/v1
kind: destination
metadata:
  name: vwo-prod
spec:
  id: vwo-prod
  display_name: VWO Production
  type: vwo
  definition_version: 1
  enabled: true
  config:
    account_id: &#34;{{ .VWO_ACCOUNT_ID }}&#34;

    send_experiment_track: true
    send_experiment_identify: true

    is_spa: true
    library_tolerance: &#34;2500&#34;
    settings_tolerance: &#34;2000&#34;
    use_existing_jquery: false

    event_filtering:
      whitelist:
        - Order Completed
        - Signed Up

    connection_mode:
      web: device
    consent_management:
      web:
        - provider: oneTrust
          consents:
            - analytics</code></pre></div>
</div>
<p>The above example sets the SmartCode keys, which take effect only when the page has the SDK load VWO&rsquo;s SmartCode — see <a href="#smartcode-settings" >SmartCode settings</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="config-keys">Config keys</h2><p><code>config</code> accepts only the keys listed below. The <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/destination-types/#config-key-rules" >shared config key rules</a> cover unknown keys, defaults, and immutability.</p>

<html lang="en">
<blockquote class="info">
  <div class="tip-quote">
    
    <div class="tip-text">VWO runs only in web device mode. The SDK forwards <code>identify</code> and <code>track</code> calls to VWO, and also records an <code>Order Completed</code> event&rsquo;s <code>total</code> — or <code>revenue</code>, when <code>total</code> is absent — as a VWO revenue conversion. See <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/#tracking-revenue-goals" >Tracking revenue goals</a>.</div>
  </div>
</blockquote>

</html>
<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="connection">Connection</h3><div class="rs-ckeys">
<div class="rs-ckey" id="account_id">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">account_id</p>RequiredSecret</div>
  <p class="rs-ckey__field">
    Type:
    <code>string</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Your VWO account ID, from <strong>Account Details</strong> in VWO&rsquo;s account settings. The SDK uses it when it loads VWO&rsquo;s SmartCode itself — see <a href="#smartcode-settings" >SmartCode settings</a>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li>Written as a string, so quote its reference: <code>&quot;{{ .VWO_ACCOUNT_ID }}&quot;</code>. Rudder CLI substitutes the value before it parses the YAML, so an unquoted reference to a numeric ID becomes a number and fails validation.</li>
<li>At most 100 characters, and must not contain line breaks.</li>
<li>A <code>{{ path || fallback }}</code> template is accepted in place of a literal.</li>
<li>A spec that omits this key fails validation with <code>'account_id' is required</code>.</li>
</ul>

</div>

<div class="rs-ckey__extra">
  <p>Supply it as a <code>{{ .VAR }}</code> reference rather than a literal — see <a href="#secrets" >Secrets</a>.</p>
<p>See <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/#where-can-i-find-my-vwo-account-id" >Where can I find my VWO Account ID?</a>.</p>

</div>

</div>

</div>

<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="experiment-reporting">Experiment reporting</h3><p>These keys have the SDK report each variation VWO applies to a visitor back to RudderStack, so the other destinations connected to the source can analyze experiment results.</p>

<blockquote class="warning">
  <div class="tip-quote">
    
    <div class="tip-text"><code>send_experiment_identify</code> takes effect only when <code>send_experiment_track</code> is also <code>true</code> — the SDK listens for applied variations only when <code>send_experiment_track</code> is on. Set both to get the identify traits.</div>
  </div>
</blockquote>
<div class="rs-ckeys">
<div class="rs-ckey" id="send_experiment_track">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">send_experiment_track</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>boolean</code>
  </p><p class="rs-ckey__field">
    Default value:
    <code>false</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Send an <code>Experiment Viewed</code> <code>track</code> event whenever VWO applies a variation, with the experiment ID, campaign name, variation ID, and variation name as properties. The dashboard calls it <strong>Send experiment viewed as track</strong>.
</p>

<div class="rs-ckey__extra">
  See <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/#sending-experiment-viewed-as-track-event" >Sending Experiment Viewed as track event</a>.
</div>

</div>

<div class="rs-ckey" id="send_experiment_identify">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">send_experiment_identify</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>boolean</code>
  </p><p class="rs-ckey__field">
    Default value:
    <code>false</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Send an <code>identify</code> call whenever VWO applies a variation, with a trait named <code>Experiment: &lt;experiment ID&gt;</code> holding the variation name. The dashboard calls it <strong>Send experiment viewed as identify traits</strong>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li>Takes effect only when <code>send_experiment_track</code> is also <code>true</code>.</li>
</ul>

</div>

<div class="rs-ckey__extra">
  See <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/#sending-user-traits" >Sending user traits</a>.
</div>

</div>

</div>

<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="smartcode-settings">SmartCode settings</h3><p>These keys configure VWO&rsquo;s SmartCode snippet. The SDK adds SmartCode to the page — with <code>account_id</code> and these settings — only when the page&rsquo;s <code>load</code> call opts in through its integration options:</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.load(WRITE_KEY, DATA_PLANE_URL, {
  integrations: {
    VWO: {
      loadIntegration: true
    }
  }
});</code></pre></div>
</div>
<p>Without that option, the SDK expects VWO&rsquo;s SmartCode to be on the page already, and neither <code>account_id</code> nor the four keys below have any effect. See <a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/#loading-the-vwo-sdk" >Loading the VWO SDK</a>.</p>
<div class="rs-ckeys">
<div class="rs-ckey" id="is_spa">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">is_spa</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>boolean</code>
  </p><p class="rs-ckey__field">
    Default value:
    <code>false</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Tell SmartCode the page is a single-page application. The dashboard calls it <strong>Single Page Application (SPA)?</strong>.
</p>

</div>

<div class="rs-ckey" id="library_tolerance">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">library_tolerance</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>string</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Maximum time, in milliseconds, SmartCode waits for the VWO library to load before it shows the original page. The dashboard calls it <strong>Library Tolerance</strong>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li>Digits, written as a string: <code>&quot;2500&quot;</code>, not <code>2500</code>. Rudder CLI doesn&rsquo;t check that the value is a number.</li>
<li>At most 100 characters, and must not contain line breaks.</li>
<li>A <code>{{ path || fallback }}</code> template is accepted in place of a literal.</li>
<li>The dashboard defaults this field to <code>2500</code>. Rudder CLI doesn&rsquo;t fill it in.</li>
</ul>

</div>

</div>

<div class="rs-ckey" id="settings_tolerance">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">settings_tolerance</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>string</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Maximum time, in milliseconds, SmartCode waits for campaign settings before it shows the original page. The dashboard calls it <strong>Setting Tolerance</strong>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li>Digits, written as a string: <code>&quot;2000&quot;</code>, not <code>2000</code>. Rudder CLI doesn&rsquo;t check that the value is a number.</li>
<li>At most 100 characters, and must not contain line breaks.</li>
<li>A <code>{{ path || fallback }}</code> template is accepted in place of a literal.</li>
<li>The dashboard defaults this field to <code>2000</code>. Rudder CLI doesn&rsquo;t fill it in, and without it SmartCode shows the page without waiting for settings.</li>
</ul>

</div>

</div>

<div class="rs-ckey" id="use_existing_jquery">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">use_existing_jquery</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>boolean</code>
  </p><p class="rs-ckey__field">
    Default value:
    <code>false</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Use the jQuery already on the page instead of having VWO add its own. VWO needs jQuery on the page either way. The dashboard calls it <strong>Use Existing jquery</strong>.
</p>

</div>

</div>

<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="event-filtering">Event filtering</h3><p>Every source connects to VWO in <code>device</code> mode, where the SDK applies the filter, so the filter applies to <code>track</code> events from every source you connect.</p>
<div class="rs-ckeys">
<div class="rs-ckey" id="event_filtering">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">event_filtering</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>object</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Restricts which <code>track</code> events the SDK passes to VWO, by event name. See <a href="https://www.rudderstack.com/docs/sources/event-streams/sdks/event-filtering/" >Client-side Events Filtering</a>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li><code>whitelist</code> — array of event names to allow; every other <code>track</code> event is dropped.</li>
<li><code>blacklist</code> — array of event names to drop; every other <code>track</code> event is allowed.</li>
<li>The two are mutually exclusive, and Rudder CLI enforces it — setting both fails validation.</li>
<li>Each name is at most 100 characters, or a <code>{{ path || fallback }}</code> template.</li>
</ul>

</div>

<div class="rs-ckey__extra">
  <div class="rs-code">
  <div class="rs-code__head">yaml<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml">event_filtering:
  whitelist:
    - Order Completed</code></pre></div>
</div>

</div>

</div>

</div>

<!-- end-chunk -->
<!-- begin-chunk -->
<h3 id="per-source-keys">Per-source keys</h3><p>Both keys are objects keyed by the local source type — the tokens listed under <a href="#source-types" >Source types</a>. A key naming a source type this destination doesn&rsquo;t support fails validation.</p>
<div class="rs-ckeys">
<div class="rs-ckey" id="connection_mode">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">connection_mode</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>object</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Maps each source type you connect to the mode its events reach VWO in. VWO accepts only <code>web: device</code>.
</p>

<div class="rs-ckey__notes">
  <p class="rs-ckey__field">Notes:</p>
  <ul>
<li>An entry is required for each source type you connect — see <a href="#connect-a-source" >Connect a source</a>.</li>
</ul>

</div>

<div class="rs-ckey__extra">
  <div class="rs-code">
  <div class="rs-code__head">yaml<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml">connection_mode:
  web: device</code></pre></div>
</div>

</div>

</div>

<div class="rs-ckey" id="consent_management">
  <div class="rs-ckey__title">
    <p class="rs-ckey__name">consent_management</p></div>
  <p class="rs-ckey__field">
    Type:
    <code>object</code>
  </p>
<p class="rs-ckey__field">
  Description:
  Consent provider configuration per source type. The entry shape, accepted providers, and the rules on <code>resolution_strategy</code> and <code>consents</code> are shared across all destination types — see <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/destination-types/#consent-management" >Consent management</a>.
</p>

</div>

</div>

<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="source-types">Source types</h2><p>VWO accepts events from these source types in the mentioned connection modes:</p>
<table>
  <thead>
      <tr>
          <th>Source type</th>
          <th>Connection mode</th>
      </tr>
  </thead>
  <tbody>
      <tr>
          <td><code>web</code></td>
          <td><code>device</code></td>
      </tr>
  </tbody>
</table>
<p>VWO accepts only web sources, and only in <code>device</code> mode — the SDK runs VWO in the browser, and no events pass through RudderStack&rsquo;s servers. See <a href="https://www.rudderstack.com/docs/destinations/rudderstack-connection-modes/" >RudderStack Connection Modes</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="connect-a-source">Connect a source</h2><p>An event stream connection to this destination is checked against two rules at <code>validate</code> time.</p>
<p><strong>The source&rsquo;s type must be supported.</strong> VWO accepts only <code>web</code>, the type a JavaScript source resolves to. Every other source resolves to a type it doesn&rsquo;t accept — an iOS source to <code>ios</code>, an Android source to <code>android</code>, and webhook and server-side SDK sources to <code>cloud</code> — and reports, for example:</p>
<div class="rs-code">
  <div class="rs-code__head"><button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-text" data-lang="text">destination &#39;vwo-prod&#39; (type &#39;vwo&#39;) does not support source &#39;my-ios-app&#39;:
source type &#39;ios&#39; is not among supported source types: web</code></pre></div>
</div>
<p><strong>The destination config must carry a <code>connection_mode</code> entry for that source type.</strong> This lives on the destination spec, not on the <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/yaml-connections/" >connection spec</a>. Without it:</p>
<div class="rs-code">
  <div class="rs-code__head"><button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-text" data-lang="text">destination &#39;vwo-prod&#39; config has no &#39;connection_mode&#39; entry for source type &#39;web&#39;</code></pre></div>
</div>
<p>VWO needs no additional config keys to connect a web source.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="secrets">Secrets</h2><p><code>account_id</code> is the only secret key. Write it as a <code>{{ .VAR }}</code> reference and supply the value at apply time:</p>
<div class="rs-code">
  <div class="rs-code__head">yaml<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-yaml" data-lang="yaml">config:
  account_id: &#34;{{ .VWO_ACCOUNT_ID }}&#34;</code></pre></div>
</div>
<div class="rs-code">
  <div class="rs-code__head">bash<button class="rs-code__copy" type="button">
      
      Copy
    </button>
  </div>
  <div class="highlight"><pre class="chroma"><code class="language-bash" data-lang="bash">export RUDDER_VWO_ACCOUNT_ID=&#34;...&#34;
rudder-cli apply

# or
rudder-cli apply --var-file secrets.vars.yaml</code></pre></div>
</div>
<p>Note that:</p>
<ul>
<li><code>rudder-cli import</code> writes only the secrets the API returns, as <code>{{ .VAR }}</code> references, and leaves the others out. Add any secret key it leaves out, then supply the variables before you apply — see <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/destination-types/#secrets" >Secrets</a>.</li>
<li>The account ID is embedded in the page&rsquo;s JavaScript, so masking it protects your YAML, not the value itself.</li>
</ul>
<p>See <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/variable-substitution/" >How to Use Variable Substitution in Rudder CLI</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="changes-by-release">Changes by release</h2>
<p>No changes since this type became available.</p>
<p>For changes across every destination type, see <a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/destination-types/changes/" >Destination Type Changes by Release</a>.</p>
<!-- end-chunk -->
<!-- begin-chunk -->
<h2 id="see-more">See more</h2><ul>
<li><a href="https://www.rudderstack.com/docs/destinations/streaming-destinations/vwo/" >VWO Destination</a> for loading SmartCode, experiment reporting, and revenue tracking</li>
<li><a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/destination-types/" >Destination Type Reference for Rudder CLI</a> for the rules shared across destination types</li>
<li><a href="https://www.rudderstack.com/docs/dev-tools/rudder-cli/yaml-destinations/" >Destination YAML Reference</a> for the spec envelope</li>
</ul>

