Andmeanalüüs on kohustuslik, kui soovite jälgida oma veebisaidi külastajate arvu. Analüütika lisamiseks oma projektile on erinevaid viise, sealhulgas Google Analytics. See on tasuta teenus ja seda on suhteliselt lihtne seadistada.
Siit saate teada, kuidas lisada saidile Google Analytics, kasutades SEO-sõbralike veebisaitide loomiseks mõeldud Reacti raamistikku Next.js.
Google Analyticsi seadistamine
Google Analytics pakub statistikat teie veebisaiti külastavate inimeste käitumist. See ütleb teile, millised lehed saavad palju vaatamisi, ja annab teile vaatajaskonna andmed, nagu asukoht, vanus, huvid ja nende kasutatav seade. Need andmed võivad aidata teha otsuseid selle kohta, millise suuna teie ettevõte peaks edu saavutamiseks võtma.
Alustamiseks külastage veebilehte analüütika armatuurlaud ja looge uus konto, järgides neid samme:
- Klõpsake nuppu Loo konto nuppu administraatori vahekaardil uue konto loomiseks.
- Lisage jaotisesse Konto seadistamine konto nimi.
- Looge analüüsiatribuut, sisestades nime.
- Lisage ettevõtte üksikasjad. Valige suvandid, mis teie veebisaidile kehtivad.
- Klõpsake nuppu Loo nuppu atribuudi seadistamise lõpetamiseks.
- Klõpsake veebivool, et määrata andmevoogu, mida Google Analytics peaks jälgima.
- Määrake oma veebisaidi URL ja andke andmevoole nimi.
- Klõpsake märgistamisjuhistel ja hankige skript, mida oma veebisaidil kasutate.
- Kopeerige mõõtmise ID (jälgimiskood), et seda hiljem kasutada.
Kui olete jälgimiskoodi kätte saanud, saate seadistada projekti Next.js.
Projekti Next.js seadistamine
Kui teil ei ole veel Next.js projekti seadistatud, vaadake Next.js ametlik juhend alustamiseks.
Kui lõite üldise saidimärgendi atribuudi, saite sellise skripti:
<!-- Google'i märgend (gtag.js) -->
<skript async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<stsenaarium>
aken.dataLayer = aken.dataLayer || [];
funktsioonigtag(){dataLayer.push(argumendid);}
gtag ('js', uusKuupäev());
gtag('konfig', 'G-NHVWK8L97D');
</script>
Peate selle skripti lisama oma veebisaidi peasildile. Rakenduses Next.js kasutate skripti komponenti järgmisest/skriptist. See komponent on HTML-i skriptimärgendi laiendus. See võimaldab teil lisada oma Next.js veebisaidile kolmanda osapoole skripte ja määrata nende laadimisstrateegia, parandades jõudlust.
The Next.js skript komponent pakub erinevaid laadimisstrateegiaid. "Afterinteractive" strateegia sobib analüüsiskripti jaoks. See tähendab, et see laaditakse pärast seda, kui leht on interaktiivne.
importida Skript alates "järgmine/skript"
<Skript src="" strateegia="afterInteractive" />
Ava pages/_app.js faili ja importige ülaosas olev komponent Script.
importida Skript alates "järgmine/skript"
Järgmisena muutke rakenduse komponendi tagastuslauset, et see hõlmaks Google Analyticsi skriptimärgendit.
importida '../styles/globals.css'
importida Paigutus alates "../components/Layout/Layout"
importida Skript alates "järgmine/skript"funktsiooniMinuApp({ Component, pageProps }) {
tagasi (
<>
<Skriptistrateegia="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skript
id='google-analytics'
strateegia="afterInteractive"
ohtliklySetInnerHTML={{
__html: `
aken.dataLayer = aken.dataLayer || [];
funktsioonigtag(){dataLayer.push(argumendid);}
gtag ('js', uusKuupäev());
gtag('konfig', 'G-XXXXXXX', {
lehe_tee: aken.asukoht.pathname,
});
`,
}}
/>
<Paigutus>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportidavaikimisi MinuApp
Pange tähele, et see märgend erineb veidi Google Analyticsi pakutavast. See kasutab ohtlikult SetInnerHTML-i ja sisaldab laadimisstrateegiat. Need töötavad aga samamoodi.
Ärge unustage asendada G-XXXXXXX oma jälgimiskoodiga. Samuti on soovitatav salvestada jälgimiskood .env-faili, et hoida seda saladuses.
Google Analyticsi lisamine ühelehelisele rakendusele
Saate tavalise veebisaidi jaoks kasutada ülaltoodud skriptimärgendit ja jätta see sinnapaika. Ühelehelise rakenduse (nt Next.js) jaoks peate siiski tegema mõned lisatoimingud.
A üheleheline rakendus (SPA) on veebisait, mis laadib vastuseks esialgsele päringule kogu sisu ette. Brauser laadib sisu dünaamiliselt, kui kasutaja klõpsab saidil navigeerimiseks linke. See ei esita lehepäringut, muutub ainult URL.
See on erinev Next.js lehtede puhul, mis kasutavad getServerSidePropsi, kuna brauser need nõudmisel renderdab.
Google'i märgend salvestab uue lehe laadimisel lehevaatamise. Seega käivitatakse SPA-de puhul Google'i silt ainult üks kord, kui leht algselt laaditakse. Seetõttu peate vaated käsitsi salvestama, kui kasutaja navigeerib erinevatele lehtedele.
Vaadake ühe lehekülje mõõtmist Google Analyticsi juhend et rohkem teada saada.
Lehevaadete käsitsi salvestamiseks failis Next.js, kasutades gtag-skripti, looge uus kaust nimegalib ja lisage uus fail, gtag.js.
eksportidakonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;eksportidakonst lehevaatamine = () => {
window.gtag("konfig", GA_MEASUREMENT_ID, {
page_path: url,
});
};
eksportidakonst sündmus = ({ toiming, kategooria, silt, väärtus }) => {
window.gtag("sündmus", tegevus, {
sündmuse_kategooria: kategooria,
event_label: silt,
väärtus,
});
};
Järgmisena muutke faili /pages/_app.js, et kasutada neid funktsioone ja jälgida lehevaateid konksus useEffect.
importida '../styles/globals.css'
importida Paigutus alates "../components/Layout/Layout"
importida Skript alates "järgmine/skript"
importida { useRouter } alates 'järgmine/ruuter';
importida { useEffect } alates "reageerida";
importida * nagu gtag alates "../lib/gtag"funktsiooniMinuApp({ Component, pageProps }: AppProps) {
konst ruuter = userRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.lehevaatamine(url);
};ruuter.events.on("routeChangeComplete", handleRouteChange);
tagasi () => {
ruuter.events.off("routeChangeComplete", handleRouteChange);
};
}, [ruuter.events]);
tagasi (
<>
<Skriptistrateegia="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skript
id='google-analytics'
strateegia="afterInteractive"
ohtliklySetInnerHTML={{
__html: `
aken.dataLayer = aken.dataLayer || [];
funktsioonigtag(){dataLayer.push(argumendid);}
gtag ('js', uusKuupäev());
gtag('konfig', 'G-XXXXXX', {
lehe_tee: aken.asukoht.pathname,
});
`,
}}
/>
<Paigutus>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportidavaikimisi MinuApp
See näide kasutab konkse useRouter ja useEffect, et salvestada lehevaade iga kord, kui kasutaja teisele lehele navigeerib.
Kutsuge järgmisest/ruuterist meetod useRouter ja määrake see ruuteri muutujale. Kuulake konksus useEffect ruuteri sündmust routeChangeComplete. Kui sündmus käivitub, salvestage lehevaade, kutsudes esile funktsiooni handleRouteChange.
UseEffecti konksu tagastuslause tühistab sündmuse routeChangeComplete tellimuse väljalülitusmeetodiga.
Kasutage kasutajaandmete kogumiseks Google Analyticsit
Andmed on heade otsuste tegemisel tohutult kasulikud ja Google Analyticsi lisamine oma veebisaidile on üks viis nende kogumiseks.
Saate lisada Next.js projekti Google Analyticsi konksude abil, et salvestada kõik lehevaatamised isegi siis, kui leht kasutab kliendipoolset marsruutimist. Nüüd saate oma Google Analyticsi juhtpaneelil vaadata, mitu vaatamist teie sait saab.
