How can I block all cookies loaded through GTM on page load until consent is given via a self-made div/button in Webflow?

Published on
September 22, 2023

To block all cookies loaded through Google Tag Manager (GTM) on page load until consent is given via a self-made div/button in Webflow, you can follow the steps outlined below:

  1. Create a custom script to handle cookie consent: In your Webflow project, create a custom script that will handle the loading of cookies based on user consent. You can add this script to the head or footer of your Webflow project.

  2. Implement a custom cookie consent banner: Design and create a custom cookie consent banner that will be displayed to users when they visit your website. This banner should include the necessary information about the types of cookies being loaded and allow users to give or deny consent.

  3. Use Webflow interactions to display the cookie consent banner: In Webflow, you can use interactions to trigger the display of the cookie consent banner. Set the initial state of the banner to "Hidden" and create an interaction that triggers the banner to appear when the page loads.

  4. Add a custom data attribute to GTM tags: Open your GTM container and edit each tag that loads cookies. Add a custom data attribute, such as data-cookie-consent, to identify which tags require consent before being fired.

  5. Update GTM firing rule: Create a new trigger in GTM that fires only when the cookie consent is given. The trigger should be set to fire when the custom data attribute data-cookie-consent is present and set to the value indicating consent.

  6. Update Webflow script to handle cookie consent: Modify the custom script in your Webflow project to handle the cookie consent. This script should listen for when the user gives or denies consent and update the value of the data-cookie-consent attribute accordingly.

By following these steps, you will be able to block all cookies loaded through GTM on page load until consent is given via a self-made div/button in Webflow. This approach ensures compliance with data protection regulations and respects user privacy.

Additional Questions:

  1. How can I create a custom script in Webflow to handle cookie consent?
  2. What are the best practices for designing a cookie consent banner in Webflow?
  3. Can I use Webflow interactions to animate the cookie consent banner?