Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to track this project with GA? #32

Open
Amber1990Zhang opened this issue Mar 22, 2023 · 1 comment
Open

How to track this project with GA? #32

Amber1990Zhang opened this issue Mar 22, 2023 · 1 comment

Comments

@Amber1990Zhang
Copy link

As title, I forked your project (thanks for this interesting project), I added GA in the header.tsx file but it never work. Any ideas?
Here is my code:

import { useEffect } from "react";


export default function Header() {
  useEffect(() => {
    // GA跟踪代码
    window.gtag("config", "G-DEWJBLD2BG");
  }, []);

My project: https://github.com/Amber1990Zhang/oceanbase-sql-gpt/blob/main/components/Header.tsx

@geobde
Copy link

geobde commented Sep 17, 2023

@Amber1990Zhang

You must do something like this

import Script from 'next/script'
const GTM_ID = 'GTM-XXXXXXX';
 
...
 
<html>
    <Script id="google-tag-manager" strategy="afterInteractive">
        {`
        (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_ID}');
        `}
    </Script>
    <body>
        ...
    </body>
</html>

app/layout.tsx file

Documentation : https://nextjs.org/docs/pages/building-your-application/optimizing/scripts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants