Executing VWO SmartCode on Valid Consent

To comply with data protection policies, it is necessary to obtain visitor’s consent before deploying any cookies or trackers to process their data. For this, you may be using third-party consent management tools like OneTrust, Usercentrics, etc.

VWO communicates with cookie consent managers via callback when the visitor accepts or rejects the cookie, allowing you to run the SmartCode based on valid consent.

To have a better understanding of this, continue reading.
Consider that you use a third-party cookie manager to obtain visitor’s consent before deploying any cookies or trackers to process their data. Now, whenever a visitor accepts or rejects the cookie, you need to decide when to execute or not execute the SmartCode.

Typically, you would want to execute the SmartCode only after the consent is obtained. In this scenario, the page reloads to show the variation. For example, the placement of the cookie consent box on your webpage is such that the page contents are visible in the background. Consider that the original version of your website has a white background, whereas the variation has blue. When the visitor accepts the cookie, the SmartCode executes, the page reloads, and the white background turns blue. As a result, the visitor first sees the original content followed by the new.

To cater to this, VWO provides a new config-based SmartCode implementation to communicates with cookie consent managers via callback, allowing you to apply a blur filter on your webpage until the cookie consent is accepted and the campaign changes are applied (refer to the image below). This eliminates displaying the original content, as your website visitors will see the content only after the changes are applied.

On the other hand, if the visitor rejects the cookie, you would not want to execute the SmartCode and directly show the original version of your website.

Here’s how the blur filter helps you:

• Avoids displaying the original content that might appear before the campaign changes are applied.
• Notify users in an intuitive way that something is about to appear on the webpage.

The new Config-based VWO SmartCode

Let’s look at the function offered by VWO and how you can use it.

VWO offers the following function using which you can control the execution of the SmartCode on your visitor’s website. The parameters of this function are fully configurable. 

Let’s understand the working of each aspect of this SmartCode.

1. selector- For this parameter, specify the CSS selector path of your cookie consent dialog box. This parameter accepts the STRING value.
    
2. filterTime- For this parameter, specify the duration after which you wish to remove the blur filter and the loader icon. You are allowed to specify any of the following values:
   
   
   • • best: Removes the blur filter and the loader icon after the changes are applied to the page. We recommend using this choice as it eliminates displaying the original content.
       
       
     • balanced: Removes the blur filter and the loader icon as soon as the VWO’s SmartCode receives the initial response from its server.
       In this scenario, the blur filter may only last for a few milliseconds. However, if all the campaign changes are not applied in that duration, the visitor may see the original content.
       
       
     • early: Removes the blur filter as soon as the cookie consent is obtained. The visitor may likely see the original content in this case. Therefore, we do not recommend using this choice.
       
       
3. isConsentGiven()- This is a callback method that allows you to determine whether a visitor has accepted or rejected cookies and what action you should take next. This method can return the following values:
   
   NOTE: For this function, you need to write lines of code based on your requirements. Here’s a sample implementation:
   • “1”- Assume a visitor arrives on your page and is prompted with a cookie consent dialog box. Upon acceptance, this function must return 1, indicating that you have the visitor’s consent to process his data. You can now apply the blur filter and execute the SmartCode based on the value of the filterTime parameter.
     Likewise, when a visitor revisits, this function must immediately return 1, indicating that you already have the specific visitor’s consent and can execute the SmartCode right away.
     
     
   • “2”- Assume a visitor arrives on your page and is prompted with a cookie consent dialog box. Upon rejection, this function must return 2, indicating that you do not have the visitor’s consent to process his data. Therefore, the SmartCode is not executed, and the overlay is removed.
     Likewise, when a visitor revisits, this function must immediately return 2, indicating that you do not have his consent, and cannot execute the SmartCode.
     
     
   • “3”- It indicates an unknown/undefined state. Thus, we keep applying the blur filter. However, you can choose how you wish to handle this state. 
     
     
4. filterTolerance: For this parameter, specify a time interval in milliseconds for which you want the blur filter to appear on your webpage. This is a standby time interval where you wish to wait for a visitor to respond to the cookie consent.
   If the visitor does not respond to the consent pop-up within the specified time interval, the blur filter is removed, and the VWO SmartCode is not executed. We recommend that you choose this timer carefully so that the original content is not exposed too soon.

When deciding how to implement the cookie consent, we always recommend consulting your legal counsel to make an informed decision considering the data privacy rules of the countries in which you operate.