Cookie Banner Examples and Tutorials for Free Cookie Consent

Copy a complete example page and watch the setup videos

Copy one of 2 complete HTML pages to see TermsFeed Free Cookie Consent apply the choice of each visitor to Google Analytics 4. Example 1 gives the Google tag the Cookie Consent attributes, so the browser loads nothing from Google before consent. Example 2 loads the Google tag on every page and sends Google Consent Mode v2 signals from a Cookie Consent callback.

Choose Example 1 to keep every Google request off the page until the visitor accepts. Choose Example 2 to let Google Analytics 4 send requests without cookies while consent is denied, which Google uses to model unmeasured visits once the property meets the modeling thresholds. Compare both methods in detail with Set Up Google Consent Mode v2.

Each example takes about 10 minutes. You need a Google Analytics 4 measurement ID, which starts with G-, and a place to serve an HTML file over http: or https:.

Example 1: Google Analytics 4 held by a tagged script

Example 1 holds both Google Analytics 4 script tags with the tracking category, so the Google tag runs only after the visitor accepts tracking. The tagged scripts sit in the HTML of the page, so they exist when run() starts on DOMContentLoaded. Cookie Consent reads tagged scripts once, at that moment.

In the complete page, the Cookie Consent block is the code the TermsFeed generator writes, with its default options, a site name, and a Privacy Policy address. The script address is written with https:.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example 1: Google Analytics 4 held by TermsFeed Free Cookie Consent</title>

  <!-- Google tag (gtag.js), held by default until the visitor accepts the tracking category -->
  <script type="text/plain" data-cookie-consent="tracking" async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script type="text/plain" data-cookie-consent="tracking">
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <h1>Example Store</h1>
  <p>This page loads Google Analytics 4 only after the visitor accepts tracking.</p>

  <footer>
    <a href="#" id="open_preferences_center">Update cookies preferences</a>
  </footer>

  <!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
  <script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
  <script type="text/javascript" charset="UTF-8">
  document.addEventListener('DOMContentLoaded', function () {
  cookieconsent.run({"notice_banner_type":"headline","consent_type":"express","palette":"dark","language":"en","page_load_consent_levels":["strictly-necessary"],"notice_banner_reject_button_hide":false,"preferences_center_close_button_hide":false,"page_refresh_confirmation_buttons":false,"website_name":"Example Store","website_privacy_policy_url":"https://www.example.com/privacy-policy"});
  });
  </script>
  <noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed Generator</a></noscript>
  <!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->
</body>
</html>

Example 1 puts tagged scripts, the preferences link, and the Cookie Consent block in one page. Both Google script tags carry type="text/plain" and data-cookie-consent="tracking", and the external one keeps async. The link with the id open_preferences_center reopens the Preferences Center, so a visitor changes the answer later. The Cookie Consent block sits before the closing </body> tag. Placing the block right after the opening <body> tag, as the generator text suggests, gives the same result.

Set up Example 1 in your own HTML file, and check it with every other private window closed.

1. Copy the page into a file named example-1.html, and replace both G-XXXXXXXXXX with your measurement ID.
2. Replace Example Store with the name of your site, and replace the Privacy Policy address with the full https:// address of your Privacy Policy.
3. Upload the file to your site, or serve it from a local web server, and open it in a browser.
4. Close every private window, open the page in a new one, and open Chrome DevTools.
5. Select the Network tab, filter for google-analytics.com, and reload the page. No request appears before you answer.
6. Click the "I agree" button, and a collect request appears without a reload.
7. Select the Application tab, open Cookies, select the cookie_consent_level row, tick the "Show URL-decoded" checkbox, and confirm that the value holds "tracking":true.

The consent banner now appears on the first visit, and Google Analytics 4 measures only visitors who accept tracking. Tag the rest of your scripts the same way with Block Scripts Until Consent.

Example 2: Google Analytics 4 with Google Consent Mode v2

Example 2 loads the Google tag without the Cookie Consent attributes and sends the Google Consent Mode v2 signals from the user_consent_saved callback of Cookie Consent. Cookie Consent does not send consent signals of its own, so the callback code in the page sends every signal.

The Consent Mode defaults are the first script in <head>, after only the charset meta, above the Google tag, the Google Tag Manager container, and the Cookie Consent block. The wait_for_update value gives the callback 500 milliseconds (half a second) to send the signals before Google tags send their first hit. Example 2 sets user_consent_saved_on_page_load: true, so the callback runs on every page load. Without that option, user_consent_saved skips every later page load of a visitor who answered, so Google reads the denied defaults on those pages.

