Deep Dive: VWO Smartcode

A know-how about how an efficient website tracking code is significant to optimize your website traffic

Introduction to VWO SmartCode

VWO Smartcode is a website tracking code in the form of a JavaScript code. A website tracking code is inserted in the source code of the webpage to integrate it with the website. It helps for tracking the website activity and further generates insights for the stakeholders for better optimization of the website. The Smartcode helps for communicating the data insights with VWO servers.

Importance of an efficient website tracking code

1. The website tracking code helps stakeholders to analyze the inbound traffic on the website. [1].

2. It can be used for measuring viewer’s reading depth, for analyzing e-commerce data, tracking for the ads that one runs on websites, etc.

3. Tracking codes along with measurable values of website analytics helps for cranking up the pages visits and for better search engine optimization

4. It can also be used to generate visual insights by integrating it with tracking modules.

Types of VWO Smartcode

There are two main types of SmartCode that ate present for use in the VWO module Those are as discussed in details below.

Asynchronous

An asynchronous code loads in parallel with the source code of your webpage. It does not affect the loading time for your website, when it comes to the visitor/user experience. There is a timer that can be set for the tracking code to wait until the website source code loads. That time can be tweaked as per your requirement.

The summarized flowchart for asynchronous SmartCode execution is as shown below.

Synchronous

Google Chrome browser above version 55 might block cross domain scripts on slow networks like 2G.

An example of such a synchronous code is mentioned below. Your account ID is displayed in place of <ACCOUNT ID>.

<!-- VWO One Smartcode (Replace <ACCOUNTID> with your VWO account id) -->
< script src = "https://dev.visualwebsiteoptimizer.com/lib/<ACCOUNTID>.js" > < /script> < !--VWO One Smartcode ends -->

Ways to add SmartCode

#1 Automatically

For adding VWO Smartcodes automatically, third party plug-ins provided by VWO can be be installed. There is no need for writing code in this case. Just download the compatible plugin/extension and it gets integrated with the application.

VWO supports third party plugins that includes BigCommerce, Drupal, Demandware, Joomla, Miva, 3DCart, Prestashop, Shopify, Volusion, Umbraco, ExpressionEngine, CloudCannon etc.

#2 Manually

The manual addition of the code can be done by copying the code from the SmartCode tab in the VWO application. The ways to access the SmartCode in the VWO app are discussed below.

Ways to access VWO Smartcode for manual integration

There are two ways to access the Smartcode, to manually add it to your website. The first one is a path less taken, when the user logs in for the first time into the VWO account and second one is the path when a user is logged into the VWO UI and hence taken frequently. Those are discussed below.

1. When logging in for the first time

When you log in to your VWO account for the first time, the process takes you to series of steps that are discussed below. The Smartcode is generated and presented to you in one of these steps and can be copied and kept for future use.

The next alternative step is discussed in coming sections below. We begin with account setup for VWO.

#1 Basic Account Setup

To access your VWO account go to the VWO login page. Enter the email address and password. When you login for the first time, the app takes you to the Basic account setup.

Enter the requisite details in the basic account setup field that includes your contact info, full name, URL of the website to be optimized and website related details. After entering the details click on Next.

#2 Product Setup

The next step is choosing the required bundle of VWO products to be deployed for tracking your website analytics. You can choose the recommended combination listed as Conversion Optimization Essentials or choose from individual lists below it as shown. Further click on Next.

#3 Setting up goals for tracking

Choose the website conversion tracking goals from the list provided and further click on Next.

In the next step add the page you want to track in Which page do you want to track? field and move ahead by clicking on Next.

The VWO Smartcode is generated and Install Code step appears.

This is the first way to access & copy the code and keep it handy for further use.

2. Accessing the settings when logged into VWO

The second way to access the Smartcode, is simply log in to your VWO account.

Go to Settings⚙ > SmartCode. That’s it. You arrive on to the SmartCode. Copy it and get ready to paste it in the source code of your website.

Important things to remember while adding the SmartCode

• The SmartCode is to be placed before the closing /</head> tag of the website source code.

• If the website has Iframe URLs, then the SmartCoce is needed to be installed on the Iframe URLs

• If there are template based headers and footers on the website, adding the code snippet in the webpage header aids for executing the SmartCode across the website

Ways to configure a SmartCode (For Syncrhnous mode)

Using JQuery of your Webpage

JQuery is a fast, small, and feature-rich JavaScript library JavaScript library designed to simplify HTML document traversal and manipulation. If the JQuery version of your webpage is similar or higher than the one used by VWO, you can use the webpage JQuery to execute the SmartCode.

Custom URL Setup

Using this method, virtual URLs can be assigned to the pages so that a specific pattern is generated. As an example, following code can be used to add a custom URL.

window.VWO = window.VWO || [];
window.VWO.push(['activate', {
  virtualPageUrl: 'NEW_VIRTUAL_PAGE_URL'
}]);

Your Questions Answered

What is the difference between asynchronous and synchronous SmartCode?

Asynchronous code implies, it can load OUT OF SYNC with it's position in the HTML source code of the website. It loads along with your webpage. A synchronous code is executed line by line, sequentially.

How to verify whether the SmartCode is installed correctly?

Go to Settings⚙ > SmartCode.

Enter your website URL in the field titled- Verify if VWO SmartCode is installed on the URL and hit Check.

Tools used:

ScreenToGif

Smartdraw