How to install CookieScript with Google Tag Manager

How to install CookieScript with Google Tag Manager?

Nelson
Written by NelsonLast update 1 month ago

Read this guide to learn:

  1. How to install CookieScript with Google Tag Manager?

  2. How to implement Google Consent Mode v2?

  3. How to check if Google Consent Mode v2 is implemented correctly?

  4. How to check if Google Consent Mode v2 is activated?

  5. How to configure third-party scripts in GTM?

1. How to install CookieScript with Google Tag Manager?

The easiest way to implement Google Consent Mode on your website is by using a CookieScript Google Tag Manager (GTM) Tag template.

First, create your GTM account and a website container in GTM, and install the GTM container to your website, where you could add your tags. Read the guide on how to create a GTM account and install the GTM container.

Second, install CookieScript. There are 2 ways to deploy CookieScript with Google Tag Manager: using CookieScript GTM Template or as a custom HTML Tag. See instructions for each case below and choose which one suits you best. Remember to only use one of those deployment options.

It is assumed that you have already had experience with GTM and your GTM account is created, also you created a website container in GTM and added the GTM container snippet to your website as required: https://support.google.com/tagmanager/answer/6103696.

1.1 Installing the CookieScript using GTM Tag Template (recommended)

This deployment method should be used if you want to use Google Consent Mode. It comes with all the necessary default consent state settings and code, so you don't need to worry about writing a single line of code. 

To install CookieScript using a GTM Tag template, follow the steps below: 

Step 1: Go to Tags and click New

Step 2: Fill in the name and click on the Tag Configuration area:

Step 3: Click on the link to show Community Template Gallery and search for CookieScript:

Step 4: Click Add to Workspace and confirm your choice.

Step 5: Configure the banner according to your needs: fill in your Cookie Banner script URL (can be found in the banner settings > Installation tab) and choose the default consent state (which is applied before the user makes any selection):

Step 6: As a firing trigger choose Consent Initialization - All Pages. It's important to have this specific trigger since it is fired before any other tags and ensures proper work of the Tag.

All done, your banner is now ready. Just publish the changes and you are ready to go.

1.2. Installing the CookieScript as a Custom HTML Tag (not recommended)

This type is useful if you don't want to use Google Consent Mode. This way no default state for Consent Mode will fire and the script will be inserted just as a Custom HTML Tag.

In your GTM Workspace create a new tag by clicking New tag > Custom HTML Tag. In the HTML field, insert CookieScript code copied from your item. The code should look similar to the one below:

<!--Start Cookie Script--><script type="text/javascript" charset="UTF-8" src="http://cdn.cookie-script.com/s/xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.js"></script> <!--End Cookie Script-->

Next, click Add trigger choose DOM Ready, and apply a name to your tag.

Your final tag configuration window should look like this. (A unique number of .js files have been changed ):

At the end, click "Publish" to apply your changes to your website.

2. How to implement Google Consent Mode v2?

You can implement Google Consent Mode with a CookieScript GTM Tag template or manually.

2.1 How to implement Google Consent Mode with CookieScript GTM Tag template (recommended)

This is the easiest implementation since it requires no coding whatsoever. However, it only applies to users who are using Google Tag Manager (GTM). If you are not using Google Tag Manager, skip to the next section with manual Consent mode implementation.

We have created a GTM Tag template that does all the necessary coding for you. Just follow the steps to deploy CookieScript using a community Tag Template and the Tag will do all the magic. 

Important: Google Consent Mode should be enabled in settings too. Go to your banner settings > Behavior tab > Frameworks section > Enable Google Consent Mode V2

You can optionally change a category that allows Ads Storage, Analytics Storage, Functionality Storage, Personalization Storage, and Security Storage in Google Consent mode. 

2.2 How to implement Google Consent Mode manually (not recommended)

In order to enable Google Consent Mode with consent modes set by default to denied, include this code snippet just before including gtag.js or GTM snippet:

<script>
    window.dataLayer = window.dataLayer || [];
    
    function gtag() {
        dataLayer.push(arguments);
    }

    gtag("consent", "default", {
        ad_storage: "denied",
        analytics_storage: "denied",
        ad_user_data: "denied",
        ad_personalization: "denied",
        wait_for_update: 500
    });

    gtag("set", "ads_data_redaction", true);
    gtag("set", "developer_id.dMmY1Mm", true);
</script>

The following code snippet shows how to update the consent status to granted, when user agrees to allow advertising cookies:

<script>
    window.dataLayer = window.dataLayer || [];
    
    function gtag() {
        dataLayer.push(arguments);
    }

    gtag("consent", "default", {
        ad_storage: "granted",
        analytics_storage: "granted",
        ad_user_data: "granted",
        ad_personalization: "granted",
        wait_for_update: 500
    });

    gtag("set", "ads_data_redaction", true);
    gtag("set", "developer_id.dMmY1Mm", true);
</script>

Implementing Google Consent Mode manually, you must include this code before your gtag.js or GTM code snippet. In case your dataLayer was renamed, you should also rename it in the code above. If you implement Google Consent Mode with the CookieScript GTM Tag template, is not necessary to include this code before your gtag.js or GTM code snippet.

Important: Google Consent Mode should be enabled in settings too. Go to your banner settings > Behavior tab > Frameworks section > Enable Google Consent Mode V2.

You can optionally change a category that allows Ads Storage, Analytics Storage, Functionality Storage, Personalization Storage, and Security Storage in Google Consent mode. 

Without the GTM implementation (using gTag.js) you might want to block third-party scripts from firing before consent. This can be done using third-party script blocking.

Read more about Google Consent Mode Implementation Instructions.

3. How to check if Google Consent Mode v2 is implemented correctly?

After you have implemented Google Consent mode v2, check the following settings:

  1. Google Consent Mode is enabled in settings.
    See the guide about how to enable Google Consent Mode.

  2. CookieScript is installed in GTM using the latest template from gallery.
    See the guide about how to update the GTM template.

  3. CookieScript trigger is set to Consent Initialization (AND no other tags in that trigger)

  4. GA trigger is set to Initialization.
    The right GA trigger should look like this:

    The common mistake is the wrong GA trigger selected like in this example:

  5. Clear browser Cache

  6. Use preview mode to see how it works. Link to debugger info.

Note: There is no need to modify the google tag code, just enable the Google Consent Mode in the settings and Google will handle it.

4. How to check if Google Consent Mode is activated?

After you implemented Google Consent Mode v2 and checked that it works, follow these steps to check if Google Consent Mode is activated:

  1. Check (at your GTM account) if the cookie banner is activated.

  2. Check (at your CookieScript settings) if Google Consent Mode is enabled. Google Consent Mode is an optional feature and should be enabled in CookieScript settings. Go to your CookieScript account > Banner settings > Behaviour tab > Enable Google Consent Mode.

  3. Check (at your GTM account) if the trigger is set in the right way. The trigger must be Consent Initialization on all pages.

  4. Press the shield (at your GTM account) to check if all settings are set in the right way. The shield should be turned on. In the Tag Manager, click Admin > Container Settings. Under Additional Settings, select Enable consent overview. Consent overview is the above-mentioned shield.

  5. Check (at your GTM account) if the selected categories of cookies on the GTM preview mode window correspond to your website. Read the guide on how to use a GTM preview mode.

  6. If some category of cookies is not present on the GTM preview mode window, create an arbitrary cookie with that category, otherwise Google Consent Mode will not work properly.

Note: If you want to check that CookieScript is implemented correctly, go to your account > Settings, where at the top of the page you will find information about your banner status. Wait until the scan finishes, then the banner status will be updated:

5. How to configure third-party scripts in GTM?

After you have added the CookieScript popup to your website you might need to configure some third-party scripts to be loaded only after the user's consent. This is needed to block third-party cookies. Fortunately, CookieScript has a built-in integration with Google Tag Manager events which allows you to set all the triggers and tags in your GTM account. You can find detailed instructions in our manual for disabling third-party scripts using GTM. Or you can use Google Consent Mode to adjust Tag firing conditions. Hey, we even have created a custom GTM Variable Template to read current consent state.

Did this answer your question?