Adding GA script tag? #160

robinvdvleuten · 2016-10-30T13:10:34Z

Hi there!

I am currently converting my website to a next.js project and can't figure out on how to add the Google Analytics script tag to the page. Any thoughts?

Cheers,
Robin

nodegin · 2016-10-30T15:54:11Z

checkout <Head>

dariye · 2016-10-31T15:49:10Z

@robinvdvleuten I'd suggest creating a GoogleTagManager component and including it in the Head or right after it depending on your implementation choice.

impronunciable · 2016-11-02T12:18:56Z

as people mentioned you can use the Head tag or a react-friendly solution like https://github.com/react-ga/react-ga

gtramontina · 2016-11-21T12:20:33Z

Any tips on getting react-ga working with next.js?

impronunciable · 2016-11-22T13:23:29Z

@gtramontina it should work. Otherwise I'm one of the react-ga contributors so I could help with that

musemind · 2016-12-13T19:39:05Z

No need for react-ga. Use the google tag manager with the <Head> component to inject analytics. There are some small changes to the google tag manager code necessary to make it work in nextjs/react:

<Head>
      <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','GTM-XXXXXX');`}} />
    </Head>
    <noscript dangerouslySetInnerHTML={{__html: `<iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX" height="0" width="0" style="display:none;visibility:hidden;"></iframe>`}} />

MoOx · 2016-12-13T20:45:11Z

I would recommend a better solution to track client side page view: autotrack. See MoOx/phenomic#384 for more information.

sedubois · 2017-01-17T10:59:44Z

@impronunciable it would be great to have an example as after some googling I'm still confused 😃 Could this be reopened?

@MoOx seems to imply that react-ga isn't necessary, should use Google AutoTrack instead
but Autotrack instructs to create a script tag with code which accesses the window object, so that doesn't work server-side
and anyway if using a react component such as react-ga, where should it be put? In a render? componentWillMount? getInitialProps? It's not super clear as it kind of supposes that you use react-router and load the code a single time for all pages.

The page tracking should work both when the page is server-rendered and then when navigating to another page. It would be would be great to see how the whole thing should integrate in a typical Next app with a Head, a page layout HOC, etc.

Would also be great to know if you think there's a better/simpler/less cumbersome/more state-of-the-art combination than Next.js + Google Analytics Autotrack...

impronunciable · 2017-01-17T11:19:51Z

I can investigate this

…

On Tue, Jan 17, 2017, 7:59 AM Sébastien Dubois ***@***.***> wrote: @impronunciable <https://github.com/impronunciable> it would be great to have an example as after some googling I'm still confused 😃 Could this be reopened? - @MoOx <https://github.com/MoOx> seems to imply that react-ga isn't necessary, should use Google AutoTrack <https://github.com/googleanalytics/autotrack> instead - but Autotrack instructs to create a script tag with code which accesses the window object, so that doesn't work server-side - and anyway if using a react component such as react-ga, where should it be put? In a render? componentWillMount? getInitialProps? It's not super clear as it kind of supposes that you use react-router and load the code a single time for all pages. The page tracking should work both when the page is server-rendered and then when navigating to another page. It would be would be great to see how the whole thing should integrate in a typical Next app with a Head, a page layout HOC, etc. Would also be great to know if you think there's a better/simpler/less cumbersome/more state-of-the-art combination than Next.js + Google Analytics Autotrack... — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#160 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAKHp9-2bfLXj2hMGlNlkqUSRqEL7R2Cks5rTJ8kgaJpZM4KkXxa> .

MoOx · 2017-01-17T11:22:47Z

Pretty sure autotrack is more than enough, only injected on the client side - no need to think about the server-side.

MoOx · 2017-01-17T11:23:38Z

See MoOx/react-toulouse@c42045d for an example. It's not using next, but I guess it should be easy to adapt.

timneutkens · 2017-01-17T11:43:11Z

Yeah we don't want to track server renders, Since it Will obfuscate things like location.

MoOx · 2017-01-17T11:47:39Z

No you don't since it will be handled by the client: keep in mind that a page is request by the client and will be rendered in the client browser :)

sedubois · 2017-01-17T13:09:57Z

OK I didn't realise the code shouln't run server-side. So I used autotrack as recommended by @MoOx, I think this should work: sedubois/relate@50dc3f3

Just haven't confirmed yet if it counts page views correctly, this is new to me 😬 😄

