How to customize the consent cookie banner to comply with GDPR, Google Consent Mode, and country-specific laws

gtag('consent', 'default', { ... });

<Script
  id='gtm-script'
  dangerouslySetInnerHTML={{
    __html: `
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}

      //  initializing default consent statuses
      gtag('consent', 'default', {
        'ad_storage': 'denied',
        'ad_user_data': 'denied',
        'ad_personalization': 'denied',
        'analytics_storage': 'denied',
        'personalization_storage': 'denied',
        'functionality_storage': 'granted',
        'security_storage': 'granted'
      });
      
      (function(w,d,s,l,i){
        w[l]=w[l]||[];
        w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
        var f=d.getElementsByTagName(s)[0], j=d.createElement(s), dl=l!='dataLayer'?'&l='+l:'';
        j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
        f.parentNode.insertBefore(j,f);
      })(window,document,'script','dataLayer','${GTM_ID}');
    `,
  }}
/>

<div className={`${styles.banner} ${showBanner && styles.isVisible}`}>
      <div className={styles.content}>
        {!showSettings ? (
          <>
            <h3 className={styles.title}> We use cookie to make wesite more convinient 🍪</h3>
            <p className={styles.message}>
              We use cookies to improve the site and provide you with more relevant information.
              You can customize your cookie settings or opt out of cookies. If you agree to {' '}
              <a href='/policy/cookies' target='_blank' className={styles.link}>
                cookie policy
              </a>
              , click “Accept All Cookies”. <br /> Do you want to change your cookie settings?{' '}
              <button onClick={handleOpenSettings} className={styles.showSettings}>
               Cookies settings
              </button>
            </p>
            <div className={styles.actions}>
              <button onClick={handleRejectAll} className={`${styles.btn} ${styles.secondary}`}>
                Reject all cookies
              </button>
              <button onClick={handleAcceptAll} className={`${styles.btn} ${styles.primary}`}>
                Accept all cookies
              </button>
            </div>
          </>
        ) : (
          <CookieSettings consent={consent} onChange={handleSettingsChange} onClose={handleCloseSettings} />
        )}
      </div>
    </div>

<>
	<button onClick={onClose} className={styles.hideSettings}>
	  <svg
	    width="24"
	    height="24"
	    viewBox="0 0 24 24"
	    fill="none"
	    xmlns="http://www.w3.org/2000/svg"
	  >
	    <path
	      d="M8.5 16.5L4 12M4 12L8.5 7.5M4 12L20 12"
	      stroke="currentColor"
	      stroke-width="1.8"
	      stroke-linecap="round"
	      stroke-linejoin="round"
	    />
	  </svg>
	  <span>Back</span>
	</button>
	<h3 className={styles.title}>Settings for cookie</h3>
	<div className={styles.category}>
	  <label className={styles.checkbox}>
	    <input type="checkbox" checked={consent.necessary} disabled />
	    <span>Strictly Nessesary cookies</span>
	  </label>
	  <p>
	    These cookies are necessary for the site to function properly and cannot be disabled. They provide authentication and basic site functionality. We do not use them for marketing purposes or to track your activity on other sites. You can set your browser to block them, but doing so may prevent the site from functioning properly.
	  </p>
	</div>
	<div className={styles.category}>
	  <label className={styles.checkbox}>
	    <input
	      type="checkbox"
	      checked={consent.analytics}
	      onChange={() => handleChange(CONSENT_TYPE.FUNCTIONAL)}
	    />
	    <span>Functional cookies</span>
	  </label>
	  <p>
	    These cookies are used to remember your preferences and enhance your experience, for example, by remembering your language, region or display preferences. They make your interaction with the Site more convenient and personalized. Disabling these cookies may affect some site features and usability.
	  </p>
	</div>
	<div className={styles.category}>
	  <label className={styles.checkbox}>
	    <input
	      type="checkbox"
	      checked={consent.analytics}
	      onChange={() => handleChange(CONSENT_TYPE.ANALYTICS)}
	    />
	    <span>Analytical cookies</span>
	  </label>
	  <p>
	     These cookies are used to analyze user preferences and help us improve the site. They allow us to better understand which sections and features are most popular and to personalize content recommendations. Disabling analytics cookies may affect the accuracy of our offers and recommendations.
	  </p>
	</div>
	<div className={styles.category}>
	  <label className={styles.checkbox}>
	    <input
	      type="checkbox"
	      checked={consent.marketing}
	      onChange={() => handleChange(CONSENT_TYPE.MARKETING)}
	    />
	    <span>Marketing cookies</span>
	  </label>
	  <p>
	    These cookies are used to display personalized ads, analyze the effectiveness of marketing campaigns, and determine your interests based on your interactions with the site. They help us provide you with more relevant advertising and limit the number of times you see the same ads. Disabling marketing cookies may reduce the quality of the ads you see.
	  </p>
	</div>
	<button
	  onClick={handleSave}
	  className={`${styles.btn} ${styles.primary}`}
	>
	  Save cookie settings
	</button>
	<p className={styles.notice}>
	 By clicking the "Save cookie setting" button, you agree to the processing of cookies in accordance with {" "}
	  <a href="/" target="_blank" className={styles.link}>
	    cookie policy.
	  </a>
	</p>
