Quickly Learn from the Legal Necessity of Cookie Consent to Implementation Methods

The Necessity of Cookie Consent Popups

Cookie consent popups are essential according to the GDPR (General Data Protection Regulation) and ePrivacy Directive. GDPR is a personal data protection regulation implemented in the EU that prohibits websites from storing or accessing cookies without user consent. This is because cookies may contain personally identifiable information.

This regulation is designed to ensure users have the right to know and control how their data is used, with violations subject to the following penalties:

• Up to 4% of global annual revenue
• A fine of 20 million euros (approximately 2.8 billion KRW)

Therefore, websites targeting the global market must display a popup asking for consent to use cookies.

Classification of Cookies

Cookies are broadly categorized by function and management entity.

Classification by Function

1. Essential Cookies
   • Cookies necessary to provide basic website functionality (e.g., page navigation, secure access)
   • Automatically activated without separate user consent and essential for proper website operation
2. Functional Cookies
   • Used to improve user preferences and experiences (e.g., language settings, dark mode, customized layouts)
   • Features for user convenience but require consent
3. Performance/Analytics Cookies
   • Used to analyze and improve website performance (e.g., visitor behavior analysis, usage time, error reporting)
   • Collect anonymous data but require user consent
4. Marketing Cookies
   • Used to target advertisements and provide content matching user interests (e.g., customized ads)
   • User consent is essential

Classification by Management Entity

1. First-Party Cookies
   • Cookies created by the website the user directly visits
   • Used only in the currently visited domain, mainly created to support that site's functionality
   • Mostly classified as essential or functional cookies
2. Third-Party Cookies
   • Cookies created by domains other than the website being visited
   • Mainly used for user tracking, ad targeting, analytics, etc.
   • Recently being blocked or restricted by default in many browsers

Are LocalStorage and SessionStorage Also Subject to Policy?

Although it's called a cookie policy, cookies themselves aren't what's important. All personal data should not be stored without permission. Therefore, whether it's cookies, LocalStorage, or SessionStorage, values handling personal information must be stored in compliance with policy.

This is because GDPR focuses on the data itself, not the technology. The principle that user consent is required regardless of how personal information is stored remains unchanged.

Methods for Implementing Cookie Consent Popups

Now that we understand why cookie consent popups are implemented, let's look at actual implementation methods.

1. Implementation through CMP

The simplest method is to use a CMP (Cookie Management Platform), which is a specialized platform that manages cookie and personal information consent for websites.

Using a CMP has many advantages: it can continuously track and comply with privacy laws in various regions that may change, automatically support various languages, and eliminate the need for maintenance as you don't implement it directly. However, it has disadvantages such as cost and potential difficulties with customization.

There are several CMPs with Google partnerships that you can find and implement according to your conditions.

2. Direct Implementation

If cost issues or customization needs arise, direct implementation is also an option. The main features to consider when implementing directly are as follows:

1) Consent Settings Management

First, define a state structure to manage user consent settings.

// Consent settings type definition
interface ConsentSettings {
  essential: boolean; // Essential cookies (always true)
  functional: boolean; // Functional cookies
  analytics: boolean; // Analytics cookies
  marketing?: boolean; // Marketing cookies (optional)
}

// Default consent settings (initial values applied to all users)
const defaultConsentSettings: ConsentSettings = {
  essential: true, // Essential is always true
  functional: false,
  analytics: false,
  marketing: false,
};

2) Script Management According to Consent

Implement a method to dynamically load related scripts according to the items the user has consented to.

export default function ScriptContainer() {
  const [consentSettings, setConsentSettings] = useState<ConsentSettings>(getStoredConsent() || defaultConsentSettings);

  // Load scripts according to consent settings
  return (
    <>
      {/* Essential scripts always load */}
      <EssentialScripts />

      {/* Load when functional cookies are consented */}
      {consentSettings.functional && <FunctionalScripts />}

      {/* Load when analytics cookies are consented */}
      {consentSettings.analytics && (
        <>
          <GoogleAnalyticsScript />
          <ClarityScript />
        </>
      )}

      {/* Load when marketing cookies are consented */}
      {consentSettings.marketing && <MarketingScripts />}
    </>
  );
}

3) Implementing the Consent Interface

A UI implementation is needed to obtain consent from users. Basic consent popups and detailed settings panels should be implemented.

function CookieConsentBanner() {
  const [showSettings, setShowSettings] = useState(false);
  const [consent, setConsent] = useState(getStoredConsent() || defaultConsentSettings);

  // Function to save consent settings
  const saveConsent = (settings: ConsentSettings) => {
    localStorage.setItem('cookieConsent', JSON.stringify({
      ...settings,
      timestamp: new Date().toISOString()
    }));
    setConsent(settings);
    // Send consent information to server if necessary
  };

  // Hide banner if consent already exists
  if (localStorage.getItem('cookieConsent')) {
    return null;
  }

  return (
    <div className="cookie-banner">
      {!showSettings ? (
        // Basic consent banner
        <div className="simple-banner">
          <p>This website uses cookies to provide the best experience.</p>
          <div className="button-group">
            <button onClick={() => saveConsent({...consent, functional: true, analytics: true, marketing: true})}>
              Accept All
            </button>
            <button onClick={() => saveConsent({...consent, functional: false, analytics: false, marketing: false})}>
              Essential Cookies Only
            </button>
            <button onClick={() => setShowSettings(true)}>
              Settings
            </button>
          </div>
        </div>
      ) : (
        // Detailed settings panel
        <div className="settings-panel">
          {/* Implement detailed settings UI */}
        </div>
      )}
    </div>
  );
}

4) Integration with Analytics and Marketing Tools

When using tools like Google Analytics, Clarity, Google Tag Manager, they should be properly initialized according to consent status.

GTM Example

// Configure according to consent status
if (consentSettings.analytics) {
  // When analytics consent exists
  window.gtag('consent', 'update', {
    analytics_storage: 'granted'
  });
} else {
  // When consent doesn't exist
  window.gtag('consent', 'default', {
    analytics_storage: 'denied'
  });
}

• https://developers.google.com/tag-platform/security/guides/consent

Clarity Settings: When using Clarity, you need to configure settings directly in the Clarity dashboard.

• Clarity Cookie Consent Settings Documentation

Verification Methods After Implementation

After implementation, there are several sites where you can test whether you've properly complied with cookie policies.

• Cookie Metrix: Scans your website's cookie usage and checks GDPR compliance
• 2GDPR: Evaluates your website's privacy and cookie policy compliance

Conclusion

Cookie consent popups are not just UI elements but legal requirements and important mechanisms for protecting users' personal information. Both using CMPs and direct implementation have pros and cons, so you should choose the appropriate method considering your project's scale, budget, and customization requirements. (Personally, I'd just use a CMP...)

As awareness of privacy protection increases, cookie consent will become even more important in the future. Implementing consent mechanisms that are user-friendly while meeting legal requirements is becoming one of the important responsibilities of frontend developers.

References

• Do the GDPR and Cookie-Law regulations apply to localStorage?
• What is GDPR, the EU's new data protection law? - GDPR.eu
• Help with the EU user consent policy – Company – Google