Skip to main content

cookie-consent-mode

In Figma Sites, it's possible to enable a cookie consent banner that collects whether a user has granted permission for:

  • Marketing cookies
  • Personalization cookies
  • Analytics cookies

In your code layers, you can create behavior that changes based on whether the user has granted or denied permission for each cookie. Figma stores the cookie consent values in a localStorage item called cookie-consent-mode. The cookie-consent-mode object has four keys:

The possible values are:

  • granted
  • denied

This is useful if you want to modify the behavior of your layers based on whether a user granted or denied permission for a cookie.

To obtain the values, get the cookie-consent-mode item from localStorage:

const siteCookies = localStorage.getItem('cookie-consent-mode');
if (siteCookies) {
  try {
    setConsentData(JSON.parse(siteCookies));
  } catch (e) {
    console.error('Failed to parse cookie consent data:', e);
  }
}

Then, you can handle each of the object keys individually to implement different conditional functionality.

ad_storage​

ad_storage corresponds to Marketing cookies in Figma Sites. Marketing cookies determine whether the user allows tracking to enable ads personalization and tracking. If the user allows marketing cookies, the value is granted. Otherwise, the value is denied.

Example​

Suppose you have ads embedded in a code layer on your site. You can use ad_storage to determine whether you show personalized ads. The following example uses a mock implementation of Google Publisher Tags.

import { useState, useEffect } from "react";

export default function personalizedAdConsent() {
  const [consentData, setConsentData] = useState(null);
  const [adSettings, setAdSettings] = useState(null);

  useEffect(() => {
    const siteCookies = localStorage.getItem("cookie-consent-mode");
    if (siteCookies) {
      try {
        setConsentData(JSON.parse(siteCookies));
      } catch (e) {
        console.error("Failed to parse cookie consent data:", e);
      }
    }
  }, []);

  useEffect(() => {
    if (consentData?.ad_storage) {
      const isPersonalized = consentData.ad_storage === "granted";

      const mockGoogletagConfig = () => {
        if (!isPersonalized) {
          console.log("googletag.pubads().setPrivacySettings({nonPersonalizedAds: true})");
          return { nonPersonalizedAds: true };
        } else {
          console.log("googletag.pubads().setPrivacySettings({nonPersonalizedAds: false})");
          return { nonPersonalizedAds: false };
        }
      };

      const privacySettings = mockGoogletagConfig();

      setAdSettings({
        isPersonalized,
        privacySettings,
        status: isPersonalized ? "Personalized ads enabled" : "Non-personalized ads only"
      });
    }
  }, [consentData]);

  return adSettings?.status;
}

analytics_storage​

analytics_storage corresponds to Analytics cookies in Figma Sites. Analytics cookies determine whether the user allows tracking of site traffic to help improve site performance. If the user allows analytics cookies, the value is granted. Otherwise, the value is denied.

Example​

Suppose you're tracking analytics events in one of your code layers. In this example, you're using Google Tag Manager and you want to pass events to the data layer. You can use analytics_storage to determine whether you should pass those events. The following example uses a mock Tag Manager implementation.

import { useState, useEffect } from "react";

export default function AnalyticsStatus() {
  const [analyticsConsent, setAnalyticsConsent] = useState(null);

  useEffect(() => {
    const siteCookies = localStorage.getItem('cookie-consent-mode');
    if (siteCookies) {
      try {
        const consentData = JSON.parse(siteCookies);
        setAnalyticsConsent(consentData.analytics_storage);

        if (consentData.analytics_storage === 'granted') {
          window.dataLayer = window.dataLayer || [];
          window.dataLayer.push({
            'event': 'CookiesAllowed',
            'pagePath': window.location.href,
            'pageTitle': 'My Example Page'
          });
        }
      } catch (e) {
        console.error('Failed to parse cookie consent data:', e);
      }
    }
  }, []);

  if (!analyticsConsent) {
    return <div>No analytics consent data found</div>;
  }

  return (
    <div>
      {analyticsConsent === 'granted'
        ? "Tracking analytics with G-ABC123XYZ9"
        : "Not tracking analytics"}
    </div>
  );
}

functionality_storage​

functionality_storage corresponds to Essential cookies in Figma Sites. If cookie consent is enabled for your site, essential cookies are always required. Generally, you won't need to handle functionality_storage since the value is always granted.

personalization_storage​

personalization_storage corresponds to Personalization cookies in Figma Sites. Personalization cookies determine whether the user allows tracking to tailor your site experience to your interests. If the user allows personalization cookies, the value is granted. Otherwise, the value is denied.

Example​

Suppose you want to collect data about a user in order to personalize their web experience. In this example, you want to handle User Agent so you can make sure their experience is ideal for their platform. You can use personalization_storage to determine whether the user wants to allow that kind of personalization.

import { useState, useEffect } from "react";

export default function PersonalizedWelcome() {
  const [consentData, setConsentData] = useState(null);

  useEffect(() => {
    const siteCookies = localStorage.getItem('cookie-consent-mode');
    if (siteCookies) {
      try {
        setConsentData(JSON.parse(siteCookies));
      } catch (e) {
        console.error('Failed to parse cookie consent data:', e);
      }
    }
  }, []);

  if (!consentData) {
    return "Welcome user!";
  }

  if (consentData.personalization_storage === 'granted') {
    const platform = window.navigator.userAgentData?.platform || 'unknown';
    return `Welcome ${platform} user!`;
  }

  return "Welcome user!";
}