title: TypeError: window.gtag is not a function
body: <p>I'm totally puzzled with GTM, I implemented it to my webSite to trigger some events to handle traffic, ect... It's be like 2 days I saw the following error :</p>
  <pre><code>Error from the trackerPageView =&gt;  TypeError: window.gtag is not a function
      at _app.js:1
      at _app.js:1
      at commons.c57c1be722ad069a7405.js:1
      at Array.map (&lt;anonymous&gt;)
      at Object.emit (commons.c57c1be722ad069a7405.js:1)
      at commons.c57c1be722ad069a7405.js:1
  </code></pre>
  <p>I didn't see any doc about this problem so I make a post to centralize information about this problem.</p>
  <p>My config is a webApp (nextjs, Reactjs, typeScript, redux), hopefully this will help.</p>
  <p>_document.tsx :</p>
  <pre><code>import Document, { Head, Main, NextScript } from &quot;next/document&quot;;
  import { GA_TRACKING_ID } from &quot;../lib/gtag&quot;;
  import { Fragment } from &quot;react&quot;;
  
  export default class MyDocument extends Document {
    setGoogleTags() {
      return {
        __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'?'&amp;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','${GA_TRACKING_ID}');
            `,
      };
    }
  
    render() {
      return (
        &lt;html lang=&quot;fr&quot;&gt;
          &lt;Head&gt;
            &lt;Fragment&gt;
              &lt;script dangerouslySetInnerHTML={this.setGoogleTags()} /&gt;
            &lt;/Fragment&gt;
            &lt;meta charSet=&quot;utf-8&quot; /&gt;
            &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot; /&gt;
            &lt;meta name=&quot;theme-color&quot; content=&quot;#000000&quot; /&gt;
            &lt;link
              rel=&quot;shortcut icon&quot;
              href=&quot;***&quot;
              crossOrigin=&quot;anonymous&quot;
            /&gt;
            &lt;link
              rel=&quot;stylesheet&quot;
              href=&quot;***.css&quot;
              crossOrigin=&quot;anonymous&quot;
            /&gt;
          &lt;/Head&gt;
          &lt;body&gt;
            &lt;noscript&gt;
              &lt;iframe
                src={`https://www.googletagmanager.com/ns.html?id=${GA_TRACKING_ID}`}
                height=&quot;0&quot;
                width=&quot;0&quot;
                style={{ display: &quot;none&quot;, visibility: &quot;hidden&quot; }}
              &gt;&lt;/iframe&gt;
            &lt;/noscript&gt;
            &lt;Main /&gt;
            &lt;NextScript /&gt;
            &lt;script
              type=&quot;text/javascript&quot;
              id=&quot;hs-script-loader&quot;
              async
              defer
              src=&quot;//js.hs-scripts.com/*****.js&quot;
            &gt;&lt;/script&gt;
          &lt;/body&gt;
        &lt;/html&gt;
      );
    }
  }
  </code></pre>
  <p>gtg/index.ts:</p>
  <pre><code>export const GA_TRACKING_ID = 'GTM-XXXX'
  
  export default function trackPageView(url) {
      try {
        if (window.gtag)
          window.gtag(&quot;config&quot;, GA_TRACKING_ID, {
          page_location: url,
        });
    } catch (error) {
      console.log(&quot;Error from the trackerPageView =&gt; &quot;, error);
    }
  }
  
  </code></pre>
  <blockquote>
  <p>Solution I found temporary!</p>
  </blockquote>
  <p>So currently my implementation of gtag let me to have firer and trigger detected by GTM, I just set a new trigger to</p>
  <blockquote>
  <p>History modification</p>
  </blockquote>
  <p>and now it's firing my events assigned with this trigger at each history modification. I'm not very confortable with gtag but this enough for me (for now), I'm still annoyed because of the implementation I did. I would like to find the right implementation to clean mine.</p>
  <p>The problem clearly come from the SSR because the window variable is become undefined (don't exist in nodeJs) to the error above appear. Still search solution to fix it...</p>
  <p><a href="https://github.com/vercel/next.js/discussions/14980" rel="nofollow noreferrer">https://github.com/vercel/next.js/discussions/14980</a></p>
  <p>Thx everyone and have a good day :)</p>