title: How to set the Google Analytics cookie only after another consent cookie is set and "true"?
body: <p>I am using React/Nextjs for my website and the react-cookie-consent library. It creates a pop up where the user can agree to the cookie policy. If agreed, a cookie is set: CookieConsent with value "true".</p>
  
  <p>Additionally, I want to use Google Analytics to track users if they agree (click Accept on the popup).</p>
  
  <p>But it doesnt work: The Google Analytic cookies _ga and G_ENABLED_IDPS are set before the user clicks on the pop up.</p>
  
  <p>Funny thing is, I only realized that on the Microsoft Edge Browser. In Chrome, these cookies are not set before the user gives consent. </p>
  
  <p>This is my current code in _document.js:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Head&gt;
            {/* Global Site Tag (gtag.js) - Google Analytics */}
            &lt;script
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            /&gt;
            &lt;script
              dangerouslySetInnerHTML={{
                __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}            
              gtag('js', new Date());
              
            `}}
            /&gt;
            
            &lt;script type="text/javascript" src="/static/blockReactDevTools.js" /&gt;
            
            &lt;link href="https://fonts.googleapis.com/css?family=Cabin&amp;display=swap" rel="stylesheet" /&gt;
  
  &lt;/Head&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I played around using some hints from the internet, and came up with this version which also doesn't work:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;Head&gt;
            {/* Global Site Tag (gtag.js) - Google Analytics */}
            &lt;script 
              async
              src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
            /&gt;
  
            &lt;script        
              dangerouslySetInnerHTML={{
                  __html: `
                
                var gtagId = '${GA_TRACKING_ID}';
  
                window['ga-disable-' + gtagId] = true;
  
                window.dataLayer = window.dataLayer || [];
  
                function gtag(){dataLayer.push(arguments);}   
  
                gtag('js', new Date());
  
                function getCookie(cname) {
                  var name = cname + "=";
                  var ca = document.cookie.split(';');
                  for(var i = 0; i &lt; ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') {
                      c = c.substring(1);
                    }
                    if (c.indexOf(name) == 0) {
                      return c.substring(name.length, c.length);
                    }
                  }
                  return "";
                }
  
                window.addEventListener("load", function() {
                  var isCookieConsentTrue = getCookie("CookieConsent") == 'true';
  
                  if(isCookieConsentTrue){
                      window['ga-disable-' + gtagId] = false;
                      alert("Cookie Consent given!");
                      
                    }  else {
                      alert("Cookie Consent NOT given!");
                      window['ga-disable-' + gtagId] = true;
                    }
                });          
              
              `}}
            /&gt;
  
            &lt;script type="text/javascript" src="/static/blockReactDevTools.js" /&gt;
  
            
            &lt;link href="https://fonts.googleapis.com/css?family=Cabin&amp;display=swap" rel="stylesheet" /&gt;
  
  &lt;/Head&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I don't know if this is a nextjs specific issue, or something plain stupid general.</p>
  
  <p>Can anyone guide me to a working solution?</p>
  
  <p>EDIT: I tried the "Universal Analytics" approach of the suggestion. Suggested Solution make my helper functions to log events and pageviews fail (see below). Do I need also the gtag manager?</p>
  
  <p><a href="https://i.stack.imgur.com/wRp2D.png" rel="noreferrer"><img src="https://i.stack.imgur.com/wRp2D.png" alt="enter image description here"></a></p>