Duomenų analizė yra būtina, jei norite sekti svetainės lankytojų skaičių. Yra įvairių būdų, kaip pridėti analizę prie projekto, įskaitant „Google Analytics“. Tai nemokama paslauga ir ją gana paprasta nustatyti.

Sužinokite, kaip pridėti „Google Analytics“ prie savo svetainės naudodami Next.js – „React“ sistemą, skirtą SEO palankioms svetainėms kurti.

„Google Analytics“ nustatymas

Google Analytics suteikia įžvalgų žmonių, besilankančių jūsų svetainėje, elgesį. Ji nurodo, kurie puslapiai sulaukia peržiūrų, ir pateikia auditorijos duomenis, pvz., vietą, amžių, pomėgius ir naudojamą įrenginį. Šie duomenys gali padėti apsispręsti, kokia kryptimi jūsų verslas turėtų būti sėkmingas.

Norėdami pradėti, apsilankykite analizės prietaisų skydelis ir sukurkite naują paskyrą atlikdami šiuos veiksmus:

  1. Spustelėkite Sukurti paskyrą mygtuką administratoriaus skirtuke, kad sukurtumėte naują paskyrą.
  2. Skiltyje Paskyros sąranka pridėkite paskyros pavadinimą.
  3. Sukurkite analizės nuosavybę nurodydami pavadinimą.
    4. instagram viewer
  4. Pridėkite įmonės informaciją. Pasirinkite parinktis, taikomas jūsų svetainei.
  5. Spustelėkite Sukurti mygtuką, kad užbaigtumėte nuosavybės nustatymą.
  6. Spustelėkite žiniatinklio srautą, kad nurodytumėte duomenų srautą, kurį turėtų stebėti „Google Analytics“.
  7. Nurodykite savo svetainės URL ir suteikite duomenų srautui pavadinimą.
  8. Spustelėkite žymėjimo instrukcijas ir gaukite scenarijų, kurį naudosite savo svetainėje.
  9. Nukopijuokite matavimo ID (stebėjimo kodą), kad galėtumėte naudoti vėliau.

Gavę stebėjimo kodą, galėsite nustatyti Next.js projektą.

„Next.js“ projekto nustatymas

Jei dar nesate nustatę Next.js projekto, žr Next.js oficialus vadovas pradėti.

Kai sukūrėte bendrosios svetainės žymos nuosavybę, gavote tokį scenarijų:

<!-- "Google" žyma (gtag.js) ->
<scenarijus async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<scenarijus>
langas.dataLayer = langas.dataLayer || [];
funkcijagtag(){dataLayer.push(argumentai);}
 gtag ('js', naujasData());
 gtag ('konfig', 'G-NHVWK8L97D');
</script>

Turite pridėti šį scenarijų prie savo svetainės galvos žymos. Programoje Next.js naudojate scenarijaus komponentą iš next/script. Šis komponentas yra HTML scenarijaus žymos plėtinys. Tai leidžia į savo Next.js svetainę įtraukti trečiųjų šalių scenarijus ir nustatyti jų įkėlimo strategiją, taip pagerinant našumą.

The Next.js scenarijus komponentas siūlo skirtingas įkėlimo strategijas. „Afterinteractive“ strategija tinka analizės scenarijui. Tai reiškia, kad jis bus įkeltas, kai puslapis bus interaktyvus.

importuoti Scenarijus iš "kitas / scenarijus"
<Scenarijus src="" strategija ="afterInteractive" />

Atidaryk pages/_app.js failą ir importuokite Script komponentą viršuje.

importuoti Scenarijus iš "kitas / scenarijus"

Tada pakeiskite programos komponento grąžinimo teiginį, kad įtrauktumėte scenarijaus žymą iš „Google Analytics“.

importuoti '../styles/globals.css'
importuoti Išdėstymas iš „../components/Layout/Layout“
importuoti Scenarijus iš "kitas / scenarijus"
funkcija„MyApp“.({ Komponentas, puslapio rekvizitai }) {
grąžinti (
<>
<Scenarijaus strategija="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Scenarijus
 id='Google analizė'
 strategija ="afterInteractive"
 ohtliklySetInnerHTML={{
 __html: `
langas.dataLayer = langas.dataLayer || [];
funkcijagtag(){dataLayer.push(argumentai);}
 gtag ('js', naujasData());
 gtag ('konfig', 'G-XXXXXXX', {
page_path: langas.vieta.kelio pavadinimas,
 });
 `,
 }}
 />
<Išdėstymas>
<Komponentas {...pageProps} />
</Layout>
</>
 )
}
eksportuotinumatytas „MyApp“.

Atminkite, kad ši žyma šiek tiek skiriasi nuo „Google Analytics“ teikiamos žymos. Jis naudoja pavojingaiSetInnerHTML ir apima įkėlimo strategiją. Tačiau jie veikia taip pat.

