Podatkovna analitika je nujna, če želite spremljati število obiskovalcev, ki jih prejema vaše spletno mesto. Svojemu projektu lahko na različne načine dodate analitiko, vključno s storitvijo Google Analytics. To je brezplačna storitev in je razmeroma preprosta za nastavitev.

Naučite se dodati Google Analytics na svoje spletno mesto s pomočjo Next.js, ogrodja React za ustvarjanje SEO prijaznih spletnih mest.

Nastavitev storitve Google Analytics

Google Analytics ponuja vpoglede v vedenje ljudi, ki obiščejo vaše spletno mesto. Pove vam, katere strani imajo število ogledov, in poda podatke o občinstvu, kot so lokacija, starost, zanimanje in naprava, ki jo uporabljajo. Ti podatki lahko pomagajo pri odločanju o tem, v katero smer bi moralo biti vaše podjetje uspešno.

Za začetek obiščite analitična nadzorna plošča in ustvarite nov račun tako, da sledite tem korakom:

  1. Kliknite na Ustvari račun na skrbniškem zavihku, da ustvarite nov račun.
  2. V razdelku Nastavitev računa dodajte ime računa.
  3. Ustvarite lastnost analitike tako, da podate ime.
    4. instagram viewer
  4. Dodajte podatke o podjetju. Izberite možnosti, ki veljajo za vaše spletno mesto.
  5. Kliknite na Ustvari gumb za dokončanje nastavitve lastnosti.
  6. Kliknite spletni tok, da določite tok podatkov, ki naj ga Google Analytics spremlja.
  7. Določite URL do svojega spletnega mesta in poimenujte tok podatkov.
  8. Kliknite navodila za označevanje in pridobite skript, ki ga boste uporabili na svojem spletnem mestu.
  9. Kopirajte ID meritve (kodo za sledenje), da jo uporabite pozneje.

Ko dobite kodo za sledenje, lahko nastavite projekt Next.js.

Nastavitev projekta Next.js

Če še nimate nastavljenega projekta Next.js, glejte Uradni vodnik Next.js za začetek.

Ko ste ustvarili lastnost globalne oznake spletnega mesta, ste dobili tak skript:

<!-- Googlova oznaka (gtag.js) -->
<skript async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<scenarij>
okno.dataLayer = okno.dataLayer || [];
funkcijogtag(){dataLayer.push(argumenti);}
 gtag('js', novoDatum());
 gtag('konfiguracija', 'G-NHVWK8L97D');
</script>

Ta skript morate dodati oznaki head vašega spletnega mesta. V Next.js uporabite komponento Script iz next/script. Ta komponenta je razširitev oznake skripta HTML. Omogoča vam, da na svoje spletno mesto Next.js vključite skripte tretjih oseb in nastavite njihovo strategijo nalaganja, kar izboljša učinkovitost.

The Skript Next.js komponenta ponuja različne strategije nalaganja. Strategija »afterinteractive« je primerna za analitični skript. To pomeni, da se bo naložil, ko bo stran interaktivna.

uvoz Skripta od "naslednji/skript"
<Skript src="" strategija="afterInteractive" />

Odprite pages/_app.js datoteko in uvozite komponento Script na vrhu.

uvoz Skripta od 'naslednji/skript'

Nato spremenite izjavo o vrnitvi komponente aplikacije, da bo vključevala oznako skripta iz storitve Google Analytics.

uvoz '../styles/globals.css'
uvoz Postavitev od '../components/Layout/Layout'
uvoz Skripta od 'naslednji/skript'
funkcijoMyApp({ Komponenta, pageProps }) {
vrnitev (
<>
<Skriptna strategija="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skripta
 id='google-analytics'
 strategija="afterInteractive"
 opasnoSetInnerHTML={{
 __html: `
okno.dataLayer = okno.dataLayer || [];
funkcijogtag(){dataLayer.push(argumenti);}
 gtag('js', novoDatum());
 gtag('konfiguracija', 'G-XXXXXXX', {
stran_pot: okno.lokacija.pathname,
 });
 `,
 }}
 />
<Postavitev>
<Komponenta {...pageProps} />
</Layout>
</>
 )
}
izvozprivzeto MyApp

Upoštevajte, da se ta oznaka nekoliko razlikuje od tiste, ki jo ponuja Google Analytics. Uporablja dangerouslySetInnerHTML in vključuje strategijo nalaganja. Vendar pa delujejo enako.

