VWO provides the following types of tracking code that you can add to your website pages:
- Synchronous code
- Asynchronous code
Synchronous VWO Smartcode
Note: In some of the older accounts, you will see three tabs in the Smartcode section. This is because we have introduced a new synchronous code. The old synchronous(deprecated) code will continue to work, but it is recommended that you replace the old synchronous Smartcode(deprecated) with the new Smartcode for the following advantages:
- Setting requests are cached until you make any changes to the test settings to execute the request faster and more efficiently.
- Settings and library are combined in a single request and pre-loadable so the browser can execute VWO code faster. In the previous implementation, the smart code added dynamic parameters to the request during code execution thereby delaying VWO settings and library.
- By default, it supports Single Page Applications(SPA)
- It is compatible with all VWO Platform products(Insights, Testing, Engage, etc).
For users who can see only two tabs with one Synchronous code, you are already on the new version of the code.
Synchronous code executes each function or statement in an HTML code sequentially. If the synchronous VWO code fails to execute, it will block further execution of the code, thereby delaying the page load time.
For example, consider that you have added VWO synchronous code in the head of your webpage’s HTML code and it fails to execute for some reason. In such scenario, the web page will not load for your visitor.
Here’s an illustration to describe the flow of Synchronous code:
Asynchronous VWO Smartcode
Unlike the Synchronous VWO code, Asynchronous VWO code loads in parallel to your webpage and does not affect the loading time of your website. VWO asynchronous code has a timer set for the pages to load and if a page fails to load within the set time, it stops execution and the control version (original version) is displayed instead.
The following are the salient features of the VWO asynchronous code:
- It executes in parallel to the page code.
- 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.
- If the page files do not load within the respective time limit, the VWO code on the page will show the control version (original version) instead.
- If you have jQuery version 1.4.2 to 2.x.x installed on the page, set the variable use_existing_jquery to True. The variable use_existing_jquery tells the VWO tracking code whether it should call the jQuery present on the page or request it from our CDN.
Here’s an illustration showing the flow of Asynchronous code:
ATTENTION If you are using your own jQuery, make sure it loads before the VWO tracking code. Otherwise, VWO code will not work on that page.