Nepamirškite pakeisti G-XXXXXXX savo stebėjimo kodu. Taip pat patartina saugoti stebėjimo kodą .env faile, kad jis liktų paslaptyje.

„Google Analytics“ įtraukimas į vieno puslapio programą

Galite naudoti aukščiau esančią scenarijaus žymą įprastai svetainei ir palikti ją taip. Tačiau vieno puslapio programai, tokiai kaip Next.js svetainė, reikia atlikti keletą papildomų veiksmų.

A vieno puslapio aplikacija (SPA) yra svetainė, kurioje visas turinys įkeliamas iš anksto, reaguojant į pradinę užklausą. Naršyklė dinamiškai įkelia turinį, vartotojui spustelėjus nuorodas, kad naršytų svetainėje. Jis neteikia puslapio užklausos, keičiasi tik URL.

Tai skiriasi „Next.js“ puslapiuose, kuriuose naudojamas „getServerSideProps“, nes naršyklė juos pateikia paprašius.

„Google“ žyma veikia įrašydama puslapio peržiūrą, kai įkeliamas naujas puslapis. Taigi, SPA, Google žyma vykdoma tik vieną kartą, kai puslapis iš pradžių įkeliamas. Todėl, vartotojui naršant į skirtingus puslapius, peržiūras turite įrašyti rankiniu būdu.

Žiūrėkite vieno puslapio matavimą Google Analytics vadovas norėdami sužinoti daugiau.

Norėdami rankiniu būdu įrašyti puslapio peržiūras Next.js naudodami gtag scenarijų, sukurkite naują aplanką pavadinimulib ir pridėti naują failą, gtag.js.

eksportuotikonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;
eksportuotikonst puslapio peržiūra = () => {
 window.gtag("konfig", GA_MEASUREMENT_ID, {
 page_path: url,
 });
};
eksportuotikonst įvykis = ({ veiksmas, kategorija, etiketė, vertė }) => {
 window.gtag("įvykis", veiksmas, {
 event_category: kategorija,
 event_label: etiketė,
 vertė,
 });
};

Tada pakeiskite /pages/_app.js, kad naudotumėte šias funkcijas ir stebėtumėte puslapių peržiūras „useEffect Hook“.

importuoti '../styles/globals.css'
importuoti Išdėstymas iš „../components/Layout/Layout“
importuoti Scenarijus iš "kitas / scenarijus"
importuoti { useRouter } iš 'kitas/maršrutizatorius';
importuoti { useEffect } iš „reaguoti“;
importuoti * kaip gtag iš "../lib/gtag"
funkcija„MyApp“.({ Component, pageProps }: AppProps) {
konst maršrutizatorius = useRouter();


useEffect(() => {
konst handleRouteChange = (url) => {
gtag.puslapio peržiūra(url);
 };


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


grąžinti () => {
 router.events.off("routeChangeComplete", rankenaRouteChange);
 };
 }, [router.events]);
grąžinti (
<>
<Scenarijaus strategija="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Scenarijus
 id='Google analizė'
 strategija ="afterInteractive"
 ohtliklySetInnerHTML={{
 __html: `
langas.dataLayer = langas.dataLayer || [];
funkcijagtag(){dataLayer.push(argumentai);}
 gtag ('js', naujasData());
 gtag ('konfig', 'G-XXXXXX', {
page_path: langas.vieta.kelio pavadinimas,
 });
 `,
 }}
 />
<Išdėstymas>
<Komponentas {...pageProps} />
</Layout>
</>
 )
}
eksportuotinumatytas „MyApp“.

Šiame pavyzdyje naudojami „useRouter“ ir „useEffect“ kabliukai, kad įrašytų puslapio peržiūrą kiekvieną kartą, kai vartotojas pereina į kitą puslapį.

Iš next/router iškvieskite useRouter metodą ir priskirkite jį maršrutizatoriaus kintamajam. „useEffect Hook“ klausykitės maršruto parinktuvo įvykio routeChangeComplete. Kai įvykis suaktyvinamas, įrašykite puslapio peržiūrą, iškviesdami handrouteChange funkciją.

„useEffect Hook“ grąžinimo sakinys atšaukia įvykio „routeChangeComplete“ prenumeratą naudojant „off“ metodą.

Naudokite „Google Analytics“ naudotojų duomenims rinkti

Duomenys yra labai naudingi priimant gerus sprendimus, o „Google Analytics“ įtraukimas į svetainę yra vienas iš būdų juos rinkti.

Galite pridėti „Google Analytics“ prie Next.js projekto naudodami kabliukus, kad užtikrintumėte, jog įrašysite visas puslapio peržiūras, net kai puslapis naudoja kliento nukreipimą. Dabar „Google Analytics“ informacijos suvestinėje galite pamatyti, kiek peržiūrų jūsų svetainė sulaukia.