MoOx · 2017-01-17T14:23:59Z

You can use "real time" view to debug GA easily.

sedubois · 2017-01-17T14:28:36Z

@MoOx yes well that's what bothers me, I don't see anything in the realtime panel when I visit https://relate.now.sh in parallel in another tab (0 active users)

sedubois · 2017-01-18T11:48:11Z

I'm still not getting this... I don't get any data with the code I wrote.

All the examples I see seem to require a <script href="https://www.google-analytics.com/analytics.js" async /> but things in the Head don't seem to be executed in the client? (my console.log aren't printed in browser console...)

An example would still be very appreciated 🙂

sedubois · 2017-01-18T12:03:18Z

Ah, got it working by switching to react-ga 😄

sedubois/relate@a9d2bce

luandro · 2017-03-07T12:56:29Z

How did you get it to work? I've been trying to call a pageview function on componentDidMount.

The production app GA Check fails.

sedubois · 2017-03-07T13:00:06Z

@luandro don't remember the details, but you can look at the commit I linked above if it helps

luandro · 2017-03-07T13:25:05Z

I did and tried it. I did the same as you, calling configureAnalytics on top, and pageview on componentWillMount, but still get negative on GA Check.

In your code it doesn't seem you actually connected page hoc anywhere, did you?

durk0 · 2017-04-10T19:44:27Z

@luandro Simply add ga(‘set’, ‘page’, window.location.pathname); ga(‘send’, ‘pageview’); to change url of pageview event.

ryardley · 2017-05-03T03:19:56Z

Maybe there is a more 'next.js' way to do this but WRT running scripts on the page I found that if I created a Script component like so:

// modules/Script.js
export default ({children}) => (
  <script dangerouslySetInnerHTML={{__html: `(${children.toString()})();` }}></script>
);

Then I could do this which worked for me:

import Document, { Head, Main, NextScript } from 'next/document'
import Script from '../modules/Script';

export default class MyDocument extends Document {

  render () {
    return (
      <html>
        <body>
          <Main />
          <Script>
            {
              () => {
                console.log('foo');
              }
            }
          </Script>
          <NextScript />
        </body>
      </html>
    )
  }
}

The caveat is that you must enclose everything in a function.

karthikiyengar · 2017-05-17T20:20:50Z

Is it possible to track individual pageviews without explicitly calling the ga('send', 'pageview') on every page. If we absolutely have to do it, where do we invoke it from having certainty that ga has been loaded?

Is it possible to tie into route change events in some way to log pageviews?

vinaypuppal · 2017-05-17T20:40:12Z

@karthikiyengar I am using react-ga as suggested by others above and logging pageviews on componentDidMount of every page.

import ReactGA from 'react-ga'

export const initGA = () => {
  console.log('GA init')
  ReactGA.initialize('UA-xxxxxxxx-x')
}
export const logPageView = () => {
  ReactGA.set({ page: window.location.pathname })
  ReactGA.pageview(window.location.pathname)
}

componentDidMount () {
    initGA()
    logPageView()
  }

youfoundron · 2017-05-29T17:29:26Z

@vinaypuppal is it common practice to initGA for every page component?

notrab · 2017-05-31T13:37:15Z

@rongierlach I'm using a Layout component which calls the initialize and pageview methods on ReactGA within componentDidMount().

export default class extends Component {
  componentDidMount() {
    ReactGA.initialize('UA-1234567-1')
    ReactGA.pageview(document.location.pathname)
  }

