CODEWITHSUNDEEP
reactjsgoogle-analyticsgoogle-tag-managerreact-gtm-module
Adam Libuša
Adam Libuša

Reputation: 735

Setting Google Tag Manager consent with react-gtm-module

In my React SPA, I use npm module react-gtm-module to connect it to GTM. I can send events, using this syntax:

  window.dataLayer.push({
    event: 'calc_price_btn'
  })

but I am not sure if and how I can send consent updates. Is it possible with this module, or will I have to use the standard gtag HTML snippet? Can react-gtm-module do everything that standard gtag() calls can?

Upvotes: 0

Views: 9468

Answers (3)

Peter F
Peter F

Reputation: 570

My advice, don't use react-gtm-module if you want to enable the google tag consent by default for your SPA react app. I don't think its possible at the moment.

I've been trying for the last 3 hours, including debugging with the tag assisant (go to google tag manager and click the Preview button, you can test your setup on localhost). But the problem is that the react-gtm-module does not add the default consent via the API and also has no way of updating the consent values.

Its not that hard to setup google tag manually and it will allow you to use their latest funcionalities without depending on a package with very little documentation

In step 5 you see that you need an extra script to run even before the google tag script is loaded. It will tell the google tag to set the consent values by default to denied, and later on in your custom cookie banner you can set the consent to true if the user clicked accept.

Steps:

  1. Go to google tag manager, select your container
  2. Click your tag id in the overview op (eg GTM-XXXXXXX)
  3. follow the instructions, add the snippets to your index.html page

These 3 steps is what the initialize() function does in react-gtm-module

Then,

  1. add another snippet above the script that loads the google tag (above <!-- Google Tag Manager -->). This script will send the default consent values to google tag manager, before any other google tag actions are taken (this is what you want!!)
    <!-- Google Tag Manager consent -->
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() {
        dataLayer.push(arguments);
      }

      if (localStorage.getItem('consentMode') === null) {
        gtag('consent', 'default', {
          ad_storage: 'denied',
          analytics_storage: 'denied',
          personalization_storage: 'denied',
          functionality_storage: 'denied',
          security_storage: 'denied',
        });
      } else {
        gtag('consent', 'default', JSON.parse(localStorage.getItem('consentMode')));
      }
    </script>
    <!-- Google Tag Manager -->
    
    <!-- End Google Tag Manager -->
  1. add a global.d.ts if you are using typescript with
declare global {
  interface Window {
    gtag: (...args: any[]) => void;
  }
}

export {};
  1. now you can use gtag functions in your code.
  interface IConsentMode {
    necessary: boolean;
    marketing: boolean;
    analytics: boolean;
    preferences: boolean;
  }
  const setConsentMode = (consent: IConsentMode) => {
    const consentMode = {
      functionality_storage: consent.necessary ? 'granted' : 'denied',
      security_storage: consent.necessary ? 'granted' : 'denied',
      ad_storage: consent.marketing ? 'granted' : 'denied',
      analytics_storage: consent.analytics ? 'granted' : 'denied',
      personalization: consent.preferences ? 'granted' : 'denied',
    };
    window.gtag('consent', 'update', consentMode);
    localStorage.setItem('consentMode', JSON.stringify(consentMode));
  };

references:

Upvotes: 6

Adam Libuša
Adam Libuša

Reputation: 735

What I was missing was defining the gtag() function:

window.gtag = function(){
  window.dataLayer.push(arguments)
}

It confused me that the Google documentation did not include the dataLayer.push() calls—only the gtag() calls. After defining the function, the code snippets from the docs can be used right away.

Upvotes: 3

XTOTHEL
XTOTHEL

Reputation: 5208

You don't really have to do anything special programming-wise.

It'll be more of a configuration in GTM.

There are many community templates that manages this, but I would go with Simo Ahava's https://www.simoahava.com/custom-templates/consent-mode/

Just search for it when adding a new tag in GTM.

Then you'll be able to push to the datalayer with certain events with the update, shown in the image below.

enter image description here

Upvotes: 0

Related Questions