Datu analīze ir obligāta, ja vēlaties sekot līdzi jūsu vietnes apmeklētāju skaitam. Ir dažādi veidi, kā savam projektam pievienot analīzi, tostarp Google Analytics. Tas ir bezmaksas pakalpojums, un to ir salīdzinoši vienkārši iestatīt.
Uzziniet, kā savai vietnei pievienot Google Analytics, izmantojot Next.js — React sistēmu SEO draudzīgu vietņu izveidei.
Google Analytics iestatīšana
Google Analytics sniedz ieskatu to cilvēku uzvedību, kuri apmeklē jūsu vietni. Tas norāda, kuras lapas saņem skatījumu skaitu, un sniedz auditorijas datus, piemēram, atrašanās vietu, vecumu, intereses un to izmantoto ierīci. Šie dati var palīdzēt pieņemt lēmumus par to, kādā virzienā jūsu uzņēmumam vajadzētu būt veiksmīgam.
Lai sāktu, apmeklējiet analītikas informācijas panelis un izveidojiet jaunu kontu, veicot šīs darbības:
- Noklikšķiniet uz Izveidot profilu pogu administratora cilnē, lai izveidotu jaunu kontu.
- Sadaļā Konta iestatīšana pievienojiet konta nosaukumu.
- Izveidojiet analītikas īpašumu, norādot nosaukumu.
- Pievienojiet uzņēmuma informāciju. Atlasiet opcijas, kas attiecas uz jūsu vietni.
- Noklikšķiniet uz Izveidot pogu, lai pabeigtu īpašuma iestatīšanu.
- Noklikšķiniet uz tīmekļa straumes, lai norādītu datu straumi, kas jāizseko pakalpojumam Google Analytics.
- Norādiet savas vietnes URL un piešķiriet datu straumei nosaukumu.
- Noklikšķiniet uz marķēšanas norādījumiem un iegūstiet skriptu, ko izmantosit savā vietnē.
- Kopējiet mērījuma ID (izsekošanas kodu), lai izmantotu vēlāk.
Kad esat saņēmis izsekošanas kodu, varat iestatīt Next.js projektu.
Next.js projekta iestatīšana
Ja jums vēl nav iestatīts Next.js projekts, skatiet Next.js oficiālais ceļvedis lai sāktu.
Kad izveidojāt globālā vietnes taga rekvizītu, tika iegūts šāds skripts:
<!-- Google tags (gtag.js) -->
<skripts async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<skripts>
logs.dataLayer = logs.dataLayer || [];
funkcijugtag(){dataLayer.push(argumenti);}
gtag ('js', jaunsDatums());
gtag('konfigurācija', 'G-NHVWK8L97D');
</script>
Šis skripts ir jāpievieno savas vietnes head tagam. Programmā Next.js jūs izmantojat skripta komponentu no next/script. Šis komponents ir HTML skripta taga paplašinājums. Tas ļauj iekļaut savā Next.js vietnē trešo pušu skriptus un iestatīt to ielādes stratēģiju, uzlabojot veiktspēju.
The Next.js skripts komponents piedāvā dažādas ielādes stratēģijas. “Afterinteractive” stratēģija ir piemērota analītikas skriptam. Tas nozīmē, ka tā tiks ielādēta pēc tam, kad lapa būs interaktīva.
imports Skripts no "nākamais/skripts"
<Skripts src="" stratēģija ="afterInteractive" />
Atveriet pages/_app.js failu un importējiet Script komponentu augšpusē.
imports Skripts no 'nākamais/skripts'
Pēc tam modificējiet lietotnes komponenta atgriešanas paziņojumu, lai iekļautu skripta tagu no Google Analytics.
imports '../styles/globals.css'
imports Izkārtojums no "../components/Layout/Layout"
imports Skripts no 'nākamais/skripts'funkcijuMyApp({ Component, pageProps }) {
atgriezties (
<>
<Skripta stratēģija ="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skripts
id='google-analytics'
stratēģija ="afterInteractive"
ohtliklySetInnerHTML={{
__html: `
logs.dataLayer = logs.dataLayer || [];
funkcijugtag(){dataLayer.push(argumenti);}
gtag ('js', jaunsDatums());
gtag('konfigurācija', 'G-XXXXXXX', {
page_path: logs.vieta.pathname,
});
`,
}}
/>
<Izkārtojums>
<Komponents {...pageProps} />
</Layout>
</>
)
}
eksportētnoklusējuma MyApp
Ņemiet vērā, ka šis tags nedaudz atšķiras no Google Analytics piedāvātā taga. Tas izmanto bīstami SetInnerHTML un ietver ielādes stratēģiju. Tomēr viņi strādā vienādi.
Atcerieties aizstāt G-XXXXXXX ar savu izsekošanas kodu. Ir arī ieteicams saglabāt izsekošanas kodu .env failā, lai tas būtu slepens.
Google Analytics pievienošana vienas lapas lietojumprogrammai
Varat izmantot iepriekš minēto skripta tagu parastai vietnei un atstāt to tā. Tomēr vienas lapas lietojumprogrammai, piemēram, vietnei Next.js, ir jāveic dažas papildu darbības.
A vienas lapas lietojumprogramma (SPA) ir vietne, kurā viss saturs tiek ielādēts iepriekš, atbildot uz sākotnējo pieprasījumu. Pārlūkprogramma ielādē saturu dinamiski, kad lietotājs noklikšķina uz saitēm, lai pārvietotos vietnē. Tas neveic lapas pieprasījumu, mainās tikai URL.
Tas atšķiras Next.js lapām, kurās tiek izmantots getServerSideProps, jo pārlūkprogramma tās atveido pēc pieprasījuma.
Google tags darbojas, ierakstot lapas skatījumu, kad tiek ielādēta jauna lapa. Tātad SPA, Google tags tiek izpildīts tikai vienu reizi, kad lapa tiek sākotnēji ielādēta. Tāpēc, lietotājam pārvietojoties uz dažādām lapām, skati ir jāreģistrē manuāli.
Skatiet vienas lapas mērījumu Google Analytics rokasgrāmata lai uzzinātu vairāk.
Lai manuāli reģistrētu lapu skatījumus failā Next.js, izmantojot gtag skriptu, izveidojiet jaunu mapi ar nosaukumulib un pievienojiet jaunu failu, gtag.js.
eksportētkonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;eksportētkonst lapas skatījums = () => {
window.gtag("konfigurācija", GA_MEASUREMENT_ID, {
page_path: url,
});
};
eksportētkonst notikums = ({ darbība, kategorija, etiķete, vērtība }) => {
window.gtag("notikumu", darbība, {
event_category: kategorija,
event_label: etiķete,
vērtība,
});
};
Pēc tam modificējiet /pages/_app.js, lai izmantotu šīs funkcijas un izsekotu lapu skatījumus useEffect āķī.
imports '../styles/globals.css'
imports Izkārtojums no "../components/Layout/Layout"
imports Skripts no 'nākamais/skripts'
imports { useRouter } no 'nākamais/maršrutētājs';
imports { useEffect } no "reaģēt";
imports * kā gtag no "../lib/gtag"funkcijuMyApp({ Component, pageProps }: AppProps) {
konst maršrutētājs = useRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.pageview(url);
};router.events.on("routeChangeComplete", handRouteChange);
atgriezties () => {
router.events.off("routeChangeComplete", handRouteChange);
};
}, [router.events]);
atgriezties (
<>
<Skripta stratēģija ="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skripts
id='google-analytics'
stratēģija ="afterInteractive"
ohtliklySetInnerHTML={{
__html: `
logs.dataLayer = logs.dataLayer || [];
funkcijugtag(){dataLayer.push(argumenti);}
gtag ('js', jaunsDatums());
gtag('konfigurācija', 'G-XXXXXX', {
page_path: logs.vieta.pathname,
});
`,
}}
/>
<Izkārtojums>
<Komponents {...pageProps} />
</Layout>
</>
)
}
eksportētnoklusējuma MyApp
Šajā piemērā tiek izmantoti āķi useRouter un useEffect, lai reģistrētu lapas skatījumu katru reizi, kad lietotājs pāriet uz citu lapu.
No next/router izsauciet metodi useRouter un piešķiriet to maršrutētāja mainīgajam. Izmantojot useEffect hook, klausieties routeChangeComplete notikumu maršrutētājā. Kad notikums tiek aktivizēts, ierakstiet lapas skatījumu, izsaucot HandRouteChange funkciju.
UseEffect hook atgriešanas paziņojums atceļ maršrutaChangeComplete notikuma abonēšanu, izmantojot metodi “off”.
Izmantojiet Google Analytics, lai apkopotu lietotāja datus
Dati ir ļoti noderīgi, lai pieņemtu labus lēmumus, un Google Analytics pievienošana savai vietnei ir viens no veidiem, kā tos apkopot.
Varat pievienot Google Analytics projektam Next.js, izmantojot āķus, lai nodrošinātu visu lapu skatījumu ierakstīšanu pat tad, ja lapa izmanto klienta puses maršrutēšanu. Tagad Google Analytics informācijas panelī varat redzēt, cik skatījumu jūsu vietne iegūst.