  render() {
    return (
      <div>
        {this.props.children}
     </div>
    )
}

This is the cleanest way I've done it yet as if the page is server rendered, it needs to initialize. I'm sure there is a hook that could bypass the initialize if it's client rendered.

kylewiedman · 2017-06-09T03:35:38Z

@notrab couldn't you potentially be missing the shallow renders? They your app will just transition and your layout component may not remount. This is what I have to catch those.

componentDidMount() {
    ReactGA.initialize('xx-xxxxxxx-x')
    let trackMe = true

    if (trackMe) {
      ReactGA.pageview(document.location.pathname)
      trackMe = false
    }

    Router.onRouteChangeStart = () => {
      NProgress.start()
      this.store.dispatch(transitionPage(true))
      trackMe = true
    }
    Router.onRouteChangeComplete = () => {
      NProgress.done()
      this.store.dispatch(transitionPage(false))
      if (trackMe) { ReactGA.pageview(document.location.pathname) }
    }
    Router.onRouteChangeError = () => {
      NProgress.done()
      this.store.dispatch(transitionPage(false))
    }

    this.store.dispatch(calculateResponsiveState(window))
  }

* Add new Travis CI docs * Implement feedback Co-Authored-By: Timothy <hello@timothy.is> * Improve Travis guide * Fix weird spacing in Code blocks * Better list order * Further Travis guide improvements * Give the first paragraph a context to Travis * Better titles

GodOfGrandeur · 2019-07-16T21:12:37Z

Just adding my solution to this here in case it might be useful for someone later on.

I used react-ga but the same logic should work with other ga tools.

_app.js's getInitialProps is triggered on the client side whenever user click on a new route. (First time it will run on server side).

componentDidMount of _app.js runs on client side only.

So in my _app.js, I added the following few lines of code
static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {}

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);      
    }

    // client-side only, run on page changes, do not run on server (SSR)
    if (typeof(window) === "object") {
      ReactGA.pageview(ctx.asPath);
    }
    return { pageProps, router }
  }
  
  
  componentDidMount() {
    // client-side only, run once on mount
    ReactGA.initialize('UA-XXXXXXX-3');
    ReactGA.pageview(window.location.pathname + window.location.search);
  }
When the page is rendered in server, nothing will happen in getInitialProps as I wrapped the GA code in typeof(window) === "object".

On client side, getInitialProps will not run for the first time since everything is server rendered. GA is setup inside componentDidMount on the client side.

Subsequent route changes (even for the same route), will trigger getInitialProps on client side and ga event is triggered.

An issue which arises if you're using NextJS 9 is that this with disable Automatic Prerendering. Wondering if there is a better place to put the ReactGA.pageview(ctx.asPath);, removing it from getInitialProps means we can remove getInitialProps and not force Automatic Prerendering to opt-out as outlined here: https://err.sh/next.js/opt-out-automatic-prerendering.

Update: I found the with-google-analytics example (https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics) and borrowed the bit about: Router.events.on('routeChangeComplete', url => ReactGA.pageview(url)) I need to test this to make sure url is right but looks like the right way. I've removed the getInitialProps method and added this above the class declaration.

hkirsman · 2019-07-18T05:10:46Z

