Synchronous SmartCode is a version of the VWO SmartCode that aims to provide compatibility with evolving browser standards. You can use this version where precise control over the loading sequence of scripts is required. You can access the SmartCode by going to Configurations > Websites and Apps > Introduction > SmartCode for Websites (Client-Side). This displays the Asynchronous version. To view the Synchronous version, click on the gear icon (⚙) at the top-right of the SmartCode, and select Synchronous. It is compatible with all VWO platform products.
The example code:
If the code has to be added for account id #45 (let’s say), it will be:
Advantage of Migrating to New Synchronous SmartCode
Chrome browser with version 55 or above might block the cross-domain scripts injected by document.write on slow 2G networks. See https://developers.google.com/web/updates/2016/08/removing-document-write for more details. The deprecated Synchronous code was using document.write() and was at times getting blocked on slow networks. Note: This only impacted VWO, not the website.
Added Advantages of Synchronous SmartCode
- The response is cached in the browser and when the next subsequent request goes, it asks the VWO server whether something is new since the last time you served me a response. If nothing is new servers respond immediately(with 304 response code) and the browser serves the content from the cache. If there is something new, servers respond with the new content, which is then again cached at the browser.
- Settings and libraries are combined in a single request and are pre-loadable so that the browser can execute VWO code faster. Previously, during the execution, the dynamic parameters were added to the request by SmartCode which delayed the VWO settings and library.
- By default, it supports Single Page Applications(SPA)
Things to Consider While Using New Synchronous SmartCode:
- The SmartCode still uses document.write in some places. This has been done to:
a. Make the preview and heatmaps work seamlessly, as they were working previously.
b. Fetch cookies in case of multiple domain campaigns. In case the call is blocked, other methods are used to fetch the cookies.
- There is an explicit ‘no-cache’ on the script. This is to ensure an immediate reflection in the settings whenever there is any change in the campaign. If the settings are cached for some period, new settings will not be fetched from the server until the caching period ends. So, a call is sent to the server which reverts immediately saying no new changes on the server (304 Not Modified) and the browser serves it from the cache.
The Workflow of Synchronous SmartCode in VWO
Ways to Configure Your SmartCode
You can configure the SmartCode in two ways:
- Using jQuery of your webpage instead of VWO's jQuery
- Custom URL setup
Using jQuery of Your Webpage Instead of VWO’s jQuery
You have the option to use the jQuery of your webpage instead of the 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.
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:
If the code has to be added for account id #45 (let’s say), it will be:
Custom URL Setup
Using custom URLs, you can assign virtual URLs to the pages so that a specific pattern can be generated. The below code can be added to add a custom URL:
Custom URLs must be set up when:
- A campaign has to run on multiple pages with no common pattern in URLs. In this case, custom URLs with some common string can be added to create a pattern.
- 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. For such cases, you can add a common custom URL to the pages that are to be included in the campaign.
To learn more about Custom URLs, refer to How to Use VWO for Single Page Applications and Using Custom URL to Run a Site-Wide Test.