Build Your Own Cookie Consent Banner — Compatible with Google Consent Mode

Table of Contents

1. Introduction
2. Do You Really Need a Cookie Banner in Australia?
3. Why You Should Avoid Third-Party Cookie Banner Tools
4. What Is Google Consent Mode and Why It Matters
5. Our Goal: Lightweight, Customisable, and Google-Ready
6. Overview of Files and Folder Structure
7. Step-by-Step: How to Assemble Your Own Cookie Banner
8. Where to Download the Full Codebase
9. Conclusion: Privacy as a Feature, Not a Burden

1. Introduction

Cookie banners aren’t just for European websites anymore. With rising global awareness around digital privacy, even Australian websites are expected to offer clear options for data collection consent.

Whether you’re running a WordPress blog, an online store on Shopify, or a custom-built web app, a well-designed cookie banner signals professionalism, transparency, and trust — all essential ingredients for a successful digital experience.

2. Do You Really Need a Cookie Banner in Australia?

Under the Australian Privacy Act, if your business collects personal information and uses third-party tools like Google Analytics, Meta Pixel, or LinkedIn Insight Tag — you are expected to be transparent about it.

While the law isn’t as strict as the GDPR, several key developments are worth noting:

• Google now requires Consent Mode integration for sites using personalised ads.
• Australian users are increasingly familiar with the concept of cookie banners.
• Many international businesses apply GDPR-style practices globally for simplicity.

3. Why You Should Avoid Third-Party Cookie Banner Tools

Popular services like Cookiebot or OneTrust offer quick setup, but come with trade-offs:

Building your own banner means:

• No external requests slowing down your site
• Full control over behaviour, styling, and wording
• Cleaner and more SEO-friendly HTML output

4. What Is Google Consent Mode and Why It Matters

Google Consent Mode lets your website adjust how tags behave based on user consent. With version 2 (v2), it’s now required for proper data collection and ad personalisation in Google Ads.

It supports two key concepts:

• ad_storage — for marketing and ad-related cookies
• analytics_storage — for tools like Google Analytics

If you don’t implement it correctly, you risk:

• Disrupted tracking and conversion reporting
• Violation of platform policies
• Wasted ad spend

5. Our Goal: Lightweight, Customisable, and Google-Ready

We’re building a cookie banner that:

• Works without third-party dependencies
• Loads instantly — no layout shift or render delay
• Integrates cleanly with Google Consent Mode

It’s designed to work on any platform:

• WordPress (via theme template or plugin)
• Shopify (via theme.liquid)
• Static HTML sites or custom frameworks

6. Overview of Files and Folder Structure

The custom banner implementation consists of two main code blocks:

• Consent Defaults (before GTM)
  Insert this inline <script> as early as possible, before loading Google Tag Manager:

<script>
  window.dataLayer = window.dataLayer || [];

  //
  window.dataLayer.push({
    event: 'gtm.init_consent',
    consentSettings: {
      ad_storage: 'denied',
      analytics_storage: 'denied',
      functionality_storage: 'denied',
      personalization_storage: 'denied',
      security_storage: 'granted'
    }
  });

  // gtag-compatible
  function gtag(){dataLayer.push(arguments);}
  gtag('consent', 'default', {
    ad_storage: 'denied',
    analytics_storage: 'denied',
    functionality_storage: 'denied',
    personalization_storage: 'denied',
    security_storage: 'granted',
    wait_for_update: 500
  });
</script>

• Banner and Logic (before </body>)
  This script handles display, user input, storage, and consent updates:

<script>
(function () {  const consentKey = 'user_consent';

  function applyConsent(consent) {
    window.gtag = window.gtag || function() { window.dataLayer = window.dataLayer || []; window.dataLayer.push(arguments); };
    gtag('consent', 'update', {
      ad_storage: consent,
      analytics_storage: consent,
      functionality_storage: consent,
      personalization_storage: consent,
      security_storage: 'granted'
    });
  }

  function saveConsent(value) {
    localStorage.setItem(consentKey, value);
    applyConsent(value);
  }

  function createBanner() {
    const banner = document.createElement('div');
    banner.id = 'cookie-banner';
    banner.style = `
      position: fixed;
      bottom: 0; left: 0; right: 0;
      background: #222; color: #fff;
      padding: 16px;
      z-index: 9999;
      text-align: center;
      font-size: 14px;
    `;
    banner.innerHTML = `
      This website uses cookies. See our <a href="/privacy-policy/">privacy policy</a> to choose.
      <button style="margin: 0 0 0 5px; padding: 5px 15px; cursor: pointer; background-color: #fff; border: 0px;" id="acceptCookies">Accept</button>
      <button style="margin: 0; padding: 5px 15px; cursor: pointer; background-color: #ccc; border: 0px;" id="denyCookies">Reject</button>
    `;
    document.body.appendChild(banner);

    document.getElementById('acceptCookies').addEventListener('click', () => {
      saveConsent('granted');
      banner.remove();
    });

    document.getElementById('denyCookies').addEventListener('click', () => {
      saveConsent('denied');
      banner.remove();
    });
  }

  document.addEventListener('DOMContentLoaded', () => {
    const stored = localStorage.getItem(consentKey);
    if (stored === 'granted' || stored === 'denied') {
      applyConsent(stored);
    } else {
      createBanner();
    }
  });
})();
</script>

7. Step-by-Step: How to Assemble Your Own Cookie Banner

1. Add the Consent Defaults code
   Place the code before your GTM.
2. Add the Javascript code
   Place the script at the end of your <body>.
3. Enable Consent Mode in GTM
   Click on “Enable consent overview” settings (tagmanager.google.com -> admin -> container settings)
4. Check All the Settings in Google Analytics
   Admin -> Data collection and modifications -> Consent settings

8. Where to Download the Full Codebase

You can download the full set of files and documentation on GitHub: https://github.com/gynsus/cookie-consent-banner

Everything is MIT-licensed and easy to customise.

9. Conclusion: Privacy as a Feature, Not a Burden

By building your own cookie banner, you gain speed, control, and compliance — all without relying on yet another plugin or third-party tool.

Start small, test your implementation, and evolve it as your privacy needs grow. Being transparent with your users is always worth the effort — and now you can do it without sacrificing speed or design.

FAQ