1. Operationalize Your Experience Optimization
Strategy with VWO SmartCode
Overview
VWO SmartCode is a JavaScript code snippet that enables you to leverage the features of the VWO
experience optimization platform on your website. VWO is a cloud-native solution which allows you to
put your ideas to work quickly and build enriching experience for your users.
VWO SmartCode establishes a secure communication channel between the VWO servers and your
website. VWO SmartCode enables you to run automated campaigns on your webpages for better user
engagement or create customized web experiences to study user behavior and gather meaningful insights.
Types of SmartCodes
VWO supports two types of SmartCodes: Asynchronous SmartCode and Synchronous SmartCode. These
two SmartCodes differ by loading pattern and execution, and each presents a seamless experience for
different types of business usecases.
Asynchronous SmartCode
Loads parallelly with your webpage to foster improved website performance
Provides timer configuration options for loading of page settings and VWO library
Synchronous SmartCode
Executes each line of code in the script sequentially
Accelerates response to subsequent requests by storing page settings and VWO library in the
browser cache
Accessing VWO SmartCode
A SmartCode is generated automatically for each account ID.
To access your VWO SmartCode:
1. Log in to your VWO account.
2. Click the Settings icon ( ).
2. 3. On the SETTINGS screen, click the SMARTCODE tab to display the SmartCode for your
account. You can choose Synchronous or Asynchronous SmartCode based on your business
requirement.
VWO SmartCode Execution Workflow
The following workflow provides visibility into each step of SmartCode execution. The workflow
describes how SmartCode executes to enable VWO implement variations and orchestrate a new working
environment for your visitors.
The workflow is illustrated with the help of a flow diagram.
4. Configuring SmartCode for Your Website
You must add the SmartCode to all webpages where you require running tests and campaigns. The VWO
SmartCode can be installed either automatically or manually. For automatic installation, download the
VWO plug-ins for specific third-party platforms. The information in this section describes the manual
installation of the VWO SmartCode.
Key Points to Remember
You must place the SmartCode before the closing </Head> tag of your website.
If the webpage contains Iframe URLs, you must install the VWO SmartCode on the Iframe URL.
If template-based headers and footers are used across the website, you must add the VWO
SmartCode in the header.
Installing VWO SmartCode Manually
1. Access your VWO SmartCode. For more information, refer to Accessing VWO SmartCode.
2. Copy the SmartCode.
3. Sign in to your website admin panel and paste the copied SmartCode before the closing </Head>
tag in the page source code.
NOTE: If you need assistance in installing the SmartCode manually, you can click Send to Developer to
email to SmartCode to a developer.
FAQS
1. What is the difference between synchronous and asynchronous smartcodes?
An Asynchronous SmartCode loads along with your webpage,while a Synchronous SmartCode executes
every line of code snippet sequentially to load.
2. What is the advantage of Asynchronous SmartCodes?
Asynchronous SmartCodes provide the following advantages:
Achieve faster page loads and improved website performance.
Allow timer configurations for loading of page settings and VWO library.
3. How to check if the SmartCode is installed correctly?
5. You can use SmartCode Checker in VWO to verify if the SmartCode is installed correctly for a webpage.
The VWO SmartCode Checker allows verifying one URL at once.
4. How to add SmartCode for the React-helmet case?
In a React-helmet implementation, the <helmet> tag abstracts the <head> tag. You must add the
SmartCode before the closing </helmet> tag in the webpage source code.
