# VWO (Visual Website Optimizer)

[VWO](https://vwo.com/) (Visual Website Optimizer) is an A/B testing and product optimization platform. It provides an intuitive visual editor where you can run A/B tests without the need to write any HTML code.

Find the open source code for this destination in the [GitHub repository](https://github.com/rudderlabs/rudder-sdk-js/tree/develop/packages/analytics-js-integrations/src/integrations/VWO).

## Connection compatibility

{{< destination-config >}}

{{< info >}}
In the web device mode integration, that is, using [JavaScript SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/_index.md" >}}) as a source, RudderStack loads the VWO native SDK from the `http://visualwebsiteoptimizer.com` domain. 

Based on your website's content security policy, you might need to [allowlist this domain]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md#allowlist-destination-domain" >}}) to load the VWO SDK successfully.
{{< /info >}}

## Get started

Once you have confirmed that the source platform supports sending events to VWO, follow these steps:

1. From your [RudderStack dashboard](https://app.rudderstack.com/), add a source. Then, from the list of destinations, select **VWO**.
2. Assign a name to the destination and click **Continue**.

## Connection settings

- **Account ID**: Enter your VWO account ID. For more information on obtaining your VWO account ID, refer to the [FAQ]({{< ref "#faq" >}}) section below.
- **Single Page Application(SPA)?**: Enable this setting if you're loading the native VWO SDK on a single page application. 
- **Send experiment viewed as track**: Enable this setting to record your VWO experiment as a `track` event with the name `Experiment Viewed`. For more information on this setting, refer to the [Sending experiment viewed from VWO]({{< ref "#sending-experiment-viewed-from-vwo" >}}) section below.
- **Send experiment viewed as identify traits**: Enable this setting to send your experiment data within the [traits]({{< ref "event-spec/standard-events/identify.md#identify-traits" >}}) of your `identify` event.

{{< info >}}
If you enable both the **Send experiment viewed as track** and **Send experiment viewed as identify traits** settings, then RudderStack independently captures the experiment details and sends them as `track` and `identify` events, respectively.
{{< /info >}}

- **Client-side Events Filtering**: This setting lets you specify which events should be blocked or allowed to flow through to VWO. For more information, refer to the [Client-side Events Filtering]({{< ref "sources/event-streams/sdks/event-filtering.md" >}}) guide.
- **Library Tolerance**: Specify the maximum time (in ms) RudderStack should wait for the VWO library to load before displaying your web page.
- **Setting Tolerance**: Specify the maximum time (in ms) RudderStack should wait for the test settings before VWO displays your original web page.
- **Use Existing jQuery**: Enable this setting if your page already includes jQuery. Otherwise, VWO will include jQuery on the page for you.

{{< warning >}}
To function correctly, VWO requires jQuery to be present in the web page.
{{< /warning >}}

- **Use device mode to send events**: As this is a [web device mode]({{< ref "destinations/rudderstack-connection-modes.md#device-mode" >}})-only destination, this setting is enabled by default and cannot be disabled.

## Loading the VWO SDK

By default, RudderStack **does not** load the VWO SDK automatically. To do so, you must [load the web SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/load-js-sdk.md" >}}) as follows:

```javascript
rudderanalytics.load(WRITE_KEY, DATA_PLANE_URL, {
  integrations: {
    VWO: {
      loadIntegration: true
    }
  }
});
```

## Identify

You can use the [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) call to identify a user and send the information to VWO.

A sample `identify` call is shown below:

```javascript
rudderanalytics.identify("1hKOmRA4GRlm", {
  "name": "Alex Keener",
  "email": "alex@example.com"
});
```

### Sending user traits

RudderStack lets you send the experiment-related data like the user's traits via an [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) call, so that the other destinations have the necessary user-related context of the variations.

To do so, enable the **Send experiment viewed as identify traits** dashboard setting and include the user traits in the [`identify`]({{< ref "event-spec/standard-events/identify.md" >}}) event.

```javascript
rudderanalytics.identify("1hKOmRA4GRlm", {
  "name": "Alex Keener",
  "email": "alex@example.com",
  "Experiment: 1234": "Signup as default landing"
});
```

{{< info >}}
RudderStack prefixes all the `identify` traits with `rudder.` before sending them to VWO. For example, RudderStack sends `email` as `rudder.email` to VWO.
{{< /info >}}

## Track

You can use the [`track`]({{< ref "event-spec/standard-events/track.md" >}}) call to send user events and their associated properties to VWO.

A sample `track` call is shown below:

```javascript
rudderanalytics.track("Item Purchased", {
  category: "MyCategory",
  currency: "INR",
  value: 500
})
```

{{< info >}}
RudderStack prefixes the event name with `rudder.` before sending it to VWO. For example, `Item Purchased` event is sent as `rudder.Item Purchased` to VWO.
{{< /info >}}

### Sending `Experiment Viewed` as `track` event

When you enable the **Send experiment viewed as track** dashboard setting, RudderStack automatically sends a [`track`]({{< ref "event-spec/standard-events/track.md" >}}) event whenever an experiment variation is loaded for a user. It sets `Experiment Viewed` as the event name along with the experiment and variation details as the event properties.

You can then send this `track` event to the other destinations (connected to the same source in RudderStack) to analyze the experimentation results.

A sample code snippet for this activity is as shown:

```javascript
rudderanalytics.track("Experiment Viewed", {
  experimentId: "Signup",
  variationName: "Signup as a default landing"
});
```

### Tracking revenue goals

RudderStack also lets you forward the revenue amount to VWO when the [`Order Completed`]({{< ref "event-spec/ecommerce-events-spec/ordering.md#order-completed" >}}) event is called.

{{< info >}}
RudderStack uses the `revenue` or `total` property for tracking the revenue goals.
{{< /info >}}

A sample code snippet for this activity is shown below:

```javascript
rudderanalytics.track("Order Completed", {
  revenue: 125
});
```

## FAQ 

#### How do I add the VWO JavaScript snippet to my website?

To configure VWO SmartCode(JavaScript snippet) on all web pages where you plan to run your A/B tests, you can refer to this [VWO Knowledge Base](https://help.vwo.com/hc/en-us/articles/360019422834) article.

{{< warning >}}
Make sure you add the VWO snippet inside the `HEAD` tag of your web page, **above** the [RudderStack JavaScript SDK]({{< ref "sources/event-streams/sdks/rudderstack-javascript-sdk/quickstart.md#step-1-install-rudderstack-javascript-sdk" >}}) snippet.
{{< /warning >}}

#### Where can I find my VWO Account ID?

You can obtain the VWO Account ID by following these steps:

1. Log into your [VWO dashboard](https://app.vwo.com/#/login).
2. Click the settings icon on the top right and go to **Account**. 

You will find your account ID listed under **Account Details**.

For more information, refer to the [VWO Knowledge Base](https://help.vwo.com/hc/en-us/articles/360008469173-How-to-find-your-account-ID).

#### How can I disable loading the VWO SDK for certain events?

By default, RudderStack **does not** load the VWO SDK automatically.  However, if you have loaded the VWO SDK using [this approach](#loading-the-vwo-sdk), you can disable it for certain events by setting `VWO` to `false` in the event's `integrations` object:

```javascript
rudderanalytics.track(
  "Experiment Viewed", {
    revenue: 30,
    currency: "USD",
  }, {
    integrations: {
      VWO: false
    },
  }
);
```