Registering Your Website and Apps in VWO

As the very first step towards linking VWO with your domain / mobile app / server-side project, you need to establish the connection by deploying the SmartCode or SDK, respectively. This sets the ground for you to pump the power out of VWO by creating and executing campaigns to optimize your platform for amplified turnouts. 

The Websites and Apps module is the arena for you to initiate your journey with VWO. It is the common strata for registering and managing all your website, mobile apps, and server-side projects hassle-free. 

You can access the Websites and Apps module from the main menu > Configurations to register a new platform or manage your existing ones. 

The Websites and Apps module features the following sections:

• Introduction - Gives you an overview of how each of your platforms can be connected to VWO via the SmartCode or the respective keys. It hosts an overview section along with three others, each for the SmartCode, mobile app SDK, and server-side SDK.
  
  
• Websites and Apps - Displays the list of your websites and apps in your VWO account.

• Privacy - Gives an account of VWO’s privacy policy concerning the collection, storage and management of data.
  
  
• Compliance - Gives an account of the compliances and certificates for VWO’s adherence to industrial standards.
  
  
• FAQs - Displays the most frequently asked questions around the SmartCode installation.

Deploying VWO on Your Platform

Upon registering your platform, VWO will display the corresponding SmartCode/SmartCode plugin/SDK using which you can connect your platform with VWO. This step is crucial for you to create and execute campaigns in VWO.

As you start off using VWO, you can connect your platform via the Introduction page. The overview section on the Introduction page has a Connect Now button, which, when clicked, will display a popup that lets you select the type of your platform. Based on that, you will be shown the appropriate steps to be performed to get your platform added to VWO.

Connecting a Website

Perform the following steps to connect your website with VWO:

1. On the SmartCode for Websites (Client-Side) section under Introduction, click on the Connect Your Website button.
2. In the popup that appears, enter your website’s domain name. 
3. Click Add domain. 

Now, VWO analyzes and verifies your website to generate the SmartCode specific to your website. Once done, the platform is registered on VWO and is displayed as follows:

The websites installed with VWO are displayed under Websites and Apps. Clicking on one of them will feature three tabs - Code, Performance, and Audit. 

The Code tab, by default, features the HTML SmartCode that VWO has specifically generated for that website. If your website is hosted on WordPress, Drupal, or Shopify, VWO will automatically detect it and display the respective plugins for installing the SmartCode.

The HTML SmartCode is tagged with the version number at the top, along with the change log that lists the log of changes made to the SmartCode for each version. 

You can customise your SmartCode, based on your requirements, by clicking on the ⚙ icon at the top-right of the SmartCode. The following are the options available for customising your SmartCode:

To reset the SmartCode customizing options to system settings, click Reset to defaults. 

After your customization options are set, you can click Save to apply the changes, and your SmartCode is ready to be installed on your website. 

Post installing the SmartCode, you can verify the installation by entering your website URL in the SmartCode checker.

The Performance tab features the impact of VWO post installing the SmartCode on your website. It displays the impact of VWO on your core web vitals, such as First Contentful Paint (FCP), Largest Contentful Paint (LCP), and Thread blocking time (TBT), appearing individually in two tabs, each for mobile and desktop. 

Beneath these vitals, you can find the breakdown of the sizes of the VWO library and every individual VWO campaign, categorized by type. You can also find the total size of all your VWO campaigns at the bottom of the list. Besides these, based on the performance of your website, VWO also provides suggestions to improve it.

The Audit tab streams all the events that are performed by the visitors on your website. To view the streaming of the events on all of the websites linked to your VWO account, you can access Audit under the main menu > Data360. To know more about Audit, click here.

Connecting a Mobile App

Perform the following steps to connect your mobile app with VWO:

1. On the Mobile App section, click on the Connect Your App button.
2. In the Add a mobile app popup that appears, enter your mobile app name.
3. Click Add app. 

With this, your app is registered in VWO and is displayed as follows:

