Add a fully functional, customisable cookie banner to your site in seconds. This lightweight code snippet helps you stay privacy-compliant without bulky plugins or complex setup. Supports basic opt-in/out logic, custom styling, and seamless integration with Google Tag Manager or other tag managers.
1. Log in to Google Tag Manager
2. Click Tags → New
3. Choose Tag Type: Custom HTML
4. Paste the code snippet (behind 'Show Code' below) into the HTML box
5. Set the trigger to: All Pages (or target specific URLs if preferred)
6. Click Save, then Submit and Publish your container
7. Done! 🎉 Your cookie banner is now live on your site
For a faster setup, download the full Advanced Consent Mode script below and import it straight into your GTM container.
<script>
(function() {
var consentCookieName = "cookieConsent";
var config = {
shortMessage: "We use cookies to improve your experience.",
longMessage: "🍪 We use essential cookies to make our site work. We'd also like to use non-essential cookies to tell us how you're using our website and help us build better features.",
bannerPosition: "bottom", // center or bottom
acceptText: "Accept All",
rejectText: "Fine-Tune",
settingsText: "Manage Preferences",
saveText: "Save Preferences",
policyText: "View Cookie Policy",
policyUrl: "/cookie-policy",
backgroundColor: "#000",
textColor: "#fff",
buttonColor: "#f1c40f",
expiresDays: 180
};
function setCookie(name, value, days) {
var expires = "";
if (days) {
var d = new Date();
d.setTime(d.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + d.toUTCString();
}
document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/";
}
function getCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
}
return null;
}
function parseConsent() {
try {
var c = getCookie(consentCookieName);
return c ? JSON.parse(c) : null;
} catch (e) {
return null;
}
}
function createBanner() {
var style = document.createElement("style");
style.innerHTML = "@media screen and (max-width: 767px) {" +
" #cb-settings { display: none !important; }" +
"}";
document.head.appendChild(style);
var div = document.createElement("div");
div.id = "cookie-banner";
var message = config.shortMessage;
if (window.innerWidth >= 768) {
message = config.longMessage;
}
var content = "";
if (config.bannerPosition === "center") {
content =
'<div style="text-align:center;color:' + config.textColor + ';">' +
'<p style="margin:0 0 1rem;">' + message + '</p>' +
'<div style="display:flex;flex-wrap:wrap;justify-content:center;gap:0.5rem;">' +
'<button id="cb-accept" style="background:' + config.buttonColor + ';color:#000;border:none;padding:0.5rem 1rem;">' + config.acceptText + '</button>' +
'<button id="cb-reject" style="background:#ccc;color:#000;border:none;padding:0.5rem 1rem;">' + config.rejectText + '</button>' +
'<button id="cb-settings" style="background:#666;color:#fff;border:none;padding:0.5rem 1rem;">' + config.settingsText + '</button>' +
'</div>' +
'</div>';
} else {
content =
'<div style="max-width:960px;margin:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;color:' + config.textColor + ';">' +
'<p style="flex:1;margin:0;">' + message + '</p>' +
'<div style="display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.5rem;">' +
'<button id="cb-accept" style="background:' + config.buttonColor + ';color:#000;border:none;padding:0.5rem 1rem;">' + config.acceptText + '</button>' +
'<button id="cb-reject" style="background:#ccc;color:#000;border:none;padding:0.5rem 1rem;">' + config.rejectText + '</button>' +
'<button id="cb-settings" style="background:#666;color:#fff;border:none;padding:0.5rem 1rem;">' + config.settingsText + '</button>' +
'</div>' +
'</div>';
}
div.innerHTML = content;
div.style.position = "fixed";
div.style.background = config.backgroundColor;
div.style.padding = "1rem";
div.style.zIndex = "99999";
div.style.left = "0";
div.style.right = "0";
if (config.bannerPosition === "center") {
div.style.top = "50%";
div.style.left = "50%";
div.style.transform = "translate(-50%, -50%)";
div.style.maxWidth = "90%";
div.style.borderRadius = "8px";
} else {
div.style.bottom = "0";
}
document.body.appendChild(div);
document.getElementById("cb-accept").onclick = function () {
setConsent({ experience: true, measurement: true, marketing: true });
removeBanner();
};
document.getElementById("cb-reject").onclick = function () {
setConsent({ experience: false, measurement: false, marketing: false });
removeBanner();
};
document.getElementById("cb-settings").onclick = function () {
showPanel();
};
}
function removeBanner() {
var b = document.getElementById("cookie-banner");
if (b) b.parentNode.removeChild(b);
}
function setConsent(obj) {
setCookie(consentCookieName, JSON.stringify(obj), config.expiresDays);
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({ event: "cookie_preferences_saved", cookieConsent: obj });
}
function showPanel() {
var overlay = document.createElement("div");
overlay.id = "cookie-panel";
overlay.style.position = "fixed";
overlay.style.top = 0;
overlay.style.left = 0;
overlay.style.right = 0;
overlay.style.bottom = 0;
overlay.style.background = "rgba(0,0,0,0.85)";
overlay.style.color = "#fff";
overlay.style.zIndex = "100000";
overlay.style.padding = "2rem";
overlay.style.overflowY = "auto";
overlay.innerHTML =
'<div style="max-width:600px;margin:auto;background:#111;padding:2rem;border-radius:8px;position:relative;">' +
//'<a href="https://www.netimpression.co.uk/" target="_blank" style="position:absolute;top:16px;right:16px;">' +
// '<img src="https://i.imgur.com/NQpOuVP.png" alt="Net Impression Logo" style="max-width:80px;height:auto;" />' +
//'</a>' +
'<div style="position:absolute;top:16px;right:16px;font-size:12px;color:#aaa;">Developed by <a href="https://www.netimpression.co.uk/" target="_blank" style="color:#aaa;text-decoration:underline;">Net Impression</a></div>' +
'<h2>Your Privacy Choices</h2>' +
'<p>You can manage your consent preferences below. Some cookies are necessary and cannot be disabled.</p>' +
'<label style="display:flex;justify-content:space-between;margin:1rem 0;">' +
'<span>Necessary</span>' +
'<input type="checkbox" checked disabled />' +
'</label>' +
'<label style="display:flex;justify-content:space-between;margin:1rem 0;">' +
'<span>Experience</span>' +
'<input type="checkbox" id="consent-experience" />' +
'</label>' +
'<label style="display:flex;justify-content:space-between;margin:1rem 0;">' +
'<span>Measurement</span>' +
'<input type="checkbox" id="consent-measurement" />' +
'</label>' +
'<label style="display:flex;justify-content:space-between;margin:1rem 0;">' +
'<span>Marketing</span>' +
'<input type="checkbox" id="consent-marketing" />' +
'</label>' +
'<div style="margin-top:2rem;display:flex;justify-content:space-between;align-items:center;">' +
'<a href="' + config.policyUrl + '" target="_blank" style="color:' + config.buttonColor + ';text-decoration:underline;">' + config.policyText + '</a>' +
'<div>' +
'<button id="consent-save" style="background:' + config.buttonColor + ';color:#000;border:none;padding:0.5rem 1rem;margin-right:0.5rem;">' + config.saveText + '</button>' +
'<button id="consent-cancel" style="background:#666;color:#fff;border:none;padding:0.5rem 1rem;">Cancel</button>' +
'</div>' +
'</div>' +
'</div>';
document.body.appendChild(overlay);
var existing = parseConsent() || {};
document.getElementById("consent-experience").checked = !!existing.experience;
document.getElementById("consent-measurement").checked = !!existing.measurement;
document.getElementById("consent-marketing").checked = !!existing.marketing;
document.getElementById("consent-save").onclick = function () {
var result = {
experience: document.getElementById("consent-experience").checked,
measurement: document.getElementById("consent-measurement").checked,
marketing: document.getElementById("consent-marketing").checked
};
setConsent(result);
removeBanner();
document.body.removeChild(overlay);
};
document.getElementById("consent-cancel").onclick = function () {
document.body.removeChild(overlay);
};
}
if (!getCookie(consentCookieName)) {
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", createBanner);
} else {
createBanner();
}
}
// === ✅ Console credit ===
console.log('Code on this page was developed by www.netimpression.co.uk 🚀');
})();
</script>Optional button in footer for users to update their settings:
<button onclick="showPanel()" style="background:none;border:none;color:#0077cc;text-decoration:underline;cursor:pointer;">
Cookie Settings
</button>
✨ This script was developed by Net Impression - making analytics simpler, sharper, and free where it counts. Feel free to copy, share, or extend it - just leave the credit in the console!
If you want support staying GDPR compliant, or you’d like a cookie banner that actually works for your site and audience, reach out and let us know how we can support you.
Net Impression is a UK-based analytics consultancy, specialising in advanced GA4, GTM, BigQuery, and conversion rate optimisation for agencies and growth teams.