Customizing your VWO SmartCode – VWO

close this to read article

INFO: We are introducing a module called, Websites and Apps, which is available under the early access program and will be rolled out in phases. If your account is enabled with the Websites and Apps module, the SmartCode for your website will be available under the respective website entry that can be accessed by navigating from the main menu > Configurations > Websites and Apps.

You can customize your VWO SmartCode in the following ways:

NOTE: To check if you have correctly installed the SmartCode on your webpage, enter the URL in the SmartCode Checker in the Settings > SmartCode section of your VWO Account. See SmartCode Checker in VWO to know what different results mean.

Modifying the Cookie Duration

VWO uses cookies to identify visitors and keep track of the variation they accessed. The default duration of a VWO cookie is 100 days. To change the duration, you can add the following JavaScript code snippet before the VWO tracking code on your webpage.

NOTE: If you modify a cookie value, it would be applicable to all the cookies that are dropped by VWO on your browser.

In this example, the cookie will last for a day only. Change the value from 1 to the number of days you want the cookie to be stored. Once the cookies are created, the duration cannot be altered.

When you change the cookie duration, there is a possibility of a data discrepancy.

Configuring the Timeout Interval

By default, the time-out values for the two parameters are 2000 and 2500 milliseconds, respectively. Using the following two parameters of the SmartCode, you can change the time-out interval to counter issues like slow Internet connections or incompatible IE browsers. You can set the time for which the asynchronous script will wait for the page settings to load, using the variable settings_tolerance. If the page settings load within this time interval, the code requests the VWO library (va.js or vanj.js) from our CDN and waits for the file to load at the interval indicated by the variable library_tolerance.

Hiding an Element

You can customize the SmartCode to hide an element on your webpage. This can be done using the “hide_element” field of the SmartCode. The default functionality of the asynchronous SmartCode is to hide the body of the web page initially. This is to avoid any flash of the original content on the web page while VWO applies any change.

If you wish to override the default functionality of the asynchronous SmartCode, you can replace the “body” with an empty string. The example code:

If you make this change, you might encounter issues like a flash of original content on the web page.

Setting Domain for VWO Cookies

In case, VWO cookies are not stored on your domain by default, use the following code to set the domain on which the cookies should be stored. This code snippet must be added before the VWO tracking code on your webpage.

Using jQuery of Your Webpage Instead of VWO’s

You have the option to use the jQuery of your webpage instead of VWO’s jQuery. This typically depends on the jQuery version of your webpage. If the jQuery version of your webpage is similar or higher than the one used by VWO, your page can use its own jQuery. Currently, the jQuery version used by VWO is 1.4.2. As of now, the supported jQuery versions range from 1.4.2 to 2.x.x.

INFO: If your account ID is higher than or equal to 460038, we do not serve you with jQuery version 1.4.2. Instead, we serve you with a customized version that is five times smaller. We did this to ensure that your website remains performant enough while using VWO. Please read this blog to see what we did for this.

Accounts with IDs lower than the one specified above are unaffected and will continue to function normally.

If you are already using jQuery on your webpage, and the version is in the specified range, we recommend you to use the no Jquery version as it would reduce the required bandwidth and would work faster. The example code:

For Synchronous SmartCode:

For Asynchronous SmartCode:

Custom URL Setup

When a campaign has to run on multiple pages with no common pattern in the URL’s or when a campaign needs to run on specific pages and the URL pattern matches with a lot of pages that do not have to be included, then a Custom URL can be used to create a pattern that matches your requirements. Using custom URLs, you can assign virtual URLs to the pages so that a specific pattern can be generated. The example code:

NOTE: To know about how to set up a custom URL for asynchronous and synchronous SmartCodes, refer to Asynchronous SmartCode in VWO and Synchronous SmartCode in VWO.