How to render Google Analytics scripts in a React Component?

Question

I have google analytics tag code.

I can't add it to index.html because we want it to on a specific routes only. I added it using using template string {script code etc} but it justs placess the script in dom but doesn't runs it.

Is there a way I can add it to react component and trigger it like it does automatically in html files.

  <script>
    (function (w, d, s, l, i) {
      w[l] = w[l] || [];
      w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
        var f = d.getElementsByTagName(s)[0],
        j = d.createElement(s),
        dl = l != "dataLayer" ? "&l=" + l : "";
      j.async = true;
      j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
      f.parentNode.insertBefore(j, f);
    })(window, document, "script", "dataLayer", "GTM-XXXXXX");
  </script>
  <!-- End Google Tag Manager -->
  <!-- Global site tag (gtag.js) - Google Ads: 10810088244 -->
  <script
    async
    src="https://www.googletagmanager.com/gtag/js?id=AW-XXXXXX"
  ></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag("js", new Date());

    gtag("config", "AW-XXXXX");
  </script>

Answer 1

I have found a working solution. Added following code to the component.

    <script
      dangerouslySetInnerHTML={{
        __html: `(function (w, d, s, l, i) {
                    w[l] = w[l] || [];
                    w[l].push({ "gtm.start": new Date().getTime(), event: "gtm.js" });
                    var f = d.getElementsByTagName(s)[0],
                            j = d.createElement(s),
                            dl = l != "dataLayer" ? "&l=" + l : "";
                    j.async = true;
                    j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl;
                    f.parentNode.insertBefore(j, f);
                    })(window, document, "script", "dataLayer", "AW-XXX");`,
      }}
    />

    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=AW-XXX"
    ></script>
    <script
      dangerouslySetInnerHTML={{
        __html: `window.dataLayer = window.dataLayer || [];
                function gtag() {
                  dataLayer.push(arguments);
                }
                gtag("js", new Date());
                gtag("config", "AW-XXX");`,
      }}
    />