@GodOfGrandeur This sounds promissing, will try in prod. Didn't get the version mentioned above working or seemed like so https://medium.com/@austintoddj/using-google-analytics-with-next-js-423ea2d16a98 Adding your code in _app.js seems to trigger everywhere like needed and I also like it's not triggered on server (would not have though it's an issue).

elhakeem · 2019-08-25T23:36:53Z

No need for any third party, If you are using gtag use the following code I created:-

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

reinink · 2019-10-01T01:02:34Z

Another option is to use useEffect(). I've done this within my Layout.js file.

useEffect(() => {
  if (process.env.NODE_ENV === 'production') {
    window.dataLayer = window.dataLayer || []
    function gtag() {
      dataLayer.push(arguments)
    }
    gtag('js', new Date())
    gtag('config', '{GOOGLE ANALYTICS CODE}', {
      page_location: window.location.href,
      page_path: window.location.pathname,
      page_title: window.document.title,
    })
  }
})

And in the <Head>:

<Head>
  <script async src="https://www.googletagmanager.com/gtag/js?id={GOOGLE ANALYTICS CODE}"></script>
</Head>

amorriscode · 2019-10-10T03:20:55Z

@reinink Just want to mention that you might want to pass an empty array as the second prop to useEffect so that it only runs the function once after the initial render.

useEffect(() => {...}, [])

antonmyrberg · 2020-02-25T13:41:40Z

Expanding on @reinink s solution, here's a working HOC I use to wrap my layout components/templates.

import React, { useEffect } from 'react'
import Head from 'next/head'
const GoogleAnalyticsHOC = ({ children }) => {
  useEffect(() => {
    if (process.env.NODE_ENV === 'production') {
      window.dataLayer = window.dataLayer || []
      // eslint-disable-next-line
      function gtag() {
        window.dataLayer.push(arguments)
      }
      gtag('js', new Date())
      gtag('config', process.env.GOOGLE_ANALYTICS_ID, {
        page_location: window.location.href,
        page_path: window.location.pathname,
        page_title: window.document.title
      })
    }
  }, [])
  return (
    <>
      <Head>
        <script async src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS_ID}`} />
      </Head>
      {children}
    </>
  )
}
export default GoogleAnalyticsHOC

It's not extensively tested but it works and passes myself as a realtime visitor running locally. :)

UberVero · 2020-03-04T21:47:32Z

I found this guide - is this a recommended approach (uses react-ga)?

jerrygreen · 2020-03-05T08:51:36Z

I'd say recommended way is to use this official example:

https://github.com/zeit/next.js/tree/canary/examples/with-google-analytics

It's already posted here. Sometimes I wish github issues to be more like stackoverflow, having some answer accepted and highlighted, right after the question (when there's too many messages and emojis is not enough. One option is to restrict commenting this post, so people will create a new issue instead. And while creating they'll find a similar issue was already created (thanks to "similar issues" feature), and it has an answer (but still, the answer with emojis is lost somewhere in the middle of long history, so it's not very convenient to find answers on github).

janbaykara · 2020-04-08T16:00:23Z

It's already posted here. Sometimes I wish github issues to be more like stackoverflow, having some answer accepted and highlighted, right after the question (when there's too many messages and emojis is not enough....

Github is prototyping this over on this repo's Discussions tab.

jerrygreen · 2020-04-09T07:19:55Z

@janbaykara wow, really? We all think the same way :) I hope they will find a way to somehow translate an issue to a discussion though, or it will be the same thing (if functionality will be merged to issues, and all existing discussions will become issues). But thanks for the response!

Vadorequest · 2020-06-18T15:14:59Z

@3lonious I've personally ditched Google Analytics, as it does not do a good job with SPA in general. (really bad experience, especially with SSR+CSR and double events hard to track down)

Regarding Next.js, check out https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-gcms-lcz-sty/src/components/pageLayouts/Head.tsx (using next/Head), that's how I include script tags in my apps.

Dont hesitate to take a look at NRN https://unlyed.github.io/next-right-now, it's meant to be a good example on "how to do X" with Next.js and should save you quite some headaches.

3lonious · 2020-06-18T16:09:16Z

im not sure i get it, i dont see any script tags in that file?

antonmyrberg · 2020-06-18T17:14:57Z

This is also a solution that works. I haven't tested it extensively so please do that yourself.

In pages/_document.js, add this to your <Head>. See the docs on how to override the document file.

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

It reports traffic to my GA account at least.

Vadorequest · 2020-06-19T11:40:41Z

@3lonious Script tags and style tags work the same way.
The above solution also works, from experience. (it's how I used to make GA work)

3lonious · 2020-06-19T13:38:31Z

ok thanks guys. im gonna try and get back to you

3lonious · 2020-06-19T13:45:53Z

ok i think i got it to work

3lonious · 2020-06-19T13:46:45Z

thanks Anton. ok i have a new one for you haha

i have a chat app i use for customer service but that script tag dosnt work either? any ideas?

3lonious · 2020-06-19T13:48:51Z

its telling me to add this second tag in the body? what do you do with that?

ernaneluis · 2020-07-15T01:09:45Z

How About TBT? If you add google analytics it will slower your speed score

jerrygreen · 2020-07-15T08:05:50Z

How About TBT? If you add google analytics it will slower your speed score

That’s because of their recommendation of placing the script before the content. If you place it under the content, the score won’t go down.

I personally don’t see real benefits of placing the script first. If the page load was somehow broken, and HTML didn’t fully load somehow and it was aborted, then I might not count it as a hit, so whatever.

ChaitraK2000 · 2020-08-19T03:48:52Z

I m working with nextjs. I m trying to use react google place auto complete API. And wants to insert those script tag of API? Where should I insert those script tag??

Poshtarenko-Dmitriy · 2020-08-31T07:17:24Z

_app.js

    import ReactGA from "react-ga";
 
    componentDidMount() {
      ReactGA.initialize("XX-XXXXXXXXX-X", { debug: false });
      ReactGA.set({ page: this.props.router.pathname });
      ReactGA.pageview(this.props.router.pathname);
      this.unlisten = this.props.router.events.on("routeChangeComplete", (router) => {
          ReactGA.set({ page: router });
          ReactGA.pageview(router);
        });
    }

Help from vercel/next.js#160 (comment)

RiusmaX · 2021-03-01T14:46:45Z

With React hooks :

_app.js

import { useEffect } from 'react'
import { useRouter } from 'next/router'
import ReactGA from 'react-ga'
import Layout from '../components/Layout'

function MyApp ({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url, { shallow }) => {
      ReactGA.set({ page: url })
      ReactGA.pageview(url)
    }
    ReactGA.initialize('XX-XXXXXXXXX-X', { debug: false })
    ReactGA.set({ page: router.pathname })
    ReactGA.pageview(router.pathname)
    router.events.on('routeChangeComplete', handleRouteChange)
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [])

  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

export default MyApp

balazsorban44 · 2022-01-28T16:06:10Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

impronunciable closed this as completed Nov 2, 2016

fridays mentioned this issue Apr 14, 2017

Google Analytics? fridays/next-routes#20

Closed

leighkendell mentioned this issue Mar 24, 2019

Add Google Analytics leighkendell/surroundings-store#5

Closed

buttonwillowsix mentioned this issue Dec 20, 2019

Update global-head.js with GA SU-SWS/decanter-web#15

Closed

This comment has been minimized.

Sign in to view

hkirsman added a commit to hkirsman/tsitaatcom_site_frontend that referenced this issue Oct 22, 2020

Add Google Analytics

bdf31c9

Help from vercel/next.js#160 (comment)

vercel locked as resolved and limited conversation to collaborators Jan 28, 2022

Adding GA script tag? #160

Adding GA script tag? #160

Comments

robinvdvleuten commented Oct 30, 2016

nodegin commented Oct 30, 2016

dariye commented Oct 31, 2016

impronunciable commented Nov 2, 2016

gtramontina commented Nov 21, 2016

impronunciable commented Nov 22, 2016

musemind commented Dec 13, 2016

MoOx commented Dec 13, 2016

sedubois commented Jan 17, 2017

impronunciable commented Jan 17, 2017 via email

MoOx commented Jan 17, 2017

MoOx commented Jan 17, 2017

timneutkens commented Jan 17, 2017

MoOx commented Jan 17, 2017

sedubois commented Jan 17, 2017

MoOx commented Jan 17, 2017

sedubois commented Jan 17, 2017

sedubois commented Jan 18, 2017

sedubois commented Jan 18, 2017

luandro commented Mar 7, 2017 • edited

sedubois commented Mar 7, 2017

luandro commented Mar 7, 2017

durk0 commented Apr 10, 2017

ryardley commented May 3, 2017 • edited

karthikiyengar commented May 17, 2017 • edited

vinaypuppal commented May 17, 2017 • edited

youfoundron commented May 29, 2017

notrab commented May 31, 2017 • edited

kylewiedman commented Jun 9, 2017

GodOfGrandeur commented Jul 16, 2019 • edited

hkirsman commented Jul 18, 2019

elhakeem commented Aug 25, 2019 • edited

reinink commented Oct 1, 2019

amorriscode commented Oct 10, 2019

antonmyrberg commented Feb 25, 2020

UberVero commented Mar 4, 2020

jerrygreen commented Mar 5, 2020

janbaykara commented Apr 8, 2020 • edited

jerrygreen commented Apr 9, 2020

Vadorequest commented Jun 18, 2020

3lonious commented Jun 18, 2020

antonmyrberg commented Jun 18, 2020

Vadorequest commented Jun 19, 2020

3lonious commented Jun 19, 2020

3lonious commented Jun 19, 2020

3lonious commented Jun 19, 2020

3lonious commented Jun 19, 2020

ernaneluis commented Jul 15, 2020

jerrygreen commented Jul 15, 2020

ChaitraK2000 commented Aug 19, 2020

Poshtarenko-Dmitriy commented Aug 31, 2020 • edited

This comment has been minimized.

RiusmaX commented Mar 1, 2021 • edited

balazsorban44 commented Jan 28, 2022

luandro commented Mar 7, 2017 •

edited

ryardley commented May 3, 2017 •

edited

karthikiyengar commented May 17, 2017 •

edited

vinaypuppal commented May 17, 2017 •

edited

notrab commented May 31, 2017 •

edited

GodOfGrandeur commented Jul 16, 2019 •

edited

elhakeem commented Aug 25, 2019 •

edited

janbaykara commented Apr 8, 2020 •

edited

Poshtarenko-Dmitriy commented Aug 31, 2020 •

edited

RiusmaX commented Mar 1, 2021 •

edited