Questions about Google gtag implementation with Next Script. #64920

Elindo586 · 2024-04-23T13:55:39Z

Elindo586
Apr 23, 2024

Summary

I want to add a few scripts from Google for website tracking and cookies... previously I only had the tracking on the app.js and it was working fine.

Now I want to add a few other scripts to work for cookies but it isn't working.

According to Next.js information, some scripts like cookie consent should/could be set as strategy="beforeInteractive" and should be place in the _document.js file, well, nothing is showing up when I put it in the _document.js

The code I have is this from _document.js

import { Html, Head, Main, NextScript } from "next/document";
import Script from "next/script";
import GoogleTags from "../components/google-tags";

export default function Document() {
  return (
    <Html lang="en">
      <Head />
      <body>
        <Main />
        <NextScript />
        <GoogleTags />
      </body>
    </Html>
  );
}

^^ the divs from the component doesn't even show.

If I put the GoogleTags component in the app.js page, then I have the div interaction from the component, but then I also get gtag errors.

Because Next.js mentions that cookie consent beforeInteractive should work from the _document.js page, then I would like to implemented in the _document.js page...

What would be a good way for the component to work in the _document.js page?

The link for page tags is this (with errors on tags, and still testing)
https://github.com/Elindo586/nextprojectb/blob/main/components/google-tags.js

import React from "react";
import Script from "next/script";
import Container from "react-bootstrap/Container";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import { useEffect, useState } from "react";

const GoogleTags = () => {
  const [load, setLoad] = useState(true);

  const handleYes = () => {
    document.getElementById("main-cookies-id").style.display = "none";
  };
  const handleNo = () => {
    document.getElementById("main-cookies-id").style.display = "none";
  };

  useEffect(() => {
    if (load) {
      setTimeout(() => {
        document.getElementById("main-cookies-id").style.display = "block";
      }, 2000);
    }
    setLoad(false);
  }, [load]);

  return (
    <Container id="main-cookies-id" className="main-cookies">
      <Row>
        {" "}
        {/* <Script
          id="gtag-init1"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: ` 
              window.dataLayer = window.dataLayer || [];
              unction gtag(){dataLayer.push(arguments);}
              // Set default consent to 'denied' as a placeholder
              // Determine actual values based on your own requirements
              gtag('consent', 'default', {
              'ad_storage': 'denied',
              'wait_for_update': 500,
              'ad_user_data': 'denied',
              'ad_personalization': 'denied',
              'analytics_storage': 'denied'
              `,
          }}
        /> */}
        <Script
          strategy="afterInteractive"
          src="https://www.googletagmanager.com/gtag/js?id=G-4RB3V861V1"
        />
        {/* <Script
          id="gtag-init"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'G-4RB3V861V1');
              
            `,
          }}
        /> */}
        {/* <Script
          id="gtag-function-update"
          strategy="afterInteractive"
          dangerouslySetInnerHTML={{
            __html: `function allConsentGranted() {
  gtag('consent', 'update', {
    'ad_user_data': 'granted',
    'ad_personalization': 'granted',
    'ad_storage': 'granted',
    'analytics_storage': 'granted'
  });
}`,
          }}
        /> */}
      </Row>
      <Row>
        <div>
          <p>do you want cookies? </p>
        </div>
      </Row>
      <Row>
        <Col>
          <button onClick={handleYes}>Yes</button>{" "}
        </Col>
        <Col>
          <button onClick={handleNo}>No</button>{" "}
        </Col>
      </Row>
    </Container>
  );
};

export default GoogleTags;

Additional information

No response

Example

No response

Answered by icyJoseph

Apr 23, 2024

Hi,

The problem is the _document can't contain any interactivity.

From, https://nextjs.org/docs/pages/building-your-application/routing/custom-document:

_document is only rendered on the server, so event handlers like onClick cannot be used in this file.

I'd say, break it down, into the Component that injects the Scripts you need, used in _document, and the component that handles consent, in _app

What errors are you seeing?

View full answer

icyJoseph · 2024-04-23T18:00:29Z

icyJoseph
Apr 23, 2024
Collaborator

Hi,

The problem is the _document can't contain any interactivity.

From, https://nextjs.org/docs/pages/building-your-application/routing/custom-document:

_document is only rendered on the server, so event handlers like onClick cannot be used in this file.

I'd say, break it down, into the Component that injects the Scripts you need, used in _document, and the component that handles consent, in _app

What errors are you seeing?

1 reply

Elindo586 Apr 23, 2024
Author

Hmm..

Only reason why I was doing it in _document was because the Next.js information gave examples of beforeInteractive to include cookie consent managers... maybe the cookie consent manager is something else..

Because all of these scripts are tied together, then I am gonna work them in app.js and do the interactions there.

The error I am getting after adding additional scripts is that it doesn't seem to recognize them.

Other things I need to look is that the interactions work, and then find a way to check if cookies have been already accepted previously, so that the user doesn't have to interact with a cookie pop-up every time they visit the site.

Will make another post later working on app.js

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Questions about Google gtag implementation with Next Script. #64920

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Questions about Google gtag implementation with Next Script. #64920

Uh oh!

Uh oh!

Elindo586 Apr 23, 2024

Summary

Additional information

Example

Replies: 1 comment · 1 reply

Uh oh!

icyJoseph Apr 23, 2024 Collaborator

Uh oh!

Elindo586 Apr 23, 2024 Author

Elindo586
Apr 23, 2024

Replies: 1 comment 1 reply

icyJoseph
Apr 23, 2024
Collaborator

Elindo586 Apr 23, 2024
Author