Tietojen analysointi on välttämätöntä, jos haluat seurata verkkosivustosi kävijämäärää. Voit lisätä analytiikkaa projektiisi eri tavoilla, mukaan lukien Google Analytics. Se on ilmainen palvelu, ja sen käyttöönotto on suhteellisen helppoa.
Opi lisäämään Google Analytics sivustollesi Next.js: n avulla, joka on React-kehys SEO-ystävällisten verkkosivustojen rakentamiseen.
Google Analyticsin määrittäminen
Google Analytics tarjoaa oivalluksia verkkosivustollasi vierailevien ihmisten käyttäytymiseen. Se kertoo sinulle, mitkä sivut saavat näyttökertoja, ja antaa sinulle yleisötietoja, kuten sijainnin, iän, kiinnostuksen kohteet ja heidän käyttämänsä laitteen. Nämä tiedot voivat auttaa tekemään päätöksiä siitä, mihin suuntaan yrityksesi tulisi mennä menestyäkseen.
Aloita käymällä osoitteessa analytiikan hallintapaneeli ja luo uusi tili seuraavasti:
- Klikkaa Luo tili -painiketta järjestelmänvalvoja-välilehdellä luodaksesi uuden tilin.
- Lisää tilin nimi Tilin asetukset -osioon.
- Luo analytiikkaominaisuus antamalla nimi.
- Lisää yrityksen tiedot. Valitse verkkosivustoasi koskevat vaihtoehdot.
- Klikkaa Luoda -painiketta, kun haluat viimeistellä omaisuuden määrityksen.
- Napsauta verkkovirtaa määrittääksesi tietovirran, jota Google Analyticsin tulee seurata.
- Määritä verkkosivustosi URL-osoite ja anna tietovirralle nimi.
- Napsauta koodausohjeita ja hanki komentosarja, jota käytät verkkosivustollasi.
- Kopioi mittaustunnus (seurantakoodi) myöhempää käyttöä varten.
Kun olet saanut seurantakoodin, voit määrittää Next.js-projektin.
Next.js-projektin määrittäminen
Jos et ole vielä määrittänyt Next.js-projektia, katso Next.js virallinen opas aloittaaksesi.
Kun loit yleisen sivustotagi-ominaisuuden, sait seuraavanlaisen komentosarjan:
<!-- Google-tunniste (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<käsikirjoitus>
ikkuna.dataLayer = ikkuna.dataLayer || [];
toimintogtag(){dataLayer.push(argumentteja);}
gtag('js', UusiPäivämäärä());
gtag('config', 'G-NHVWK8L97D');
</script>
Sinun on lisättävä tämä komentosarja verkkosivustosi head-tunnisteeseen. Next.js: ssä käytät Script-komponenttia kohdasta next/script. Tämä komponentti on HTML-komentosarjatunnisteen laajennus. Sen avulla voit sisällyttää kolmannen osapuolen komentosarjoja Next.js-verkkosivustollesi ja määrittää niiden latausstrategian, mikä parantaa suorituskykyä.
The Next.js-komentosarja komponentti tarjoaa erilaisia latausstrategioita. "Afterinteractive" -strategia sopii analytiikkaskriptille. Tämä tarkoittaa, että se latautuu, kun sivu on interaktiivinen.
tuonti Käsikirjoitus alkaen "seuraava/skripti"
<Komentosarja src="" strategia ="afterInteractive" />
Avaa pages/_app.js tiedosto ja tuo yläreunassa oleva komentosarjakomponentti.
tuonti Käsikirjoitus alkaen 'seuraava/käsikirjoitus'
Muokkaa seuraavaksi App-komponentin palautuslauseketta niin, että se sisältää Google Analyticsin komentosarjatunnisteen.
tuonti '../styles/globals.css'
tuonti Layout alkaen '../components/Layout/Layout'
tuonti Käsikirjoitus alkaen 'seuraava/käsikirjoitus'toimintoOmaApp({ Komponentti, sivuprops }) {
palata (
<>
<Käsikirjoitusstrategia="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Käsikirjoitus
id='google-analytics'
strategia ="afterInteractive"
vaaralySetInnerHTML={{
__html: `
ikkuna.dataLayer = ikkuna.dataLayer || [];
toimintogtag(){dataLayer.push(argumentteja);}
gtag('js', UusiPäivämäärä());
gtag('config', 'G-XXXXXXX', {
page_path: ikkuna.sijainti.polkunimi,
});
`,
}}
/>
<Layout>
<Komponentti {...pageProps} />
</Layout>
</>
)
}
viedäoletuksena OmaApp
Huomaa, että tämä tagi eroaa hieman Google Analyticsin tarjoamasta tagista. Se käyttää vaarallisestiSetInnerHTML-koodia ja sisältää latausstrategian. Ne kuitenkin toimivat samalla tavalla.
Muista korvata G-XXXXXXX seurantakoodillasi. On myös suositeltavaa tallentaa seurantakoodi .env-tiedostoon, jotta se pysyy salassa.
Google Analyticsin lisääminen yhden sivun sovellukseen
Voit käyttää yllä olevaa komentosarjatunnistetta tavalliselle verkkosivustolle ja jättää sen siihen. Yksisivuisessa sovelluksessa, kuten Next.js-verkkosivustossa, sinun on kuitenkin suoritettava muutama lisävaihe.
A yksisivuinen sovellus (SPA) on verkkosivusto, joka lataa kaiken sisällön etukäteen vastauksena ensimmäiseen pyyntöön. Selain lataa sisältöä dynaamisesti, kun käyttäjä napsauttaa linkkejä navigoidakseen sivustolla. Se ei tee sivupyyntöä, vain URL-osoite muuttuu.
Tämä on erilainen Next.js-sivuilla, jotka käyttävät getServerSidePropsia, kun selain hahmontaa ne pyynnöstä.
Google-tunniste tallentaa sivun katselukerran, kun uusi sivu latautuu. Joten SPA: issa Google-tunniste suoritetaan vain kerran, kun sivu latautuu ensimmäisen kerran. Siksi sinun on tallennettava näkymät manuaalisesti, kun käyttäjä siirtyy eri sivuille.
Katso yhden sivun mittaus Google Analytics -opas oppia lisää.
Jos haluat tallentaa sivun katselukerrat manuaalisesti Next.js-tiedostoon gtag-komentosarjan avulla, luo uusi kansio nimeltälib ja lisää uusi tiedosto, gtag.js.
viedäkonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;viedäkonst sivun katselu = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
viedäkonst tapahtuma = ({ toiminto, luokka, tunniste, arvo }) => {
window.gtag("tapahtuma", toiminta, {
event_category: luokka,
event_label: etiketti,
arvo,
});
};
Muokkaa seuraavaksi tiedostoa /pages/_app.js, jotta voit käyttää näitä toimintoja ja seurata sivun katselukertoja useEffect-koukussa.
tuonti '../styles/globals.css'
tuonti Layout alkaen '../components/Layout/Layout'
tuonti Käsikirjoitus alkaen 'seuraava/käsikirjoitus'
tuonti { käytä reititintä } alkaen 'seuraava/reititin';
tuonti { useEffect } alkaen "reagoi";
tuonti * kuten gtag alkaen "../lib/gtag"toimintoOmaApp({ Component, pageProps }: AppProps) {
konst reititin = userRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.sivunäkymä(url);
};router.events.on("routeChangeComplete", handleRouteChange);
palata () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
palata (
<>
<Käsikirjoitusstrategia="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Käsikirjoitus
id='google-analytics'
strategia ="afterInteractive"
vaaralySetInnerHTML={{
__html: `
ikkuna.dataLayer = ikkuna.dataLayer || [];
toimintogtag(){dataLayer.push(argumentteja);}
gtag('js', UusiPäivämäärä());
gtag('config', 'G-XXXXXX', {
page_path: ikkuna.sijainti.polkunimi,
});
`,
}}
/>
<Layout>
<Komponentti {...pageProps} />
</Layout>
</>
)
}
viedäoletuksena OmaApp
Tämä esimerkki käyttää useRouter- ja useEffect-koukkuja sivun katselun tallentamiseen aina, kun käyttäjä siirtyy toiselle sivulle.
Kutsu useRouter-metodi kohdasta next/router ja määritä se reitittimen muuttujalle. Kuuntele useEffect-koukussa reitittimen routeChangeComplete-tapahtuma. Kun tapahtuma käynnistyy, tallenna sivun katselu kutsumalla handleRouteChange-toimintoa.
UseEffect-koukun paluulause peruuttaa routeChangeComplete-tapahtuman tilauksen "off"-menetelmällä.
Käytä Google Analyticsia käyttäjätietojen keräämiseen
Tiedoista on valtavasti hyötyä hyvien päätösten tekemisessä, ja Google Analyticsin lisääminen verkkosivustollesi on yksi tapa kerätä niitä.
Voit lisätä Google Analyticsin Next.js-projektiin koukkujen avulla varmistaaksesi, että tallennat kaikki sivun katselut, vaikka sivu käyttää asiakaspuolen reititystä. Nyt voit nähdä, kuinka monta näyttökertaa sivustosi saa Google Analytics -hallintapaneelissa.