Ne pozabite zamenjati G-XXXXXXX s svojo kodo za sledenje. Priporočljivo je tudi, da kodo za sledenje shranite v datoteko .env, da ostane skrivnost.

Dodajanje storitve Google Analytics enostranski aplikaciji

Zgornjo oznako skripta lahko uporabite za običajno spletno stran in pustite pri tem. Vendar pa morate za enostransko aplikacijo, kot je spletno mesto Next.js, narediti nekaj dodatnih korakov.

A enostranska aplikacija (SPA) je spletno mesto, ki naloži vso vsebino vnaprej, kot odgovor na prvotno zahtevo. Brskalnik dinamično naloži vsebino, ko uporabnik klikne povezave za navigacijo po spletnem mestu. Ne zahteva strani, spremeni se samo URL.

To je drugače za strani Next.js, ki uporabljajo getServerSideProps, saj jih brskalnik upodablja na zahtevo.

Oznaka Google deluje tako, da beleži ogled strani, ko se naloži nova stran. Torej se za SPA Googlova oznaka izvede samo enkrat, ko se stran prvotno naloži. Zato morate ročno beležiti poglede, ko se uporabnik premika po različnih straneh.

Oglejte si meritve na eni strani Vodnik Google Analytics izvedeti več.

Če želite ročno beležiti oglede strani v Next.js z uporabo skripta gtag, ustvarite novo mapo z imenomlib in dodajte novo datoteko, gtag.js.

izvozkonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;
izvozkonst ogled strani = () => {
 window.gtag("konfiguracija", GA_MEASUREMENT_ID, {
 stran_pot: url,
 });
};
izvozkonst dogodek = ({ dejanje, kategorija, oznaka, vrednost }) => {
 window.gtag("dogodek", dejanje, {
 event_category: kategorija,
 event_label: oznaka,
 vrednost,
 });
};

Nato spremenite /pages/_app.js za uporabo teh funkcij in sledenje ogledom strani v kljukici useEffect.

uvoz '../styles/globals.css'
uvoz Postavitev od '../components/Layout/Layout'
uvoz Skripta od 'naslednji/skript'
uvoz {useRouter} od 'naslednji/usmerjevalnik';
uvoz { useEffect } od "reagirati";
uvoz * kot gtag od "../lib/gtag"
funkcijoMyApp({Component, pageProps}: AppProps) {
konst usmerjevalnik = useRouter();


useEffect(() => {
konst handleRouteChange = (url) => {
gtag.pageview(url);
 };


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


vrnitev () => {
 router.events.off("routeChangeComplete", handleRouteChange);
 };
 }, [router.events]);
vrnitev (
<>
<Skriptna strategija="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skripta
 id='google-analytics'
 strategija="afterInteractive"
 opasnoSetInnerHTML={{
 __html: `
okno.dataLayer = okno.dataLayer || [];
funkcijogtag(){dataLayer.push(argumenti);}
 gtag('js', novoDatum());
 gtag('konfiguracija', 'G-XXXXXX', {
stran_pot: okno.lokacija.pathname,
 });
 `,
 }}
 />
<Postavitev>
<Komponenta {...pageProps} />
</Layout>
</>
 )
}
izvozprivzeto MyApp

Ta primer uporablja kljuki useRouter in useEffect za snemanje pogleda strani vsakič, ko se uporabnik pomakne na drugo stran.

Pokličite metodo useRouter iz next/router in jo dodelite spremenljivki usmerjevalnika. V kljukici useEffect poslušajte dogodek routeChangeComplete na usmerjevalniku. Ko se dogodek sproži, zabeležite ogled strani s klicem funkcije handleRouteChange.

Stavek vrnitve kljuke useEffect se odjavi od dogodka routeChangeComplete z metodo 'off'.

Uporabite Google Analytics za zbiranje uporabniških podatkov

Podatki so zelo koristni za sprejemanje dobrih odločitev in dodajanje storitve Google Analytics na vaše spletno mesto je eden od načinov za njihovo zbiranje.

Google Analytics lahko projektu Next.js dodate s kavlji, da zagotovite beleženje vseh ogledov strani, tudi če stran uporablja usmerjanje na strani odjemalca. Zdaj lahko na nadzorni plošči Google Analytics vidite, koliko ogledov ima vaše spletno mesto.