A mobile app under the Websites and Apps section features two tabs - SDK and Configuration. VWO generates an API key individually for Android and iOS. Cordova, Flutter, and React-native can avail of either of the Android and iOS API keys, as required. To learn about installing the SDK on your mobile app, click on the SDK guide button.

The Configuration tab lets you configure your variables for running tests on your mobile app. Test variables are elements or parameters of your mobile app. After you define a variable, you can run an unlimited number of A/B tests on the variable without any code changes or redeployment. For example, you can create a string-type variable for testing different text versions on the app screen.

To add variables for your mobile app testing, perform the following steps:

1. Under the Variables section, click Create Variable.
2. Assign a name to the variable, and then select its data type.
3. Enter its default value (This refers to the current value or the value that it should be assigned if there is no A/B test).
4. Click Create. You can add multiple variables to your app.

You can view the relevant Java, Objective, or Swift code snippet in the right panel as you create the variable. You can use this code snippet to update the changes in your mobile app code.

For example, let us consider you want to create an A/B test for your mobile app for the following use cases:

• Control: Requires users to sign in (after signing up) to the app to make a booking.
• Variation: Users can directly make the payment without signing in.

You can create a variable for this use case as follows:

Once you’re done creating your variable, it gets listed under the Variables section in the Configuration tab. You can always modify the name and the default value of the variable by clicking on the Edit Variable icon. However, deleting a variable is not possible.

To learn how to create an A/B test on your mobile app, refer to this article.

Connecting a Server-side Project

Perform the following steps to connect your server with VWO:

1. On the Server-side section, click on the Connect Your Project button.
2. In the Add a Project popup that appears, enter your project name.
3. From the Languages dropdown, choose the language(s) for your project.
   
   INFO: A language lets you choose the SDK for your project. 
4. In the Environment Name field, enter the name of the environment where you want to run your test.
5. To add multiple environments, click Add another environment. You can set an environment as default by selecting the Set as default checkbox. This will make the environment to be auto-selected while selecting a project inside a campaign. Setting your environment as a default makes it automatically appear in the Environment(s) list once you select the project from the Projects dropdown in the Feature Rollout, Feature Test and A/B Test campaigns.
6. To enable webhooks, select the Enable Webhook checkbox. To know more about webhooks and how to configure them, click here.
7. Click Add project. 

After the project is created in VWO, it displays the following tabs:

SDK - Features the SDK that VWO has generated to be installed on your server. To know how to install, you can refer to the corresponding SDK guides for Python, Java, and .NET by clicking on the respective SDK guide buttons.

This also shows you the SDK key that you have to use when initializing the VWO client in your code.

Configuration - Allows you to manage the environment(s) that you have added to the project.

Managing Your Websites and Apps in VWO

Clicking on Websites and Apps under Configurations > Websites and Apps will display the list of all the platforms that have registered in your VWO account. To quickly access a registered platform, you can use the search bar.

The listed properties are organized in a table with the following columns:

• Name - Displays the name of the platform.
• Type - Displays the type of the platform (Website / mobile app / server-side project).
  ATTENTION: For websites, VWO automatically detects if the SmartCode is installed on a domain other than the specified one. In such cases, VWO classifies them as an Unregistered website and provides a Connect button to link the unregistered website with the SmartCode. If a domain remains unregistered for more than two days, VWO will stop collecting data from it.
• Status - Displays the connectivity status of the SmartCode / SDK. 
  • Connected - Implies that the SmartCode / SDK has been successfully installed on your platform.
  • Not connected - Implies that the SDK has not been installed on your platform.
  • No SmartCode detected - Implies that the SmartCode has not been added to your website.
  • Error - Implies that the SmartCode has not been installed properly on your website. The reasons are classified and can be viewed by clicking on the corresponding platform. 
• Last activity - Displays the timestamp when VWO last detected a visitor's engagement on your webpage.

Apart from viewing these details, you can also prevent VWO from collecting data from the platforms that are no longer required by archiving them. To do so, along the corresponding platform, click on the vertical ellipsis (⋮) > Archive. The archived platforms appear as a list under the Archived Websites and Apps section. To unarchive a platform, click on the Unarchive option corresponding to it.