Troubleshoot Consent Mode

Updated September 04, 2024 18:41

If you want to check if Consent Mode is properly integrated and working for your website you can visit the Google website for more instructions on how to test it.

Go to "Tag Assistant Consent Mode Debugging".

Common issues with Consent Mode

Consent Mode defaults are not set usually means that you didn't setup consent mode with any of our implementation guides.
- Google Tag Manager and Google Consent Mode v2
- Google Consent Mode v2 with gtag.js (Manual)
"A tag read consent state before a default was set" - this common error is because the default settings came to late to the party. In our experience we see that often the website uses GTM but also has other google tags running in the website code. If the defaults are set over the GTM template then sometimes these Google tags in the website run earlier before the defaults can be set by gtm.
- If using GTM check if there are any Google tags running inside the website code and transfer them all to GTM. This makes managing the tags in one place also easier to handle and keep oversight.
- If you are not using GTM but gtag.js for example either hard code the consent mode defaults in the <head> of the website or make sure to load our banner before all the google tags and enable the "Load consent mode defaults over banner".

Here are some other options to check if consent mode is implemented properly.

There are 3 ways to check whether consent mode v2 is correctly implemented.

1. In Google Tag Manager preview check the Consent Tab on the events where tags are firing.

2. Check consent mode settings in the browser console by enabling Debug mode

3. Checking the dataLayer in browser console

1. Check consent mode settings in GTM

Open the website in the GTM preview mode. Then you can check for the Events of GTM. The Consent Default and Consent Update commands. Click on the Tab called Consent to check the status when this event fired. It is important that the Default commands run before tags are fired.

2. Check consent mode settings in browser console

You can easily check whether consent mode commands are running by running the following code in the console of the browser. It will show you the Default settings, Update settings (if an update took place) and whether the defaults were set on time.
!important: If you're using the CookieFirst gtm tag then you cannot just inspect the dataLayer. GTM handles the consent mode commands within GTM and is not pushing it to the dataLayer.

Opening the console and put in the script below. The output would be something like:

Enable the Debug Mode of the cookie banner will do the same:

Manually add Console script:

(function() {
  function statusText(status) {
    return status === undefined ? "" : status ? "granted" : "denied";
  }

  function statusColor(status) {
    return status === "granted" ? "color: #0C0" : "color: #C00";
  }

  if (!window["google_tag_data"]) {
    console.warn("No Consent Mode data found");
    return;
  }

  var consentEntries = "ics" in google_tag_data ? google_tag_data.ics.entries : null;
  var defaultStatus = "", updateStatus = "";
  var title = "%c" + "Google Consent Mode v2 Debugging:";
  
  console.log(title, "font-size: 1rem");

  for (var entry in consentEntries) {
    defaultStatus = statusText(consentEntries[entry]['default']);
    updateStatus = statusText(consentEntries[entry]['update']);
    if (defaultStatus === "" && updateStatus === "") continue;

    var message = "\t" + entry + ":" +
      (defaultStatus !== "" ? "\n\t\tDefault: %c" + defaultStatus : "%c") + "%c" +
      (updateStatus !== "" ? "\n\t\tUpdate: %c" + updateStatus : "%c");

    console.log(message, 
      defaultStatus !== "" ? statusColor(defaultStatus) : "", 
      "", 
      updateStatus !== "" ? statusColor(updateStatus) : "", 
      "");
  }

  if (defaultStatus === "") {
    console.log("No default Consent settings found");
  }

  var wasSetLate = google_tag_data.ics.wasSetLate;
  if (wasSetLate) {
    console.error("%cYour Consent Mode issue: %cA tag read consent before a Default was set. At least one of your Google Tags fired before the Consent Mode defaults were set. Read more: https://developers.google.com/tag-platform/security/guides/consent-debugging#default-consent or Contact support@cookiefirst.com",
      "color: red; font-weight: bold;", "color: red;");
  } else {
    console.log("%cConsent Mode defaults are correctly set in time.", "color: green;");
  }
})();

How to open the browser console in various browsers?

Google Chrome:

Keyboard Shortcut: Press Ctrl + Shift + J (Windows/Linux) or Cmd + Option + J (Mac).
Right-click Menu: Right-click anywhere on the webpage and select "Inspect" from the context menu. The console will appear in a side panel.

Safari:

Enable Develop Menu (if hidden): Go to Safari > Preferences > Advanced and check the box for "Show Develop menu in menu bar".
Menu Bar: Once enabled, go to Develop > Show Web Inspector.

Mozilla Firefox:

Keyboard Shortcut: Press F12.
Menu Bar: Click on the menu button (three horizontal lines) in the top right corner, then select "More Tools" > "Web Developer" > "Toggle Tools".

Microsoft Edge:

Keyboard Shortcut: Press F12.
Menu Bar: Click on the three dots menu in the top right corner, then select "More tools" > "Developer Tools". The console might be in a separate tab, so look for the "Console" tab.

3. Check the dataLayer values

Running the following code will print the dataLayer items in the browser console for inspection. Before consent there's the default commands and after update both default and CoMo update commands are visible. Run the following code.

(function(window, dataLayerKey, output) {
const dataLayer = window[dataLayerKey];
for (const item of dataLayer) {
output += JSON.stringify(item).replace(/\\"\d+":/g, "") + "\n";
}
console.log(output);
})(window, "dataLayer", "");