Skip to main content

VWO + DataGrail Consent

VWO provides native consent management features including custom CMP configuration, consent blocking modes, and anti-flicker capabilities. This guide shows you how to integrate VWO with DataGrail's consent banner.

VWO offers a Custom CMP option in its dashboard that allows you to configure JavaScript code to read DataGrail's consent state. This approach gives you centralized consent management in the VWO dashboard without requiring complex website code changes.

Dashboard Configuration​

Navigate to your VWO dashboard:

  1. Go to Configurations > Websites and Apps
  2. Select your website and navigate to the Code tab
  3. Under Consent Management, select Custom from the CMP dropdown
  4. Choose your preferred blocking mode (see comparison below)

In VWO's custom consent field, add this JavaScript function that reads DataGrail's consent state via the DG_BANNER_API:

function isConsentGiven() {
  // Check if DataGrail banner API is available
  if (window.DG_BANNER_API) {
    if (window.DG_BANNER_API.categoryEnabled('performance')) {
      return "1"; // Accepted
    }
    // If banner API exists but category not enabled, check if preferences were set
    var prefs = window.DG_BANNER_API.getConsentPreferences();
    if (prefs && prefs.cookieOptions) {
      return "2"; // Rejected (preferences exist but performance not enabled)
    }
  }
  return "3"; // Unknown (banner not yet resolved)
}

VWO calls this function to determine consent status:

  • "1" = Accepted — VWO runs and tracks
  • "2" = Rejected — VWO stops/doesn't track
  • "3" = Unknown — behavior depends on blocking mode

VWO Blocking Modes​

VWO provides three blocking modes you can configure in the dashboard:

ModeExperiments Display?Tracking Active?Use Case
Completely Block VWONoNoStrictest compliance — nothing runs until consent
Partially Block VWOYesNoShow variants without tracking (measurement gated)
Do Not Block VWOYesYesExperiments run while consent pending

Recommended: Use Partially Block VWO for the best balance — users see personalized experiences immediately, but measurement only starts after consent is granted.

SmartCode Placement​

VWO's SmartCode should be placed in your page <head> before the DataGrail consent banner script:

<!DOCTYPE html>
<html>
<head>
  <!-- VWO SmartCode (from VWO dashboard) -->
  <script type='text/javascript' id='vwoCode'>
    // Your VWO SmartCode here
  </script>

  <!-- DataGrail Consent Banner -->
  <script src="https://cdn.datagrail.io/YOUR_TENANT_ID.js"></script>
</head>
<body>
  <!-- Your content -->
</body>
</html>
Do Not Use GTM for VWO

VWO explicitly recommends against loading SmartCode via Google Tag Manager. GTM's async loading causes visible page flicker and timeout issues with A/B tests. Always load VWO SmartCode directly in the <head>.

Anti-Flicker Coordination​

VWO includes a blur-based anti-flicker mechanism that can hide page content while consent is being collected. You can configure VWO's anti-flicker to exclude the DataGrail banner:

In VWO's anti-flicker settings:

  • Filter selector: .dg-banner (or your banner's CSS class)
  • Filter time: "best" (waits for variant + consent)
  • Filter tolerance: 4000 (timeout in ms)

This ensures the consent banner remains visible over a blurred/hidden page, then reveals the page with the correct variant after consent.

Add these patterns as cookie rules in your DataGrail Consent dashboard under Cookie Management. For each pattern, select Add Rule, enter the match criteria, set the Category to Performance, and configure the appropriate retention:

Match CriteriaCategoryRetentionPurpose
_vwo_uuid*Performance400 daysUnique visitor ID
_vwo_consentPerformance400 daysVWO consent status (1=granted, 0=denied)
_vis_opt_exp_*Performance400 daysVariation assignments and goal tracking
_vis_opt_sPerformance400 daysSession count
_vis_opt_outPerformance400 daysVisitor opt-out flag
_vwo_dsPerformance400 daysPersistent visitor data
_vwo_snPerformanceSessionSession information
_vwoPerformance400 daysSafari consolidated cookie

Alternative: Using Callbacks​

If you prefer to handle consent coordination in your website code instead of VWO's dashboard, you can use DataGrail's callback system:

<script>
  window.dgEvent = window.dgEvent || [];

  function handleVwoConsent(preferences) {
    if (window.DG_BANNER_API.categoryEnabled('performance')) {
      document.cookie = "_vwo_consent=1; path=/; max-age=31536000";
    } else {
      document.cookie = "_vwo_consent=0; path=/; max-age=31536000";
    }
  }

  window.dgEvent.push({
    event: "initial_preference_callback",
    params: handleVwoConsent
  });

  window.dgEvent.push({
    event: "preference_callback",
    params: handleVwoConsent
  });
</script>

Here's how different configurations compare:

ConfigurationSetup LocationVariants Display?TrackingMaintenance
VWO Custom CMP (recommended)VWO dashboardConfigurableGatedCentralized in VWO
Manual preference_callbackWebsite codeDepends on modeGatedRequires code changes
Custom TriggersVWO dashboard (+ support request)YesTrigger-gatedRequires VWO support setup

Troubleshooting​

VWO tracking isn't stopping after consent is rejected

Check that:

  • Your isConsentGiven() function returns "2" when consent is rejected
  • You've selected a blocking mode in VWO dashboard (not "Do Not Block VWO")
  • The _vwo_consent cookie is being set to 0 when consent is denied
  • You've cleared your browser cookies to test fresh visitor behavior
Page flickers when VWO loads

Flicker usually indicates:

  • SmartCode is loading via GTM (use direct <head> placement instead)
  • You're using "Completely Block VWO" mode with consent-gated loading
  • Anti-flicker timeout is too short — increase filter tolerance
  • SmartCode is placed too low in the <head> — move it higher
Consent banner is blurred/hidden by VWO's anti-flicker

Configure VWO's anti-flicker Filter selector to exclude your banner:

  • In VWO dashboard: set selector to .dg-banner (or your banner's CSS class)
  • This tells VWO to keep the banner visible while blurring the rest of the page
VWO campaigns show but tracking never starts even with consent

If you're using "Partially Block VWO" mode:

  • Verify your isConsentGiven() function returns "1" after consent granted
  • Check browser console for VWO errors
  • Ensure VWO's tracking scripts aren't blocked by other cookie blockers or ad blockers
  • Test with VWO's Preview mode to verify campaign configuration

 

Need help?
If you have any questions, please reach out to your dedicated Account Manager or contact us at support@datagrail.io.

Disclaimer: The information contained in this message does not constitute as legal advice. We would advise seeking professional counsel before acting on or interpreting any material.