Analytika údajov je nevyhnutnosťou, ak chcete sledovať počet návštevníkov, ktorých vaše webové stránky získavajú. Existujú rôzne spôsoby, ako môžete pridať analytiku do svojho projektu, vrátane služby Google Analytics. Je to bezplatná služba a jej nastavenie je pomerne jednoduché.

Zistite, ako pridať Google Analytics na svoje stránky pomocou Next.js, rámca React na vytváranie webových stránok vhodných pre SEO.

Nastavenie služby Google Analytics

Google Analytics poskytuje prehľad do správania ľudí navštevujúcich váš web. Povie vám, ktoré stránky majú počet zobrazení, a poskytne vám údaje o publiku, ako je poloha, vek, záujem a zariadenie, ktoré používajú. Tieto údaje vám môžu pomôcť pri rozhodovaní o tom, akým smerom by sa mala vaša firma uberať, aby bola úspešná.

Ak chcete začať, navštívte stránku analytický panel a vytvorte si nový účet podľa týchto krokov:

  1. Kliknite na Vytvoriť účet na karte admin vytvorte nový účet.
  2. V časti Nastavenie účtu pridajte názov účtu.
  3. Vytvorte analytické vlastníctvo zadaním názvu.
    4. instagram viewer
  4. Pridajte podrobnosti o firme. Vyberte možnosti, ktoré sa vzťahujú na váš web.
  5. Kliknite na Vytvorte tlačidlo na dokončenie nastavenia vlastnosti.
  6. Kliknutím na webový stream špecifikujte dátový prúd, ktorý má Google Analytics sledovať.
  7. Zadajte webovú adresu svojej webovej lokality a pomenujte prúd údajov.
  8. Kliknite na pokyny na označovanie a získajte skript, ktorý použijete na svojom webe.
  9. Skopírujte ID merania (kód sledovania), aby ste ho mohli použiť neskôr.

Po získaní kódu sledovania môžete nastaviť projekt Next.js.

Nastavenie projektu Next.js

Ak ešte nemáte nastavený projekt Next.js, pozrite si Oficiálna príručka Next.js začať.

Keď ste vytvorili vlastnosť globálnej značky webu, dostali ste skript, ako je tento:

<!-- Značka Google (gtag.js) -->
<skript async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<skript>
okno.dataLayer = okno.dataLayer || [];
funkciugtag(){dataLayer.push(argumenty);}
 gtag('js', NovýDátum());
 gtag('config', 'G-NHVWK8L97D');
</script>

Tento skript musíte pridať do značky head na svojom webe. V Next.js používate komponent Script z next/script. Tento komponent je rozšírením značky HTML skriptu. Umožňuje vám zahrnúť skripty tretích strán na vašu webovú stránku Next.js a nastaviť ich stratégiu načítania, čím sa zlepší výkon.

The Skript Next.js komponent ponúka rôzne stratégie načítania. Stratégia „afterinteractive“ je vhodná pre analytický skript. To znamená, že sa načíta, keď je stránka interaktívna.

importovať Skript od "ďalší/skript"
<Skript src="" stratégia ="afterInteractive" />

Otvor pages/_app.js súbor a importujte komponent Script v hornej časti.

importovať Skript od 'ďalší/skript'

Potom upravte návratový príkaz komponentu aplikácie tak, aby obsahoval značku skriptu zo služby Google Analytics.

importovať '../styles/globals.css'
importovať Rozloženie od '../components/Layout/Layout'
importovať Skript od 'ďalší/skript'
funkciuMyApp({ Component, pageProps }) {
vrátiť (
<>
<Stratégia scenára="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skript
 id='google-analytics'
 stratégia ="afterInteractive"
 nebezpečneSetInnerHTML={{
 __html: `
okno.dataLayer = okno.dataLayer || [];
funkciugtag(){dataLayer.push(argumenty);}
 gtag('js', NovýDátum());
 gtag('config', 'G-XXXXXXX', {
cesta_stránky: okno.miesto.názov cesty,
 });
 `,
 }}
 />
<Rozloženie>
<Komponent {...pageProps} />
</Layout>
</>
 )
}
exportpredvolená MyApp

Upozorňujeme, že táto značka sa mierne líši od značky, ktorú poskytuje služba Google Analytics. Používa nebezpečneSetInnerHTML a zahŕňa stratégiu načítania. Tie však fungujú rovnako.

