Configure the Wingify SmartCode for Your Website – Wingify

close this to read article

This article covers the following

Things to consider while configuring SmartCode
Ways to add Wingify SmartCode
Adding Wingify SmartCode manually
Adding SmartCode for Websites Using Rocket Loader
Adding SmartCode for Next.js websites
Adding SmartCode for Nuxt Websites
Adding SmartCode for Applications Using React Helmet
Adding SmartCode for Websites Using Gatsby 4.19.0 and above
Adding SmartCode for Websites Using Shopify Hydrogen

The first step to using Wingify'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 Wingify servers. To learn about the working of Wingify SmartCode, refer to How Does Wingify 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 an iframe content on a page, then the Wingify SmartCode should also be installed on the iframe URLs.

To check if you have correctly installed the SmartCode on your webpage, enter the URL in the SmartCode Checker. You can access the same by navigating from the main menu > Configurations > Websites and Apps > your domain > Check if SmartCode is installed properly on your URL section. See SmartCode Checker in Wingify to understand what different results mean.

Ways to Add Wingify SmartCode

You can add Wingify SmartCode in two ways - Automatically or Manually. To add it automatically, Wingify provides third-party integrations. You need to download the Wingify plugins for specific third-party platforms.

To learn more about integrating Wingify with a third-party platform, refer to Extensions and Plugins in Wingify SmartCode.

Adding Wingify SmartCode Manually

You can add Wingify SmartCode to your website manually by performing the following steps:

Navigate from the main menu > Configurations > Websites and Apps > Introduction > SmartCode for Websites (Client-Side).
In the popup that appears, enter your website’s domain name and click Add domain.

Note: You can enable tracking and register all your sub-domains.

Wingify analyzes and verifies your website. It generates the SmartCode specific to your website.

Info: Wingify offers two types of SmartCodes: Asynchronous SmartCode and Synchronous SmartCode. By default, Wingify displays the asynchronous SmartCode. To use the synchronous SmartCode, click the ⚙ icon, select Synchronous, and click Save.
Copy the SmartCode.
If you need to consult a developer to add code to your website, click the share button to email the code snippet. A popup will appear with a pre-written email requesting that you 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.

Attention: You should not install the Wingify SmartCode using tag managers like Google Tag Manager. By default, all tag managers load Wingify code asynchronously, which can cause page flicker on test pages. Often, when using tag managers, the Wingify code may load with a delay, causing timeouts and preventing visitors from joining the test.

The SmartCode installation is a one-time task. Once the code is in place, you can track your website visitor behavior or create as many website optimization campaigns as you like.

Note: The default settings of Firefox and Safari browsers do not allow Wingify’s SmartCode to execute in incognito mode. However, the default settings can be disabled using the following:

For tracking on the Safari browser, go to Preferences > Privacy and disable the Prevent cross-site tracking setting.
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 Wingify SmartCode the regular way could cause issues such as flickering. To keep it seamless for such cases, you would need to add an attribute to the script tag (<script type='text/javascript') in the SmartCode as shown below:

<script data-cfasync="false" type='text/javascript'>

Adding SmartCode for Next.js Websites

To integrate Wingify SmartCode with Next.js applications using the NPM package, refer to this document - https://www.npmjs.com/package/wingify-smartcode-nextjs

Adding SmartCode for Nuxt Websites

If your website is built using the Nuxt framework, then to implement the Wingify 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 the following:
```
 { rel: 'preconnect', href: 'https://edge.wingify.net' }.
```

In the script array of the head configuration, add the following:

{ type: 'text/javascript', innerHTML: `SMART-CODE-SCRIPT-CODE` }.

Note: SMART-CODE-SCRIPT-CODE is where the script code from the SmartCode needs to be added.

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.

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 Wingify SmartCode in two ways, specific to the framework's version.

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 Wingify preview The debugger is 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 Synchronous SmartCode.

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.
Inside the App function/class, at the start of the <head> tag, paste the For Synchronous SmartCode script.

Finally, your root file should look like this:

Need more help?

For further assistance or more information, contact Wingify Support.