Analitika podataka neophodna je ako želite pratiti broj posjetitelja koje vaša web stranica dobiva. Postoje različiti načini na koje možete dodati analitiku svom projektu, uključujući Google Analytics. To je besplatna usluga i relativno je jednostavna za postavljanje.
Naučite kako dodati Google Analytics na svoju web stranicu koristeći Next.js, okvir React za izradu web stranica prilagođenih SEO-u.
Postavljanje Google Analytics
Google Analytics pruža uvide u ponašanje ljudi koji posjećuju vašu web stranicu. Govori vam koje stranice imaju broj pregleda i daje vam podatke o publici kao što su lokacija, dob, interes i uređaj koji koriste. Ovi podaci mogu pomoći u donošenju odluka o smjeru kojim bi vaša tvrtka trebala ići da bude uspješna.
Za početak posjetite analitička nadzorna ploča i kreirajte novi račun slijedeći ove korake:
- Kliknite na Napravi račun na kartici administratora za stvaranje novog računa.
- Dodajte naziv računa u odjeljku Postavljanje računa.
- Napravite analitičko svojstvo davanjem naziva.
- Dodajte podatke o tvrtki. Odaberite opcije koje se odnose na vašu web stranicu.
- Kliknite na Stvoriti gumb za završetak postavljanja svojstva.
- Kliknite na web stream da odredite tok podataka koji Google Analytics treba pratiti.
- Navedite URL vaše web stranice i dodijelite naziv streamu podataka.
- Kliknite na upute za označavanje i preuzmite skriptu koju ćete koristiti na svojoj web stranici.
- Kopirajte ID mjerenja (kod za praćenje) za kasnije korištenje.
Nakon što dobijete kôd za praćenje, možete postaviti projekt Next.js.
Postavljanje projekta Next.js
Ako već nemate postavljen projekt Next.js, pogledajte Službeni vodič za Next.js započeti.
Kada ste izradili svojstvo globalne oznake web-lokacije, dobili ste skriptu poput ove:
<!-- Google oznaka (gtag.js) -->
<skripta async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<skripta>
prozor.dataLayer = prozor.dataLayer || [];
funkcijagtag(){dataLayer.push(argumenti);}
gtag('js', noviDatum());
gtag('konfiguracija', 'G-NHVWK8L97D');
</script>
Morate dodati ovu skriptu u oznaku head vaše web stranice. U Next.js, koristite komponentu Script iz next/script. Ova komponenta je proširenje oznake HTML skripte. Omogućuje vam uključivanje skripti trećih strana na vaše web mjesto Next.js i postavljanje njihove strategije učitavanja, poboljšavajući performanse.
The Next.js skripta komponenta nudi različite strategije učitavanja. Strategija "afterinteractive" prikladna je za analitičku skriptu. To znači da će se učitati nakon što stranica postane interaktivna.
uvoz Skripta iz "sljedeća/skripta"
<Skripta src="" strategija="afterInteractive" />
Otvori stranice/_app.js datoteku i uvezite komponentu skripte na vrhu.
uvoz Skripta iz 'sljedeća/skripta'
Zatim izmijenite povratnu izjavu komponente aplikacije tako da uključuje oznaku skripte iz Google analyticsa.
uvoz '../styles/globals.css'
uvoz Izgled iz '../components/Layout/Layout'
uvoz Skripta iz 'sljedeća/skripta'funkcijaMyApp({ Komponenta, pageProps }) {
povratak (
<>
<Strategija skripte="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skripta
id='google-analytics'
strategija="afterInteractive"
opasnoSetInnerHTML={{
__html: `
prozor.dataLayer = prozor.dataLayer || [];
funkcijagtag(){dataLayer.push(argumenti);}
gtag('js', noviDatum());
gtag('konfiguracija', 'G-XXXXXXX', {
put_stranice: prozor.mjesto.naziv putanje,
});
`,
}}
/>
<Izgled>
<Komponenta {...pageProps} />
</Layout>
</>
)
}
izvozzadano MyApp
Imajte na umu da se ova oznaka malo razlikuje od one koju nudi Google Analytics. Koristi opasnoSetInnerHTML i uključuje strategiju učitavanja. Oni, međutim, rade isto.
Ne zaboravite zamijeniti G-XXXXXXX svojim kodom za praćenje. Također je preporučljivo pohraniti kod za praćenje u .env datoteku kako bi ostao tajan.
Dodavanje Google Analyticsa aplikaciji na jednoj stranici
Možete upotrijebiti gornju oznaku skripte za običnu web stranicu i ostaviti na tome. Međutim, za aplikaciju s jednom stranicom kao što je Next.js web stranica, trebate poduzeti nekoliko dodatnih koraka.
A aplikacija na jednoj stranici (SPA) je web stranica koja sav sadržaj učitava unaprijed, kao odgovor na početni zahtjev. Preglednik dinamički učitava sadržaj dok korisnik klikne na poveznice za navigaciju web mjestom. Ne postavlja zahtjev za stranicu, mijenja se samo URL.
Ovo je drugačije za stranice Next.js koje koriste getServerSideProps jer ih preglednik prikazuje na zahtjev.
Google oznaka radi tako da bilježi prikaz stranice kada se učita nova stranica. Dakle, za SPA, Google oznaka se izvršava samo jednom, kada se stranica inicijalno učitava. Stoga morate ručno bilježiti prikaze dok korisnik prelazi na različite stranice.
Pogledajte mjerenje na jednoj stranici Vodič za Google Analytics naučiti više.
Za ručno snimanje prikaza stranica u Next.js pomoću skripte gtag, stvorite novu mapu pod nazivomlib i dodajte novu datoteku, gtag.js.
izvozkonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;izvozkonst prikaz stranice = () => {
window.gtag("konfiguracija", GA_MEASUREMENT_ID, {
page_path: url,
});
};
izvozkonst događaj = ({ radnja, kategorija, oznaka, vrijednost }) => {
window.gtag("događaj", akcija, {
event_category: kategorija,
event_label: oznaka,
vrijednost,
});
};
Zatim promijenite /pages/_app.js za korištenje ovih funkcija i praćenje prikaza stranica u kuki useEffect.
uvoz '../styles/globals.css'
uvoz Izgled iz '../components/Layout/Layout'
uvoz Skripta iz 'sljedeća/skripta'
uvoz {useRouter} iz 'sljedeći/usmjerivač';
uvoz { useEffect } iz "reagirati";
uvoz * kao gtag iz "../lib/gtag"funkcijaMyApp({Component, pageProps}: AppProps) {
konst usmjerivač = useRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.prikaz stranice(url);
};router.events.on("routeChangeComplete", handleRouteChange);
povratak () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
povratak (
<>
<Strategija skripte="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skripta
id='google-analytics'
strategija="afterInteractive"
opasnoSetInnerHTML={{
__html: `
prozor.dataLayer = prozor.dataLayer || [];
funkcijagtag(){dataLayer.push(argumenti);}
gtag('js', noviDatum());
gtag('konfiguracija', 'G-XXXXXX', {
put_stranice: prozor.mjesto.naziv putanje,
});
`,
}}
/>
<Izgled>
<Komponenta {...pageProps} />
</Layout>
</>
)
}
izvozzadano MyApp
Ovaj primjer koristi kuke useRouter i useEffect za snimanje prikaza stranice svaki put kada korisnik navigira na drugu stranicu.
Pozovite metodu useRouter iz next/router i dodijelite je varijabli usmjerivača. U useEffect kuki slušajte događaj routeChangeComplete na usmjerivaču. Kada se događaj pokrene, snimite prikaz stranice pozivanjem funkcije handleRouteChange.
Izjava povrata kuke useEffect odjavljuje pretplatu na događaj routeChangeComplete metodom 'off'.
Koristite Google Analytics za prikupljanje korisničkih podataka
Podaci su iznimno korisni za donošenje dobrih odluka, a dodavanje Google Analyticsa na vašu web stranicu jedan je od načina da ih prikupite.
Možete dodati Google Analytics projektu Next.js koristeći kuke kako biste osigurali bilježenje svih prikaza stranice čak i kada stranica koristi usmjeravanje na strani klijenta. Sada na nadzornoj ploči Google Analyticsa možete vidjeti koliko pregleda vaša stranica ima.
