|
In this article, you’ll learn: |
The first step to using VWO's features is to install the SmartCode on all the web pages where you plan to run your tests. The SmartCode allows your website to communicate with VWO servers. To learn about the working of VWO SmartCode, refer to How does VWO SmartCode Work?.
Things to Consider While Configuring SmartCode
- 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.
- If you want to test iframe content on a page, then the VWO SmartCode should also be installed on the iframe URLs.
To learn how to install the VWO SmartCode on your website, follow these steps.
Ways to Add VWO SmartCode?
You can add VWO SmartCode in two ways- Automatically or Manually. To add it automatically, VWO provides third-party integrations. You need to download the VWO plug-ins for specific third-party platforms.
To learn more about integrating VWO with a third-party platform, refer to Extensions and Plugins in VWO SmartCode.
Adding VWO SmartCode Manually
You can add VWO SmartCode to your website manually by performing the following steps:
- Log in to your VWO account.
- Click the gear icon ⚙ on the top right, and go to SmartCode.
- Choose the type of SmartCode you want to work with.
- Copy the SmartCode.
- If you need to consult a developer to add code to your website, click Send to Developer to email the code snippet.
A popup appears featuring a pre-written email requesting to add the SmartCode to your website. - 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.
You should not install the VWO SmartCode using tag managers like Google Tag Manager. By default, all tag managers load VWO code asynchronously, which can cause page flicker on test pages. Often, with the use of tag managers, the VWO code may load with a delay, causing time-out issues and preventing visitors from becoming part of the test.
The SmartCode installation is a one-time task. With the code in place, you can create as many website optimization tests as you want.
The default setting of Firefox and Safari browsers do not allow VWO’s SmartCode to execute in incognito mode. However, the default settings can be disabled using the following:
1. For tracking on the Safari browser, go to Preferences > Privacy and disable the Prevent cross-site tracking setting.
2. For tracking on the Firefox browser, go to Preferences > Privacy & Security > Custom and disable the following settings- Cookies and Tracking Content.
Adding SmartCode for Websites Using Rocket Loader
If Rocket Loader is enabled on your website, implementing the VWO SmartCode the regular way could cause issues such as flickering. To keep it seamless for such cases, you would need to add an attribute (data-cfasync="false") to the script tag (<script type='text/javascript' id='vwoCode'>) in the SmartCode as shown below:
-
<script data-cfasync="false" src="/javascript.js"></script> -
<script data-cfasync="false" type="text/javascript"></script>
Adding SmartCode for Next.js Websites
If your website is built using the Next.js framework, then to implement the VWO SmartCode, you can import the Script module and replace all the instances of “_vwo_code” with “window._vwo_code” in the VWO SmartCode snippet.
Adding SmartCode for Applications Using React Helmet
For applications using React Helmet, the process for adding the SmartCode is a little different. In an ideal React Helmet implementation, there would be no <head> tag in the codebase to insert the code. Instead, the tag <helmet> abstracts this.
Use brackets and back-ticks at the start and end of the SmartCode (as used in the above image). This is how the React Helmet expects third-party scripts to be added to the page. When this is compiled, the resulting page would have the usual <head> tag, and everything would work as expected.
