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.
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 plugins 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
Once you have registered your website, VWO generates a SmartCode specific to your website. This SmartCode connects your website to VWO, enabling you to run your campaigns. You can add the SmartCode to your website manually by performing the following steps:
- Navigate from the main menu > Configurations > Websites and Apps.
- Click on your domain under the Websites and Apps section. You can find your SmartCode under the Code tab.
- VWO offers two types of code snippets: Asynchronous SmartCode and Synchronous SmartCode. By default, VWO displays the Asynchronous version. To use the Synchronous, click the ⚙ icon at the top-right of the SmartCode section, select Synchronous, and click Save.
- Copy the SmartCode.
- If you need to consult a developer to add code to your website, click the Share icon at the top-right of the SmartCode to email the code snippet. A popup appears with a pre-written email requesting to add the SmartCode to your website.
- To manually install the SmartCode 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.
While the latest versions of Chrome, Safari, and Firefox browsers, including their private browsing modes, block third-party cookies by default, which are essential for VWO's cross-domain campaigns, these settings can be disabled using the following:
1. For tracking on the Chrome browser, go to Settings > Privacy and security > Third-party cookies and select Allow third-party cookies.
2. For tracking on the Safari browser, go to Settings > Privacy and disable the Prevent cross-site tracking setting.
3. For tracking on the Firefox browser, go to Settings > 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" type='text/javascript' id='vwoCode'>
Adding SmartCode for Next.js Websites
You can add SmartCode to your Next.js website by using the NPM package.
Step 1: Install the Package
Run one of the following commands in your project directory:
Using npm:
npm install vwo-smartcode-nextjs
Using Yarn:
yarn add vwo-smartcode-nextjs
Step 2: Integrate the VWOScript Component
For websites using the Page Router:
If your website uses the Page Router, add the VWOScript component inside the _document.js (or _document.tsx for TypeScript) to include it in the <head> section of your HTML document, as shown in the following code snippet:
For websites using the App Router:
If your website uses the App Router, modify the RootLayout component (app/layout.tsx) to include the VWOScript component inside the <head> tag, as shown in the following code snippet:
Adding SmartCode for Nuxt Websites
If your website is built using the Nuxt framework, then to implement the VWO SmartCode, perform the following steps in your code base:
- Open the nuxt.config file.
- Add the head configuration.
- In the link array of the head configuration, add { rel: 'preconnect', href: 'https://dev.visualwebsiteoptimizer.com' }.
- In the script array of the head configuration, add { type: 'text/javascript', id: 'vwoCode', innerHTML: `<Paste SmartCode here>` }.
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 below 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.
ATTENTION: If you're using React Helmet, we would not recommend using the Synchronous version of SmartCode as it attempts to inject the code asynchronously, which can cause conflicts with the working of the SmartCode on your website.
NOTE: This method supports websites using the Gatsby version before 4.19.0.
Adding SmartCode for Websites Using Gatsby 4.19.0 and above
For websites using Gatsby versions 4.19.0 and above, perform the following steps:
-
Create a component in your source code by inserting the script code from the SmartCode (excluding the script tag) into the _html key's value within the dangerouslySetInnerHTML attribute, surrounded by brackets and back-ticks, following the format demonstrated below:
- Now, copy the component and paste it into the file where you have your existing page components, as shown below:
Adding SmartCode for Websites Using Shopify Hydrogen
If your website is built with Shopify’s Hydrogen framework, you can add the VWO SmartCode in two ways, specific to the version of the framework.
NOTE: The following steps are performed so as to render the SmartCode from the server side rather than dynamically loading it on the client side. This way, it eliminates issues such as the VWO preview debugger not loading and white flashes on the webpage.
For Shopify Hydrogen V1, perform the following steps:
- Locate the index.html file in the root directory of your Shopify Hydrogen project.
-
Immediately under the <head> tag in the index.html file, paste the VWO SmartCode (Async or Sync).
For Shopify Hydrogen V2, perform the following steps:
- Locate the app/root.jsx or app/root.tsx file in the root directory of your Shopify Hydrogen project.
- For Asynchronous SmartCode, inside the App function/class, just above the <head> tag, define a function that returns the VWO SmartCode. To do that, you can paste the SmartCode without the script tags within the following code:
function getVWOAsyncScript() {
return {
__html: '<Paste SmartCode here>'
};
}
Now, at the start of the <head> tag, paste the following script tag:
<script type="text/javascript" id="vwoCode" dangerouslySetInnerHTML={getVWOAsyncScript()} />
Finally, your root file should look like this:
- For Synchronous SmartCode, inside the App function/class, at the start of the <head> tag, paste the following script tag:
<script src="https://dev.visualwebsiteoptimizer.com/lib/<VWO Account ID>.js" id="vwoCode" />
It should look like this: