Manage site tracking consent

Use consent management solutions to respect site visitor privacy in Webflow Analyze & Optimize.

To address potential privacy law compliance issues when using Webflow Analyze and/or Optimize, you might consider implementing a consent management solution and a consent banner that allows site visitors to opt in or out of tracking. You can use a third-party consent management platform (CMP) App or integration, integrate an existing CMP provider via Webflow’s APIs, or design a consent banner and manage site tracking consent yourself via custom code.

Manage site tracking consent with a CMP App or integration

You can use consent management platform (CMPs) Apps and integrations to address potential privacy law compliance issues when using Webflow Analyze and/or Optimize.

Manage site consent with DataGrail

DataGrail Consent is an integrated CMP that integrates directly with Google Tag Manager. DataGrail adjusts your Analyze and/or Optimize tracking default settings based on the location of the site visitor (and what consent policy applies to them) and their consent choice (through the banner notice that appears on your site or a universal opt-out signal). Learn more about integrating DataGrail for consent management.

Manage site consent with Finsweet

The Finsweet Components App integrates directly with Webflow and provides a solution to manage consent tracking and give site visitors the option to opt in or out of site tracking. Learn more about using the Finsweet Components App for consent management.

Integrate an existing consent management platform

If you already use a consent management platform, you can use custom code to connect it to Webflow via Webflow’s APIs.

Webflow offers APIs to send OptIn and OptOut signals, as well as check the current state of the flag for a given users:

    // Ensure Webflow APIs have initialized
	Webflow.push(() => {
		// First, detect the current state
		const isOptedOut = Webflow.analytics.getIsOptedOut();
		if (isOptedOut) {
			//
			// Your CMP logic to detect an optIn signal goes here
			//
			// Then you call Webflow to let us know there's been an optIn
			Webflow.analytics.optIn();
		}
		else {
			//
			// Your CMP logic to detect an optOut signal goes here
			//
			// Then you call Webflow to let us know there's been an optOut
			Webflow.analytics.optOut();
		}
	});

Integrate OneTrust

If you use OneTrust, the following code sample can help your team get started. It checks the OneTrust consent cookie and calls the Webflow OptIn/OptOut APIs accordingly.

Webflow.push(() => {
  // Function to opt in or out based on consent preferences
  const handleWebflowAnalyticsConsent = () => {
    try {
      // Logic to check consent groups from the OneTrust cookie
      const otCookieKey = 'OptanonConsent=';
      const otCookie = document.cookie.split('; ').find(row => row.startsWith(otCookieKey));
      if (!otCookie) {
        throw new Error('OneTrust cookie not found.');
      }
      const otGroupsKey = 'groups=';
      const otGroups = decodeURIComponent(otCookie.split('&').find(row => row.startsWith(otGroupsKey)).split('=')[1]);
      // OneTrust groups: 1 = necessary, 2 = performance, 3 = functional, 4 = targeting
      const OT_FUNCTIONAL_CONSENT = '3:1'; // Ensure this matches your expected consent group
      // Check for functional cookies group
      const hasOptedIn = otGroups.indexOf(OT_FUNCTIONAL_CONSENT) !== -1;
      // Adjust Webflow Analytics opt-in/out based on consent
      if (hasOptedIn) {
        Webflow.analytics.optIn();
      } else {
        Webflow.analytics.optOut();
      }
    } catch (e) {
      console.error('Error handling OneTrust consent:', e);
    }
  };
  // Set up the OneTrust consent change listener to check when preferences change
  if (typeof OneTrust !== 'undefined' && OneTrust.OnConsentChanged) {
    OneTrust.OnConsentChanged(() => {
      handleWebflowAnalyticsConsent();
    });
  }
  // Initial check when the page loads
  handleWebflowAnalyticsConsent();
});

Integrate TrustArc

If you use TrustArc, the following code sample can help your team get started. It checks the TrustArc consent preferences and calls the Webflow OptIn/OptOut APIs accordingly.

Webflow.push(() => {
  try {
    // Logic to check consent preferences from TrustArc
    const ta_gdpr_prefs = JSON.parse(localStorage.getItem('truste.cookie.notice_gdpr_prefs')).value;
    // TrustArc levels: 0 = required, 1 = functional, 2 = advertising
    const TA_FUNCTIONAL = 1; // Ensure this matches your expected consent group
    // Check for functional cookies group
    const hasOptedIn = ta_gdpr_prefs.indexOf(TA_FUNCTIONAL) >= 0;
    // Adjust Webflow Analytics opt-in/out based on consent
    if (hasOptedIn) {
      Webflow.analytics.optIn();
    } else {
      Webflow.analytics.optOut();
    }
  } catch (e) {
    console.error('Error handling TrustArc consent:', e);
  }
});

Manage site tracking consent via custom code

Design the consent banner

To design your consent banner:

1. Create and design a banner however you like, including the consent notification message
2. Give your banner an ID (e.g., consentPopup)
3. Add an “Accept” button
4. Give your button a class (e.g., consentButton)
5. Give your button an ID of optIn
6. Add a “Decline” or “Close” button
7. Give your button the same class as the “Accept” button
8. Give your button an ID of optOut
9. (Optional) Include a “Learn more” link to link site visitors to your privacy policy page
10. Drag the banner inside of a div to serve as your popup wrapper
11. Give the div a class (e.g., popupWrapper)
12. Set the popup wrapper’s position to fixed
13. Choose a preset position (e.g., bottom) or manually adjust the position of the popup wrapper
14. Make the popup wrapper a component
15. Add the component to all of your site pages

Animate the consent banner

First, create an interaction that hides the consent banner when a site visitor opts in to tracking:

1. Select the “Accept” button on the canvas 
2. Go to Interactions panel > Element trigger 
3. Click the “plus” icon to create a new element trigger
4. Choose Mouse click (tap)
5. Go to Trigger settings and click Class 
6. Go to On 1st click and click Select an action
7. Choose Start an animation
8. Click the “plus” icon to create a custom animation 
9. Give your custom animation a name (e.g., “Close the consent popup”) 
10. Select the popup wrapper on the canvas
11. Click the “plus” icon next to Actions to add an action to your animation
12. Go to Miscellaneous and choose Hide/show
13. Go to Hide/show and set the display to none
14. Click Save

Then, create a similar interaction to hide the consent banner when a site visitor opts out of tracking: 

1. Select the “Decline” button on the canvas
2. Click the Mouse click (tap) element trigger you just created
3. Go to On 1st click and click the radio button next to your “Close the consent popup” custom animation
4. Click Done

Next, create an interaction to show the consent banner when the page loads: 

1. Go to Interactions panel > Page trigger
2. Click the “plus” icon to create a new page trigger
3. Choose Page load
4. Go to When page starts loading and click Select an action
5. Choose Start an animation
6. Click the “plus” icon to create a custom animation
7. Give your custom animation a name (e.g., “Show the consent popup”)
8. Select the popup wrapper on the canvas
9. Click the “plus” icon next to Actions to add an action to your animation
10. Go to Hide/show and set the display to whichever display setting you want (except none) 
11. Check Set as initial state
12. Click Save

Finally, if your site has more than one page, make sure the consent banner loads on each of your pages: 

1. Open another page on your site
2. Go to Interactions panel > Page trigger
3. Click the “plus” icon to create a new page trigger
4. Choose Page load
5. Go to When page starts loading and click Select an action
6. Choose Start an animation
7. Choose your “Show the consent popup” custom animation
8. Repeat the above steps for all pages on your site

Embed custom code

To make the consent banner work, go to Site settings > Custom code > Footer code and embed the following script: 

<script>
Webflow.push(() => {
  const isOptedOut = Webflow.analytics.getIsOptedOut();
  const optOutButton = document.querySelector('#optOut');
  const optInButton = document.querySelector('#optIn');
  if (isOptedOut) {
    optInButton.addEventListener("click", function () {
      Webflow.analytics.optIn();
    });
  } else {
    optOutButton.addEventListener("click", function () {
      Webflow.analytics.optOut();
    });
  }
});
</script>