</>

import { getCookie, setCookie } from 'cookies-next'

const [consent, setConsent] = useState<TConsent>({
    necessary: true,
    functional: false,
    analytics: false,
    marketing: false,
  })

/**
 * handleAcceptAll — the user clicks on "Accept all cookies".
 * All consent categories (including analytics, advertising) are set.
 */
 const handleAcceptAll = () => {
    const newConsent = { necessary: true, analytics: true, marketing: true, functional: true }
    
    setConsent(newConsent)
    setCookie(CONSENT_TO_USE_COOKIES, JSON.stringify(newConsent), { maxAge: 365 })  
    updateGtmConsent('update', newConsent)
    
    setShowBanner(false)
  }

/**
 * handleRejectAll — the user rejects all optional cookies.
 * The rejection value is maintained, only mandatory cookies are enabled.
 */
  const handleRejectAll = () => {
    const newConsent = { necessary: true, analytics: false, marketing: false, functional: false }
    
    setConsent(newConsent)
    setCookie(CONSENT_TO_USE_COOKIES, JSON.stringify(newConsent), { maxAge: 365 })
    updateGtmConsent('update', newConsent)
    
    setShowBanner(false)
  }

/**
 * handleAccept — user saves individual settings (e.g. only selected analytics).
 */

 const handleSettingsChange = (newConsent: TConsent) => {
    setConsent(newConsent)
    setCookie(CONSENT_TO_USE_COOKIES, JSON.stringify(newConsent), { maxAge: 365 })
    updateGtmConsent('update', newConsent)
     
    setShowSettings(false)
    setShowBanner(false)
  }

const updateGtmConsent = (event: 'update' | 'default', consent: TConsent) => {
    if (typeof window === 'undefined' || typeof window.gtag !== 'function') return

    // Call gtag('consent', event, {...}) to send consent data to GTM.
    window.gtag('consent', event, {
      ad_storage: consent.marketing ? "granted" : "denied",
      ad_user_data: consent.marketing ? "granted" : "denied",
      ad_personalization: consent.marketing ? "granted" : "denied",
      analytics_storage: consent.analytics ? "granted" : "denied",
      personalization_storage: consent.functional ? "granted" : "denied", 
//can also be attributed to consent.marketing  
      functionality_storage: consent.functional ? "granted" : "denied",
      security_storage: consent.necessary ? "granted" : "denied",
      
      // wait_for_update: 500 - This parameter specifies the time in milliseconds that the
      // GTM will wait for the approval status to be updated before activating tags.
      // This can be useful to prevent tags from being triggered,
      // before the user makes a selection.
    })
  }

declare global { interface Window { dataLayer: Record<string, any>[] gtag: any }
}
export {}

useEffect(() => {
    const cookieConsent = getCookie(CONSENT_TO_USE_COOKIES) as CookieValueTypes
    
    // If consent has not been previously granted, display the banner.
    if (!cookieConsent) {
      setShowBanner(true)
    } else {
     //otherwise, the default settings are updated to those previously selected by the user. 
      const parsed = JSON.parse(cookieConsent)
      setConsent(parsed)
      updateGtmConsent('update', parsed)
    }
  }, [])

