Skip to main content

Framer Cookie Banner

This guide walks you through integrating Dreamdata Analytics with Framer's built-in Cookie Banner component. The Cookie Banner component uses Google Consent Mode v2, making it easy to implement privacy-compliant analytics tracking.

Overview​

Framer's Cookie Banner component provides a native consent management solution that:

  • Stores user consent preferences in localStorage under the key framerCookiesConsentMode
  • Integrates with Google Tag Manager via Consent Mode v2
  • Supports different consent levels: Necessary, Preferences, Analytics, and Marketing

Dreamdata Analytics can be configured to respect these consent preferences, always initializing but running cookieless accordingly based on user consent.

Prerequisites​

Before you begin, ensure you have:

  • A Framer website with the Cookie Banner component added
  • A Google Tag Manager account (required)
  • Access to your Dreamdata account and API key
  • Administrative access to your Framer project settings
  • (Optional) Access to Framer's custom code settings for SPA tracking placement
  1. In Framer, open the Insert Menu
  2. Search for "Cookie Banner" and drag it onto your canvas
  3. Add the component to every page, or preferably to a common component like a navbar or footer

The Cookie Banner supports different consent configurations:

Consent TypeGoogle Consent Mode Mapping
Necessarysecurity_storage + functionality_storage
Preferencespersonalization_storage
Analyticsanalytics_storage
Marketingad_storage + ad_user_data + ad_personalization

For Dreamdata Analytics, ensure the Analytics option is available for users to consent to.

Regional Settings​

Configure the banner behavior for different regions:

  • EU visitors: Use "Customizable" or "Accept/Reject" to comply with GDPR
  • Rest of world: Can use "No Choice" for automatic acceptance, or match EU settings

Part 2: Google Tag Manager Setup​

Google Tag Manager (GTM) is required for integrating Dreamdata Analytics with Framer. GTM handles the main Dreamdata initialization and consent management integration.

Create a GTM Container​

  1. Go to Google Tag Manager
  2. Create a new container for your website (or use an existing one)
  3. Note your Container ID (format: GTM-XXXXXXX)
  1. In GTM, navigate to Admin → Container Settings
  2. Enable Consent Overview
  3. This allows tags to respect user consent preferences

Connect GTM to Framer​

  1. In Framer, select your Cookie Banner component
  2. In the properties panel, find the GTM Container ID field
  3. Enter your Container ID (e.g., GTM-XXXXXXX)

Part 3: Dreamdata Tag Configuration​

Create a Custom HTML Tag​

  1. In Google Tag Manager, click Tags → New
  2. Name the tag "Dreamdata Analytics"
  3. Select Custom HTML as the tag type

Add the Dreamdata Script​

Paste the consent-aware initialization script from the setup in your Dreamdata app into the Custom HTML field.

Navigate to Dreamdata and Data Platform > Sources > JavaScript v2.0. Click "Reconfigure script" to go through a wizard on how to set up the script.

Configure Tag Triggering​

  1. Click Triggering
  2. Select All Pages trigger
  3. Save the tag

Part 4: SPA Page Tracking​

Framer websites are Single Page Applications (SPAs), which means traditional page load events don't fire during navigation. To track page views correctly, add this additional script as a separate Custom HTML tag in GTM:

Create a Page Tracking Tag​

  1. In GTM, create another Custom HTML tag
  2. Name it "Dreamdata Framer Page Tracking"
  3. Add the following script:
<script>
  (function () {
    function getAnalytics() {
      return window.dreamdata && window.dreamdata.initialized
        ? window.dreamdata
        : window["dreamdata-cl"];
    }

    var last = location.pathname + location.search + location.hash;

    function firePage() {
      var analytics = getAnalytics();
      if (analytics && typeof analytics.page === "function") {
        analytics.page();
      }
    }

    function checkUrlChange() {
      var now = location.pathname + location.search + location.hash;
      if (now !== last) {
        last = now;
        firePage();
      }
    }

    ["pushState", "replaceState"].forEach(function (k) {
      var orig = history[k];
      if (!orig) return;
      history[k] = function () {
        var r = orig.apply(this, arguments);
        setTimeout(checkUrlChange, 0);
        return r;
      };
    });

    window.addEventListener("popstate", checkUrlChange);
    window.addEventListener("hashchange", checkUrlChange);
    window.addEventListener("framer:pageview", checkUrlChange);
  })();
</script>

This script:

  • Overrides history.pushState and history.replaceState to detect programmatic navigation
  • Listens for popstate and hashchange events for browser navigation
  • Listens for Framer's custom framer:pageview event
  • Only fires a page view when the URL actually changes

⚠️ SPA tracking Script Warning

If you place the SPA tracking script, you are responsible for maintaining it. The script depends on Framer's internal framer:pageview event and may break if Framer updates their platform.

Configure Triggering​

  1. Set the trigger to All Pages
  2. Save and publish the tag

Alternative: Place SPA Script in Framer Custom Code​

If you prefer, you can move the SPA page tracking script from GTM to Framer's custom code instead:

  1. Remove the SPA script from GTM (keep only the main Dreamdata tag in GTM)
  2. Access Framer Custom Code Settings
    • In your Framer project, click the Settings icon
    • Navigate to General → Custom Code
  3. Add the SPA script to "End of <body> tag"
    • Paste the same SPA tracking script shown above

The Dreamdata script automatically handles consent updates. When a user changes their consent preferences via the Framer Cookie Banner, the script:

  • Always initializes and tracks in cookieless mode by default
  • Monitors the GTM dataLayer for consent changes (analytics_storage granted/denied)
  • Switches to full tracking with cookies when analytics consent is granted
  • Reverts to cookieless mode when consent is revoked (tracking continues without cookies)

No additional GTM triggers or configuration is required for consent handling.

Testing and Debugging​

Enable Debug Mode​

To see detailed console logs during testing, open your browser's developer console and run:

localStorage.setItem("DD_DEBUGGER", "true");

Then refresh the page. You'll see logs for:

  • Consent state changes
  • DataLayer updates
  • Dreamdata initialization steps
  1. Clear cookies and localStorage to simulate a new visitor
  2. Load your Framer site - the Cookie Banner should appear
  3. Check the console - Dreamdata should initialize in cookieless mode
  4. Accept analytics cookies - Dreamdata should switch to full tracking mode
  5. Navigate between pages - Verify page views are tracked

Check in Dreamdata​

  1. Log in to your Dreamdata account
  2. Navigate to the debugger or live events view
  3. Verify page views are being received from your Framer site

Summary​

With this GTM-based integration, Dreamdata Analytics will:

  1. ✅ Always initialize and track in cookieless mode by default
  2. ✅ Respect consent changes in real-time
  3. ✅ Track page views correctly on Framer SPA navigation
  4. ✅ Switch between cookieless and full tracking based on consent
  5. ✅ Comply with GDPR and other privacy regulations

For more information about Framer's Cookie Banner, see the official Framer documentation.