search

Nutlope / twitterbio

Generate your Twitter bio with Mixtral and GPT-3.5.
https://www.twitterbio.io
MIT License
1.66k stars 465 forks source link

How to track this project with GA? #32

Open Amber1990Zhang opened 1 year ago

Amber1990Zhang commented 1 year ago

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 commented 11 months ago

@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