Nezabudnite nahradiť G-XXXXXXX kódom sledovania. Odporúča sa tiež uložiť sledovací kód do súboru .env, aby bol utajený.

Pridanie služby Google Analytics do aplikácie na jednej stránke

Môžete použiť vyššie uvedenú značku skriptu pre bežnú webovú stránku a nechať ju tak. V prípade jednostránkovej aplikácie, ako je webová lokalita Next.js, však musíte urobiť niekoľko ďalších krokov.

A jednostránková aplikácia (SPA) je webová stránka, ktorá načíta všetok obsah vopred, ako odpoveď na počiatočnú požiadavku. Prehliadač načítava obsah dynamicky, keď používateľ klikne na odkazy na navigáciu na stránke. Nevytvára požiadavku na stránku, mení sa iba adresa URL.

Toto sa líši pre stránky Next.js, ktoré používajú getServerSideProps, pretože prehliadač ich vykresľuje na požiadanie.

Značka Google funguje tak, že pri načítaní novej stránky zaznamenáva zobrazenie stránky. Takže v prípade SPA sa značka Google spustí iba raz, keď sa stránka načíta. Preto musíte manuálne zaznamenávať zobrazenia, keď používateľ prechádza na iné stránky.

Pozrite si jednostranové meranie Sprievodca službou Google Analytics naučiť sa viac.

Ak chcete manuálne zaznamenávať zobrazenia stránok v súbore Next.js pomocou skriptu gtag, vytvorte nový priečinok s názvomlib a pridať nový súbor, gtag.js.

exportkonšt GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;
exportkonšt zobrazenie stránky = () => {
 window.gtag("config", GA_MEASUREMENT_ID, {
 page_path: url,
 });
};
exportkonšt event = ({ akcia, kategória, štítok, hodnota }) => {
 window.gtag("udalosť", akcia, {
 event_category: kategória,
 event_label: štítok,
 hodnota,
 });
};

Potom upravte súbor /pages/_app.js, aby používal tieto funkcie a sledoval zobrazenia stránok v háku useEffect.

importovať '../styles/globals.css'
importovať Rozloženie od '../components/Layout/Layout'
importovať Skript od 'ďalší/skript'
importovať { useRouter } od 'ďalší/smerovač';
importovať { useEffect } od "reagovať";
importovať * ako gtag od "../lib/gtag"
funkciuMyApp({ Component, pageProps }: AppProps) {
konšt router = useRouter();


useEffect(() => {
konšt handleRouteChange = (url) => {
gtag.zobrazenie stránky(url);
 };


router.events.on("routeChangeComplete", handleRouteChange);


vrátiť () => {
 router.events.off("routeChangeComplete", handleRouteChange);
 };
 }, [router.events]);
vrátiť (
<>
<Stratégia scenára="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skript
 id='google-analytics'
 stratégia ="afterInteractive"
 nebezpečneSetInnerHTML={{
 __html: `
okno.dataLayer = okno.dataLayer || [];
funkciugtag(){dataLayer.push(argumenty);}
 gtag('js', NovýDátum());
 gtag('config', 'G-XXXXXX', {
cesta_stránky: okno.miesto.názov cesty,
 });
 `,
 }}
 />
<Rozloženie>
<Komponent {...pageProps} />
</Layout>
</>
 )
}
exportpredvolená MyApp

Tento príklad používa háčiky useRouter a useEffect na zaznamenanie zobrazenia stránky zakaždým, keď používateľ prejde na inú stránku.

Zavolajte metódu useRouter z next/router a priraďte ju k premennej smerovača. V háku useEffect si vypočujte udalosť routeChangeComplete na smerovači. Keď sa udalosť spustí, zaznamenajte zobrazenie stránky volaním funkcie handleRouteChange.

Príkaz return háku useEffect sa odhlási z udalosti routeChangeComplete pomocou metódy „off“.

Na zhromažďovanie používateľských údajov použite službu Google Analytics

Údaje sú veľmi prospešné pre správne rozhodnutia a pridanie služby Google Analytics na váš web je jedným zo spôsobov, ako ich zhromažďovať.

Službu Google Analytics môžete pridať do projektu Next.js pomocou hákov, aby ste zaistili, že zaznamenáte všetky zobrazenia stránky, aj keď stránka používa smerovanie na strane klienta. Teraz môžete na informačnom paneli služby Google Analytics vidieť, koľko zobrazení získava vaša stránka.