#Сookie policy
**1. Introduction**
Our website, [website name], uses cookies and similar technologies to enhance user experience, analyze traffic, and personalize content. This policy explains how we use cookies and how you can manage your preferences.
**2. What Are Cookies?**
Cookies are small text files placed on your computer or mobile device when you visit websites. They are widely used to make websites work more efficiently and to provide information to website owners.
**3. Types of Cookies We Use**
We use the following categories of cookies:
* **Strictly Necessary Cookies:** These cookies are essential for the website to function and allow you to use its features, such as accessing secure areas. Without these cookies, some services you request may not be available.
* **Performance Cookies:** These cookies collect information about how visitors use our site — for example, which pages are visited most often and whether users receive error messages. These cookies help us improve the performance of the website. All information collected is aggregated and anonymous.
* **Functional Cookies:** These cookies allow the website to remember choices you’ve made (e.g., username, language, region) and provide enhanced, more personalized features. They may also store preferences such as text size, fonts, and other customizable parts of the site.
* **Targeting or Advertising Cookies:** These cookies track your activity across this and other websites to show you ads that are more relevant to your interests. They may also limit the number of times you see an ad and help measure the effectiveness of advertising campaigns.
**4. How We Obtain Your Consent**
We request your consent to use cookies, except for strictly necessary cookies which may be set without consent. You can manage your cookie preferences at any time using the cookie banner or your browser settings.
**5. How to Manage Cookies**
You can control or delete cookies as you wish. For more information, visit [link to a resource such as All About Cookies]. You can delete all existing cookies on your device and configure most browsers to prevent them from being set. However, doing so may require you to manually adjust settings each time you visit the site, and some services or features may not work properly.
**6. Third-Party Cookies**
We may use third-party cookies for various purposes, including analytics and advertising. These cookies are governed by the privacy policies of the respective third parties.
**7. Data Transfers**
[Specify whether data collected via cookies is transferred outside the European Economic Area (EEA), and if so, on what legal basis.]
**8. Your Rights**
Under the GDPR, you have the right to access, correct, delete, restrict the processing of, and transfer your personal data, as well as the right to object to processing. For more details on these rights and how to exercise them, please refer to our Privacy Policy.
**9. Changes to This Cookie Policy**
We may update this Cookie Policy from time to time to reflect changes in our practices or applicable laws. Any updates will be posted on this page with the date of the latest revision.
**10. Contact Information**
If you have any questions or concerns about our use of cookies, please contact us at:
[Organization Name]
[Address]
[Email Address]
[Phone Number]

# Сookie notice
Our website [website name] uses cookies and other tracking technologies to collect information about you that may be considered personal information under the California Consumer Privacy Act (CCPA), as amended by the California Privacy Rights Act (CPRA).
**What are cookies?**
Cookies are small text files that websites store on your device when you visit them. They are used to remember information about you and your activity online.
**How do we use cookies?**
We use cookies for the following purposes:
* **Essential сookie:** These cookies are necessary for our website to function and to enable you to use its core features.
* **Performance сookie:** These cookies collect information about how you use our website, such as which pages you visit and which links you click. This data helps us improve website performance.
* **Functional сookies:** These cookies allow our website to remember your preferences and provide a more personalized experience.
* **Advertising сookies:** These cookies are used to show you advertising that may be relevant to your interests, based on your online activity.
**Your right to opt out of the sale or sharing of personal information**
Under CCPA/CPRA, you have the right to opt out of the sale or sharing of your personal information with third parties. To exercise this right, please click the "Do not sell or share my personal information" link in the footer of our website.
**Right to limit the use of my sensitive personal information**
If we collect sensitive personal information (such as precise geolocation or health-related data), you have the right to limit its use. To exercise this right, please click the "Limit the Use of My Sensitive Personal Information" link in the footer of our website.
**Information on categories of personal information collected, purposes, and third-party sharing**
For more details on the categories of personal information we collect through cookies, the purposes of collection, and whether we share this information with third parties, please refer to our [link to Privacy Policy].
**Managing cookies in your browser**
You can manage your cookie settings through your browser. You may block or delete cookies, or set alerts when cookies are being stored. Please note that blocking or deleting certain cookies may affect the functionality of the website.
**Consent from minors
We do not knowingly collect personal information from individuals under the age of 16 without their consent (or parental/guardian consent for children under 13).
**Changes to this cookie notice**
We may update this Cookie Notice from time to time to reflect changes in our practices. Any updates will be posted on this page with the date of the latest revision.
**Contact information**
If you have any questions about our use of cookies or your rights under CCPA/CPRA, please contact us at [insert contact information].