Skip to main content

Optimizely + DataGrail Consent

Optimizely Web Experimentation loads synchronously in the page <head> and sets cookies immediately by default. This guide shows you how to gate measurement behind consent while keeping experiments running to avoid page flicker.

The best pattern for Optimizely + DataGrail is holdEvents + sendEvents:

  1. Hold events before the Optimizely snippet loads
  2. Experiments run immediately (no flicker)
  3. Measurement data queues in localStorage
  4. On consent, flush the queue to Optimizely

This approach balances user experience (no flicker) with compliance (measurement gated behind consent).

Implementation​

Add this code before your Optimizely snippet:

<script>
  // Initialize Optimizely queue and hold events
  window["optimizely"] = window["optimizely"] || [];
  window["optimizely"].push({ "type": "holdEvents" });
</script>

<!-- Your Optimizely snippet goes here -->
<script src="https://cdn.optimizely.com/js/YOUR_PROJECT_ID.js"></script>

Then register DataGrail callbacks to send events when Performance consent is granted:

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

  function handleOptimizelyConsent(preferences) {
    if (window.DG_BANNER_API.categoryEnabled('performance') && window.optimizely) {
      window.optimizely.push({ "type": "sendEvents" });
    }
  }

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

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

How The Callbacks Work​

The initial_preference_callback fires on every page load with any existing consent preferences — this handles returning visitors who already granted consent. The preference_callback fires when a visitor makes a new consent choice via the banner.

By registering both callbacks, Optimizely events are sent immediately for returning visitors with cached consent, and on first interaction for new visitors. See the Callbacks documentation for more details.

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
optimizelyEndUserIdPerformance6 monthsUnique visitor ID for bucketing
optimizelySessionPerformanceSessionSession tracking
optimizelyRedirectDataPerformanceSessionRedirect experiment data (5s duration)
Important Note About holdEvents

The holdEvents approach does set the optimizelyEndUserId cookie before consent. This cookie is necessary for consistent variant assignment. If your compliance requirements prohibit any cookies before consent, you'll need to fully block the Optimizely snippet via DataGrail's script blocking (which requires a page reload after consent) or consider server-side testing.

Integration Comparison​

Here's how different integration approaches compare:

ApproachFlicker?Cookies Before Consent?MeasurementUser Experience
holdEvents + sendEvents (recommended)NoYes (optimizelyEndUserId)Queued until consentBest — smooth experience
Full blocking (disable API)YesNoAfter consent + reloadPoor — visible flicker + reload
No consent gatingNoYes (all)ImmediateBest UX, legally risky
Server-side testingNoNoServer-controlledBest compliance, requires dev work

Troubleshooting​

Events aren't being sent after consent is granted

Check that:

  • Your preference_callback is firing (add a console.log to verify)
  • The Performance category is enabled in the user's consent preferences
  • window.optimizely exists (Optimizely snippet loaded successfully)
  • You're using sendEvents (not activate, which is for a different use case)
Page still flickers when Optimizely loads

Flicker occurs when Optimizely loads too late. Ensure:

  • You're using the holdEvents approach (experiments run immediately)
  • Optimizely snippet is in <head>, not loaded via GTM
  • You're not using full blocking (disable/optOut API)
Returning visitors see flicker on first page load

If returning visitors have cached consent, check:

  • You've registered an initial_preference_callback (fires on page load with cached consent)
  • The Optimizely snippet loads in the <head> before the callback fires

 

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.