Start Free trial

Articles in this section

See more

Configuring SmartCode for Your Website

Vaibhav Singh
  • Updated
Follow

The first step to use the functionality offered by VWO is to install the SmartCode in all the web pages where you want to run your tests. The SmartCode enables your website to interact with VWO servers. To learn more about VWO SmartCode, refer to How does VWO SmartCode Work.

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.

Things to Consider

  • If Iframe URLs are on the page, the VWO SmartCode should also be installed on the Iframe URL.

  • If your website uses template-based headers and footers, add the code snippet in the header to implement it across the website.

  • The SmartCode must be placed before the </head> tag of your website. Adding the code snippet in the head of a webpage helps execute the code faster and doesn't slow down the rest of your page from loading. 

To learn how to install VWO Smartcode on your webpages, refer to this video.


How to Add VWO SmartCode?

You can add VWO SmartCode in two ways- Automatically and Manually. To add the SmartCode automatically, VWO provides third-party integrations. You can add the VWO SmartCode by installing VWO plug-ins for some third-party platforms. To learn more about how to integrate VWO with a third-party platform, refer to Extensions and Plugins in VWO SmartCode.

Adding VWO SmartCode Manually

After you have added the code to your website, the code does not change for any test. With the code in place, you can create as many website optimization tests as you want.

To learn how to install the VWO SmartCode on your website, refer to this video or follow the steps present in the procedure.

Procedure

  1. Log in to your VWO account.
  2. Click the gear icon ⚙ on the top right, and go to SMARTCODE.
  3. Choose the type of SmartCode you want to work with.
    INFO: VWO provides two different types of code snippets: Asynchronous
    SmartCode         and Synchronous SmartCode.
  4. Copy the SmartCode.
  5. If you need to consult a technician to add code to your website, click Send to Developer to email the code snippet.
    A dialog opens up having a pre-written email requesting to add the SmartCode to your website.
  6. To do it yourself, sign in to your website admin panel and paste the SmartCode snippet between the <head> and </head> tags of the page. 

Post-requisite: To verify whether the SmartCode is successfully added to your webpage, enter your webpage URL in the Verify if VWO SmartCode is installed on the URL field under the SMARTCODE CHECKER section present in SETTINGS > SMARTCODE.

You should not install VWO code through tag managers such as Google Tag Manager. By default, all the tag managers load VWO code asynchronously, which may cause page flicker on the test pages. Also, using tag managers may lead to delayed loading of the VWO code, which can cause time-out issues and prevent visitors from becoming part of the test.

For The React-helmet Case

The way to add SmartCode would be a little different in React-helmet. There won't be any <head> tag in the codebase to insert the code in an ideal react-helmet implementation. Rather, this is abstracted by the tag <helmet>. 
Screenshot_2020-03-26_at_5.35.28_PM.png
NOTE: Use brackets and back-ticks at the start and end of the SmartCode (as used in the above image). This is how the helmet expects the addition of third-party scripts to the page. When this is compiled, the resulting page would have the usual <head> tag and everything would work as expected.

Related articles