How Can I Delay Cookie Writing and Data Collection in Convert Until Visitor Consent Is Provided?
🔒 Delay Tracking & Cookie Collection in Convert Until Visitor Consent is Granted — GDPR, CCPA & ITP Compliance Made Easy
✅ Benefits of This Feature:
Data Privacy Compliance: Delaying cookie writing and experiment execution ensures that your website complies with data protection regulations like GDPR and CCPA, safeguarding your organization against potential legal risks.
Visitor Trust: By not collecting data or running experiments until explicit consent is granted, you show respect for visitor privacy, building trust with your audience.
Flexible Consent Integration: This feature allows seamless integration with your Consent Management Software (CMS), ensuring that tracking and experiments start only when users agree, aligning your marketing efforts with privacy expectations.
Enhanced Control: It offers precise control over cookie writing and experiment execution. This lets you decide whether to block just cookies, or both cookies and experiments, depending on your compliance needs.
Improved User Experience: With optional page blurring, you can create clear visual cues that guide users to provide consent while maintaining professional presentation.
⚖️ Why It Should Always Be Configured Alongside Consent Management Software:-
Automated Consent Handling: While Consent Management Software manages the user interface and processes the consent status, this feature ensures that tracking and experimentation behavior are properly aligned with the consent choices made by the user.
-
Seamless User Experience: Without this feature, Consent Management Software might only block cookies but not the experiments themselves, leading to potential non-compliant data collection or experiments running prematurely, which can cause discrepancies or legal issues.
-
Consistent Data Tracking: Configuring this alongside your Consent Management Software ensures that once consent is provided, tracking resumes smoothly, avoiding data gaps and ensuring that your analytics and marketing efforts reflect the complete visitor journey.
Setup Option 1: Showing Experiences Until Consent Is Given (with Optional Page Blur)
In this setup, you delay cookie writing but continue to show experiments and related variants until the visitor gives consent. New enhancement: You can optionally blur the page background to draw attention to your cookie consent modal.
Step 1: Notify Convert That Consent Is Required
To ensure Convert blocks cookie writing but still shows experiments, add the following code in the Convert App > Your Project > Configuration > Global Project JavaScript section:
if (!convert.getCookie("_conv_v")) _conv_q.push({ what: "consentRequired" });
Step 2A: Basic Re-enable Tracking After Consent
Once the visitor gives consent, tracking can be re-enabled, and cookies can be written by triggering the following code:
_conv_q.push({ what: "consentGiven" });
Step 2B: Enhanced Implementation with Page Blur (Optional)
For better consent visibility, execute to blur the page until consent is provided.
// Function to add full blur styles dynamically
function addFullBlurStyles() {
if (!document.getElementById('convert-full-blur-styles')) {
var style = document.createElement('style');
style.id = 'convert-full-blur-styles';
style.textContent = `
.convert-full-blur {
filter: blur(5px) !important;
pointer-events: none !important;
transition: filter 0.3s ease !important;
}
`;
document.head.appendChild(style);
}
}
// Apply full blur immediately if consent required
document.addEventListener('DOMContentLoaded', function() {
if (!convert.getCookie("_conv_v")) {
addFullBlurStyles();
document.body.classList.add('convert-full-blur');
// Your CMP will automatically show its consent modal
// We enhance the experience with page blur for maximum impact
}
});
function handleFullConsentGiven() {
// Remove blur
document.body.classList.remove('convert-full-blur');
// Enable all Convert functionality
window._conv_waiting_for_consent = false;
_conv_q.push({ what: "consentGiven" });
// Optional: Reload page to start experiments properly
// window.location.reload();
}
How to Integrate with GTM or Consent Management Systems:
Google Tag Manager (GTM): You can use GTM to trigger this code by creating a tag that listens for the consent event. This way, when the consent is given, GTM fires the tag to execute the _conv_q.push({ what: "consentGiven" });
code.
Consent Management Systems: Most Consent Management Platforms (CMPs) have events that fire when a user gives consent. You can use these events to trigger custom JavaScript code like the consentGiven code to re-enable tracking and cookie writing.
Consequences and Scenarios:
- No Content Flashing: Since experiments are displayed even before consent, visitors will not experience content flashing. The page loads normally, but cookies are not written until consent is given.
- Potential Data Collection: Because the experiments are shown, you will still have data on visitor interactions with the experiments, even if cookies are not written. However, if consent is never given, some interactions may not be fully captured in cookie-based analytics.
- Enhanced Visibility (with blur): Page blur draws immediate attention to consent requirements
Professional Appearance: Clear visual indication of consent requirement when blur is used
Important Considerations:
Integrating With Consent Management Tools: Ensure that your CMP is configured to correctly trigger the consent event and execute the _conv_q.push({ what: "consentGiven" });
function.
Compliance: This setup ensures compliance with GDPR and CCPA as no cookies are written until explicit consent is provided. However, experiments are still shown prior to consent.
Setup Option 2: Blocking Both Cookies and Experiments Until Consent Is Given (with Optional Page Blur)
In this setup, both cookie writing and experiment execution are blocked until the visitor gives consent. This method provides the strictest level of privacy protection.
Step 1: Block Both Cookies and Experiments Until Consent
To block both cookie writing and experiment display until consent is provided, add the following code in the Global Project JavaScript section:
if (!convert.getCookie("_conv_v")) {
_conv_q.push({ what: "consentRequired" });
window._conv_waiting_for_consent = true;
}
Step 2A: Basic Re-enable Tracking and Experiments After Consent
When the visitor provides consent, tracking and experiments can be re-enabled using the following code:
window._conv_waiting_for_consent = false;
_conv_q.push({ what: "consentGiven" });
Step 2B: Enhanced Implementation with Page Blur (Optional)
// Function to add full blur styles dynamically
function addFullBlurStyles() {
if (!document.getElementById('convert-full-blur-styles')) {
var style=document.createElement('style');
style.id = 'convert-full-blur-styles';
style.textContent = `
.convert-full-blur {
filter: blur(5px) !important;
pointer-events: none !important;
transition: filter 0.3s ease !important;
}
.consent-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.7) !important;
z-index: 10000 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.consent-modal-content {
background: white !important;
padding: 2rem !important;
border-radius: 8px !important;
max-width: 500px !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}
`;
document.head.appendChild(style);
}
}
// Apply full blur immediately if consent required
document.addEventListener('DOMContentLoaded', function() {
if (!convert.getCookie("_conv_v")) {
addFullBlurStyles();
document.body.classList.add('convert-full-blur');
showFullConsentModal();
}
});
function handleFullConsentGiven() {
// Remove blur and overlay
document.body.classList.remove('convert-full-blur');
var overlay = document.querySelector('.consent-overlay');
if (overlay) overlay.remove();
// Enable all Convert functionality
window._conv_waiting_for_consent = false;
_conv_q.push({ what: "consentGiven" });
// Reload page to start experiments properly
window.location.reload();
}
// Function to create full consent modal
function showFullConsentModal() {
addFullBlurStyles();
var overlay = document.createElement('div');
overlay.className = 'consent-overlay';
overlay.innerHTML = `
<div class="consent-modal-content">
<h2>Privacy Consent Required</h2>
<p>This website uses cookies and runs experiments to improve your experience. We need your consent before proceeding.</p>
<button onclick="handleFullConsentGiven();">Accept & Continue</button>
<button onclick="this.closest('.consent-overlay').remove();">Decline</button>
</div>
`;
document.body.appendChild(overlay);
}
How to Integrate with GTM or Consent Management Systems:
Google Tag Manager (GTM): Create a tag in GTM that listens for a consent event and executes the consent given code once consent is provided.
Consent Management Systems: Many CMPs allow you to trigger custom code when consent is provided. Use the consent event in your CMP to run the consentGiven code, ensuring both experiments and cookie writing start only after consent.
Consequences and Scenarios:
- Content Flashing: Since experiments are blocked until consent is granted, the visitor may experience a content flash when the page refreshes after consent is provided, causing experiments to start running only at that point.
- Potential Data Loss: If consent is never given, experiment visits and goal conversions will not be tracked because the experiments are never shown to the visitor.
- Maximum Privacy: No experiments or cookies until explicit consent
- Clear User Intent (with blur): Page blur makes consent requirement unmistakable
Compliance Considerations:
GDPR & CCPA Compliance: This method fully complies with data privacy regulations, ensuring that neither cookies are written nor experiments are shown without explicit visitor consent.
ITP Compliance: This method also helps ensure compliance with Intelligent Tracking Prevention (ITP) standards, as tracking only starts once consent is provided.
Key Differences Between Options:
Option 1: Delay Cookies Only
- ✅ Shows experiments immediately
- ✅ No content flashing
- ⚠️ Experiments run before consent
- ❌ Some data collection occurs even without consent
- Use when: You want to maintain user experience but delay cookie writing
Option 2: Block Everything
- ❌ Blocks all experiments until consent
- ⚠️ Potential content flashing after consent
- ✅ No experiments run before consent
- ✅ Zero data collection until consent
- Use when: You need strictest privacy compliance
Integration Guidelines
Google Tag Manager Integration
// GTM Custom HTML Tag - Consent Given
document.addEventListener('DOMContentLoaded', function() {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push(function() {
if (this.get('consent_marketing') === 'granted') {
// Remove any applied blur effects
document.body.classList.remove('convert-consent-blur', 'convert-full-blur');
// Remove any consent overlays
var modals = document.querySelectorAll('.cookie-consent-modal, .consent-overlay');
modals.forEach(function(modal) {
modal.remove();
});
// For Option 2, also reset the waiting flag
if (typeof window._conv_waiting_for_consent !== 'undefined') {
window._conv_waiting_for_consent = false;
}
// Enable Convert tracking
_conv_q.push({ what: "consentGiven" });
}
});
});
Consent Management Platform Integration
// OneTrust example
window.addEventListener('OneTrustGroupsUpdated', function() {
if (OnetrustActiveGroups.includes('C0002')) {
// Remove blur
document.body.classList.remove('convert-consent-blur', 'convert-full-blur');
// Remove modals
var modals = document.querySelectorAll('.cookie-consent-modal, .consent-overlay');
modals.forEach(function(modal) {
modal.remove();
});
// Enable Convert
if (typeof window._conv_waiting_for_consent !== 'undefined') {
window._conv_waiting_for_consent = false;
}
_conv_q.push({ what: "consentGiven" });
}
});
// Cookiebot example
window.addEventListener('CookiebotOnAccept', function() {
if (Cookiebot.consent.marketing) {
// Remove blur
document.body.classList.remove('convert-consent-blur', 'convert-full-blur');
// Remove modals
var modals = document.querySelectorAll('.cookie-consent-modal, .consent-overlay');
modals.forEach(function(modal) {
modal.remove();
});
// Enable Convert
if (typeof window._conv_waiting_for_consent !== 'undefined') {
window._conv_waiting_for_consent = false;
}
_conv_q.push({ what: "consentGiven" });
}
});
// Cookie Information example
window.addEventListener('CookieInformationConsentGiven', function() {
if (CookieInformation.getConsentGivenFor('cookie_cat_marketing')) {
// Remove blur
document.body.classList.remove('convert-consent-blur', 'convert-full-blur');
// Remove modals
var modals = document.querySelectorAll('.cookie-consent-modal, .consent-overlay');
modals.forEach(function(modal) {
modal.remove();
});
// Enable Convert
if (typeof window._conv_waiting_for_consent !== 'undefined') {
window._conv_waiting_for_consent = false;
}
_conv_q.push({ what: "consentGiven" });
}
});
Best Practices
When to Use Page Blur:
- ✅ High-value conversion pages
- ✅ Content-heavy pages where consent is critical
- ✅ E-commerce checkout processes
- ❌ Simple landing pages
- ❌ Fast session pages
Testing Your Implementation:
- Clear all Convert cookies (_conv_v, etc.)
- Reload page and verify consent behavior
- Test consent granting functionality
- Verify experiments start properly post-consent
- Test across different browsers and devices
Performance Considerations:
- All styles are injected via JavaScript to avoid external CSS dependencies
- Styles use !important to ensure they override existing styles
- Consider the timing of when styles are applied vs. when content loads