next/script - Can't get Google Analytics inline script to load `beforeInteractive` - before close of <head> tag #26591

simon-olsen · 2021-06-25T07:12:41Z

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

10.23.0

What browser are you using?

Chrome, Firefox

What operating system are you using?

macOS

How are you deploying your application?

next start

Describe the Bug

I've just upgraded to Next.js v11.0.1 and trying out the <Script> component.

I'm trying to add the Google Analytics tag as they suggest; before the closing tag using strategy="beforeInteractive".

Here is my code for the index.tsx page

const Home: React.FC<Props> = ({ data }) => {
  return (
    <>
      <Script
        src="https://www.googletagmanager.com/gtag/js?id=[TRACKING-ID]"
        strategy="beforeInteractive"
      />
      <Script
        dangerouslySetInnerHTML={{
          __html: `window.dataLayer = window.dataLayer || [];
          function gtag(){dataLayer.push(arguments);}
          gtag('js', new Date());
          gtag('config', '[TRACKING-ID]');`,
        }}
        strategy="beforeInteractive"
      />
      <ThemeProvider theme={fullySickTheme}>
        <Head>
          <title>My Site</title>
        </Head>
...

The first <Script> with the https://www.googletagmanager.com/gtag... loads in the but the script doesn't load at all.

The only way I can load it is at the bottom of the document using the default afterInteractive or lazyOnload.

Is this by design?
Should I just let the inline portion load before the ending body tag and be done with it? I'm only trying to follow what Google recommends in GA.

I've tried the following:

In a page.tsx file and in _app.tsx (docs say NOT to use _document.tsx)
Tried loading inline script with dangerouslySetInnerHTML{{}} and also adding the inline script to a custom function and loading it that way, ala dangerouslySetInnerHTML={setGoogleTags(stationGA)} and {window.dataLayer = window.dataLayer || [];...}

Expected Behavior

beforeInteractive adding my inline script inside the tags.

To Reproduce

Spin up a Next.js v11 site
In the index.js or index.tsx page, add the following.

import Script from "next/script";

// Then in the page's component

<Script
  src="https://www.googletagmanager.com/gtag/js?id=[TRACKING-ID]"
  strategy="beforeInteractive"
/>
<Script
  dangerouslySetInnerHTML={{
  __html: `window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', '[TRACKING-ID]');`,
  }}
  strategy="beforeInteractive"
 />

Actual result

No inline script renders at all until you remove strategy="beforeInteractive"

The text was updated successfully, but these errors were encountered:

LetItRock · 2021-06-25T21:32:35Z

@simon-olsen the strategy="beforeInteractive" doesn't pass the dangerouslySetInnerHTML prop to the script that is created at the end by next. I think that it's for a purpose as the docs are saying to use afterInteractive for tag managers and analytics. I've tried the code with afterInteractive and it works properly. I think that it might be because it has an impact on Web Vitals when loading with beforeInteractive.

simon-olsen · 2021-06-28T00:02:07Z

@LetItRock thanks for the feedback. That all makes sense. I'll go with the inline script of GA at the end of the body tag. We're starting to use renderWebVitals as well, so making sure we don't mess with that is a priority.

lxsmnsyc · 2021-07-11T14:16:02Z

Might be related: #26240

wedneyyuri · 2021-07-11T17:51:55Z

@LetItRock thanks for the feedback. That all makes sense. I'll go with the inline script of GA at the end of the body tag. We're starting to use renderWebVitals as well, so making sure we don't mess with that is a priority.

@simon-olsen maybe can be better to initialize Google Analytics as a common javascript code: #26860 (comment)

// gtag.ts
const initialize = () => {
  window.dataLayer = window.dataLayer || [];
  window.gtag = function gtag() { window.dataLayer.push(arguments); }
  gtag('js', new Date());
  gtag('config', GA_TRACKING_ID);
};

// app.tsx
export default function MyApp({ Component, pageProps }) {
    useEffect(initialize, []); // this code will run only once

    return <>
        <Script src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
        <Component {...pageProps} />
    </>
}

janicklas-ralph · 2021-08-17T16:55:08Z

Hi. Apologize for the delayed response. I'm working on adding another strategy to load inline scripts with beforeInteractive.

I also wanted to know if there was a specific reason for loading GA before first party code? Usually we recommend loading GA with afterInteractive, but wanted to understand if that doesn't work for your usecase?

simon-olsen · 2021-08-17T19:56:08Z

All good @janicklas-ralph.

That is the recommendation from GA. This is the instructions on their Tracking Code page in the Admin section...

This is the Global Site Tag (gtag.js) tracking code for this property. Copy and paste this code as the first item into the of every webpage you want to track. If you already have a Global Site Tag on your page, simply add the config line from the snippet below to your existing Global Site Tag.

vinitgundeti · 2021-08-27T06:34:43Z

Hi,

I have added gtag script with strategy="afterInteractive" in _app.js and in one of my page i am tracking event on componentDidMount i am getting ReferenceError: gtag is not defined.

may i know what is the correct way to solve this.

…eforeInteractive` strategies (#36364) Adds inline script functionality to `next/script` for `worker` and `beforeInteractive` strategies. - fixes #36318 - fixes #26343 - fixes #26591 - fixes #26343 - fixes #26240 Co-authored-by: Janicklas Ralph <[email protected]>

github-actions · 2022-05-30T00:23:01Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

simon-olsen added the bug Issue was opened via the bug report template. label Jun 25, 2021

simon-olsen changed the title ~~next/script Can't get Google Analytics inline script to load beforeInteractive - before close of <head> tag~~ next/script - Can't get Google Analytics inline script to load beforeInteractive - before close of <head> tag Jun 25, 2021

timneutkens assigned janicklas-ralph Jun 25, 2021

timneutkens added kind: bug and removed bug Issue was opened via the bug report template. labels Jun 25, 2021

timneutkens added this to the Iteration 22 milestone Jun 25, 2021

timneutkens modified the milestones: Iteration 22, Iteration 23 Jun 28, 2021

styfle modified the milestones: 11.1.x, 12.0.4 Nov 5, 2021

timneutkens added the Script (next/script) Related to Next.js Script Optimization. label Nov 16, 2021

timneutkens removed this from the 12.0.5 milestone Nov 17, 2021

janicklas-ralph mentioned this issue Apr 25, 2022

Adds inline script functionality to next/script for worker and beforeInteractive strategies #36364

Merged

kodiakhq bot closed this as completed in #36364 Apr 29, 2022

github-actions bot locked as resolved and limited conversation to collaborators May 30, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

next/script - Can't get Google Analytics inline script to load `beforeInteractive` - before close of <head> tag #26591

next/script - Can't get Google Analytics inline script to load `beforeInteractive` - before close of <head> tag #26591

simon-olsen commented Jun 25, 2021

LetItRock commented Jun 25, 2021

simon-olsen commented Jun 28, 2021

lxsmnsyc commented Jul 11, 2021

wedneyyuri commented Jul 11, 2021

janicklas-ralph commented Aug 17, 2021

simon-olsen commented Aug 17, 2021

vinitgundeti commented Aug 27, 2021 •

edited

Loading

github-actions bot commented May 30, 2022

next/script - Can't get Google Analytics inline script to load beforeInteractive - before close of <head> tag #26591

next/script - Can't get Google Analytics inline script to load beforeInteractive - before close of <head> tag #26591

Comments

simon-olsen commented Jun 25, 2021

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

Actual result

LetItRock commented Jun 25, 2021

simon-olsen commented Jun 28, 2021

lxsmnsyc commented Jul 11, 2021

wedneyyuri commented Jul 11, 2021

janicklas-ralph commented Aug 17, 2021

simon-olsen commented Aug 17, 2021

vinitgundeti commented Aug 27, 2021 • edited Loading

github-actions bot commented May 30, 2022

next/script - Can't get Google Analytics inline script to load `beforeInteractive` - before close of <head> tag #26591

next/script - Can't get Google Analytics inline script to load `beforeInteractive` - before close of <head> tag #26591

vinitgundeti commented Aug 27, 2021 •

edited

Loading