reactjs - Google Analytics cu Next.js

Am încercat să folosesc Google Analytics cu Next.js și l-am configurat urmărind acest videoclip de pe YouTube - https://www.youtube.com/watch?v=lMSBNBDjaH8

Pe baza videoclipului, am adăugat aceste două scripturi în _document.js

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

Am adăugat codul de mai jos în _app.tsx -

useEffect(() => {
    const handleRouteChange = (url: any) => {
      pageview(url);
    };

    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on("routeChangeComplete", handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off("routeChangeComplete", handleRouteChange);
    };
  }, [router.events]);

Și a adăugat mai jos codul în lib/ga.ts -

export const pageview = (url: any) => {
    if (typeof window !== 'undefined') {
        (window as any)?.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
            page_path: url,
        });
    }
};

export const event = ({ action, params }) => {
    if (typeof window !== 'undefined') {
        (window as any)?.gtag('event', action, params);
    }
};

Mă confrunt cu câteva probleme -

  1. Dacă pagina nu are un titlu de document, nu va afișa numele paginii în fila În Timp Real. Există vreo modalitate prin care pot adăuga dinamic titlul documentului pe fiecare pagină sau numele paginilor în Google Analytics folosind URL-ul?

  1. Pentru testare, am adăugat titlul documentului într-una dintre pagini și acesta funcționa în fila Real-Time. Dar sub Engagement > Pages and Screens, nu pot vedea numele acelei pagini așa cum putem vedea în captura de ecran de mai jos.

Am nevoie de ajutor foarte necesar dacă cineva știe cum să rezolve problemele de mai sus. Mulțumesc mult

Răspuns #1

Multe lucruri de remarcat aici.

  1. Rapoartele în timp real din GA4 au bug-uri și ar trebui evitate dacă poți. De obicei, nu le folosim deloc atunci când facem implementări profesionale de urmărire la nivel de întreprindere. În schimb, ne uităm la apelurile de rețea.

  2. Secțiunea Rapoarte din GA4 se bazează pe capturi de date slab agregate. Sfatul general acolo este să o evitați și să folosiți întotdeauna Explorer în schimb. Explorer este supus setării de păstrare a datelor, dar este mult mai precis.

  3. Când folosești gtag('event', action, params), gtag trimite argumentele către dataLayer, care este ascultat de gtag.js. Gtag.js, când vede că ceva este trimis către DL, preia acele date și începe să creeze o cerere de analize. Cererile de analize conțin de câteva ori mai multe date decât cele pe care le trimiți de obicei. Titlul paginii este unul dintre ele. Încearcă să-l preia pentru tine de pe pagină împreună cu URL-ul, referer-ul, useragent-ul și altele. Majoritatea acestor câmpuri pot fi suprascrise prin setarea parametrilor. Titlul paginii poate fi suprascris prin setarea parametrului page_title. Iată mai multe documentații despre câmpuri: https://developers.google.com/analytics/devguides/collection/ga4/reference/config#page_title

  4. Suprascrierea în acest mod are sens dacă nu deții documentul corespunzător în implementarea ta, deci de exemplu dacă încerci să folosești gtag.js din backend. Deși se poate face, este prea complicat deoarece ar trebui să compensezi pentru id-urile de client și sesiunile incorecte/inconsistente. Este o problemă. Probabil nu vrei să urmezi această cale.

  5. GTM. Folosește-l dacă poți. Simplifică multe lucruri în tracking, abstractizând o mulțime de complexități inutile pentru tine. Când există un element de date din backend pe care trebuie să-l urmărești, pur și simplu îl trimiți către front-end-ul tău și apoi acesta îl comunică către GTM prin dataLayer.