As privacy regulations become increasingly stringent, the importance of compliant and user-friendly consent management solutions has never been greater. Google Consent Mode v2 and Cookie Notice Pro offer a powerful combination for website owners looking to navigate the complex landscape of GDPR compliance while maintaining optimal user experience. With built-in support for Google Consent Mode v2 Advanced, Cookie Notice Pro 2.0 empowers websites to honor their visitors’ privacy preferences seamlessly, paving the way for a transparent and trust-building online experience.

Understanding the Tools

Google Consent Mode v2 allows website owners to adjust the behavior of their Google tags based on the consent status of their users. This means that analytics and advertising scripts can be dynamically modified to respect user preferences, aligning with GDPR requirements.

Cookie Notice Pro is a plugin designed to make GDPR compliance straightforward. It provides a customizable platform for displaying consent notices and managing user consent preferences efficiently.

The Integration Process

Integrating Google Consent Mode v2 with Cookie Notice Pro is simple and straight-forward:

1. Download the Cookie Notice Pro plugin

Visit Flerosoft.com and download the Cookie Notice Pro plugin. Begin by initializing Cookie Notice Pro on your website to ensure that the consent banner is displayed to users upon their arrival. You can refer to the documentation for installation steps.

2. Enable Consent Mode V2

Once you download the plugin files, go to cookienoticepro.script.js, and in the config, change enableGoogleConsentMode to true. If consent is granted and preferences include “analytics“, analytics_storage is set to ‘granted’ through gtag dataLayer. Similarly, if consent is granted and preferences include “marketing“, ad_storage, ad_user_data, and ad_personalization are set to ‘granted’.

Note: analytics_storage, ad_storage, ad_user_data, and ad_personalization are parameters provided by Google.

  • analytics_storage : Controls consent for cookies or identifiers that are used for analytics purposes.
  • ad_storage : Manages consent for cookies or identifiers used for advertising purposes, including ad delivery and personalized ads.
  • ad_user_data : Introduced in Consent Mode version 2, this parameter offers finer control over the collection and use of user data for advertising.
  • ad_personalization : Controls the consent for personalizing ads based on the user’s behavior and preferences.

3. Setup gtag code on your website

If not already installed, install the Google gtag code on your website. It will look something like this below.

    
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'TAG_ID');
</script>

4. Default Consent Configuration

Utilize the gtag function to set the default consent state for various data processing activities to ‘denied’. This ensures that all processing activities are compliant with GDPR from the outset.

<script>
gtag('consent', 'default', {
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'analytics_storage': 'denied'
});
</script>

5. Final Head Code

Your final head code should look something like the below example snippet. Please note the order is important. Code should be in following order:

  1. Define dataLayer and the gtag function. Set default consent to ‘denied’ as a placeholder
  2. Google tag (gtag.js) script
  3. jQuery Import
  4. Cookie Notice Pro
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script>
        // Define dataLayer and the gtag function.
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        
        // Set default consent to 'denied' as a placeholder
        gtag('consent', 'default', {
          'ad_storage': 'denied',
          'ad_user_data': 'denied',
          'ad_personalization': 'denied',
          'analytics_storage': 'denied'
        });
    </script>

    <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
    <script>
        window.dataLayer = window.dataLayer || [];
        function gtag(){dataLayer.push(arguments);}
        gtag('js', new Date());
        gtag('config', 'TAG_ID');
    </script>
    <!-- End Google tag (gtag.js) -->


    <!-- jQuery Import -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

    <!-- Cookie Notice Pro -->
    <link rel="stylesheet" href="./cookienoticepro.style.css">
    <script src="./cookienoticepro.script.js"></script>
    <script>
        // Initialize cookie consent banner
        $(document).ready(function() {
            cookieNoticePro.init();
        });
        
        // IMPORTANT: If you are not showing cookie preferences selection menu or google consent mode,
        // then you can remove the below function
        const injectScripts = () => {
            // Example: Google Analytics
            if (cookieNoticePro.isPreferenceAccepted("analytics") === true) {
                console.log("Analytics Scripts Running....");
            }
            // Example: Google Adwords cookie, DoubleClick, Remarketing pixels, Social Media cookies
            if (cookieNoticePro.isPreferenceAccepted("marketing") === true) {
                console.log("Marketing Scripts Running....");
            }
            // Example: Remember password, language, etc
            if (cookieNoticePro.isPreferenceAccepted("preferences") === true) {
                console.log("Preferences Scripts Running....");
            }
        } 
    </script>
    <!-- End Cookie Notice Pro -->
    
    <title>Cookie Notice Pro | Advanced jQuery Cookie Consent Plugin</title>
</head>

Google consent mode v2 reference: https://developers.google.com/tag-platform/security/guides/consent?consentmode=advanced#implementation_example

Ref: Injecting Scripts – https://codecanyon.net/item/cookie-notice-pro-advanced-jquery-plugin/32069094/faqs/51085

Conclusion:

Integrating Google Consent Mode v2 with Cookie Notice Pro is an effective way to ensure GDPR compliance while respecting user consent. This approach not only enhances user trust but also allows website owners to leverage Google’s analytics and advertising services within the boundaries of privacy regulations. Through careful implementation and ongoing management of consent preferences, developers can create a privacy-focused environment that aligns with current legal requirements and user expectations.