The callback in the complete page maps tracking to analytics_storage, targeting to the 3 advertising signals, and functionality to functionality_storage and personalization_storage.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example 2: Google Analytics 4 with Google Consent Mode v2 and TermsFeed Free Cookie Consent</title>

  <!-- Google Consent Mode v2 defaults: the first script in <head>, after only the charset meta and above the Google tag -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('consent', 'default', {
      'ad_storage': 'denied',
      'ad_user_data': 'denied',
      'ad_personalization': 'denied',
      'analytics_storage': 'denied',
      'functionality_storage': 'denied',
      'personalization_storage': 'denied',
      'wait_for_update': 500
    });
  </script>

  <!-- Google tag (gtag.js), loaded untagged -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'G-XXXXXXXXXX');
  </script>
</head>
<body>
  <h1>Example Store</h1>
  <p>This page sends Google Consent Mode v2 signals that follow the visitor's answer.</p>

  <footer>
    <a href="#" id="open_preferences_center">Update cookies preferences</a>
  </footer>

  <!-- Cookie Consent by TermsFeed https://www.TermsFeed.com -->
  <script type="text/javascript" src="https://www.termsfeed.com/public/cookie-consent/4.2.0/cookie-consent.js" charset="UTF-8"></script>
  <script type="text/javascript" charset="UTF-8">
  document.addEventListener('DOMContentLoaded', function () {
  cookieconsent.run({
    "notice_banner_type": "headline",
    "consent_type": "express",
    "palette": "dark",
    "language": "en",
    "page_load_consent_levels": ["strictly-necessary"],
    "notice_banner_reject_button_hide": false,
    "preferences_center_close_button_hide": false,
    "page_refresh_confirmation_buttons": false,
    "website_name": "Example Store",
    "website_privacy_policy_url": "https://www.example.com/privacy-policy",
    "user_consent_saved_on_page_load": true,
    "callbacks": {
      "user_consent_saved": (details) => {
        gtag('consent', 'update', {
          'analytics_storage': details.tracking ? 'granted' : 'denied',
          'ad_storage': details.targeting ? 'granted' : 'denied',
          'ad_user_data': details.targeting ? 'granted' : 'denied',
          'ad_personalization': details.targeting ? 'granted' : 'denied',
          'functionality_storage': details.functionality ? 'granted' : 'denied',
          'personalization_storage': details.functionality ? 'granted' : 'denied'
        });
      }
    }
  });
  });
  </script>
  <noscript>Free cookie consent management tool by <a href="https://www.termsfeed.com/">TermsFeed Generator</a></noscript>
  <!-- End Cookie Consent by TermsFeed https://www.TermsFeed.com -->
</body>
</html>

In Example 2, the callback reads the saved categories in details and sends granted or denied for the signals of each category. After each answer, the callback runs before Cookie Consent releases any tagged script. After a refusal the callback sends denied for every optional category, and after a withdrawal it sends denied as soon as the choice is saved.

Run Example 2 the same way, and end with a check of the Consent Mode state.

1. Copy the page into a file named example-2.html, and replace both G-XXXXXXXXXX with your measurement ID.
2. Replace Example Store and the Privacy Policy address with the name of your site and the full https:// address of your Privacy Policy.
3. Upload the file to your site, or serve it from a local web server, and open it in a browser.
4. Close every private window, open the page in a new one, open Chrome DevTools, select the Network tab, filter for google-analytics.com, and reload. A collect request appears before you answer, without Google Analytics cookies.
5. Connect Google Tag Assistant to the page at tagassistant.google.com from that same private window.
6. Where the page Tag Assistant opens does not show the consent banner, delete the 3 cookie_consent_ cookies in the DevTools Application tab of that page and reload.
7. Click the "I agree" button there, and confirm on the Tag Assistant Consent tab that analytics_storage and ad_storage read granted in the On-page Update column.
8. Reload the page and confirm that the update repeats.

Google Analytics 4 now measures visitors who accept tracking with cookies and receives cookieless requests from the others. Check the signals each category grants with Map Categories to Vendor Consent Signals.

TermsFeed video tutorials for Cookie Consent

TermsFeed publishes 4 short video tutorials on YouTube for Cookie Consent, each 2 minutes long or shorter. Each video shows one setup step in the TermsFeed generator or in the page code.

Where a video and this manual differ, follow the manual, which describes version 4.2.0.