Analytika dat je nutností, pokud chcete mít přehled o počtu návštěvníků, které váš web získává. Existují různé způsoby, jak můžete do projektu přidat analytiku, včetně Google Analytics. Je to bezplatná služba a její nastavení je poměrně jednoduché.
Naučte se, jak přidat Google Analytics na svůj web pomocí Next.js, rámce React pro vytváření webů vhodných pro SEO.
Nastavení Google Analytics
Google Analytics poskytuje statistiky do chování lidí navštěvujících váš web. Řekne vám, které stránky mají počet zobrazení, a poskytne vám údaje o publiku, jako je poloha, věk, zájem a zařízení, které používají. Tato data mohou pomoci při rozhodování o tom, jakým směrem by se vaše podnikání mělo ubírat, aby bylo úspěšné.
Chcete-li začít, navštivte stránku analytický panel a vytvořte si nový účet podle následujících kroků:
- Klikněte na Vytvořit účet tlačítko na kartě správce pro vytvoření nového účtu.
- V části Nastavení účtu přidejte název účtu.
- Vytvořte analytickou službu zadáním názvu.
- Přidejte podrobnosti o firmě. Vyberte možnosti, které platí pro váš web.
- Klikněte na Vytvořit dokončete nastavení vlastnosti.
- Kliknutím na webový stream určíte datový proud, který má Google Analytics sledovat.
- Zadejte adresu URL svého webu a pojmenujte datový proud.
- Klikněte na pokyny pro označování a získejte skript, který použijete na svém webu.
- Zkopírujte ID měření (sledovací kód), abyste jej mohli použít později.
Jakmile získáte měřicí kód, můžete nastavit projekt Next.js.
Nastavení projektu Next.js
Pokud ještě nemáte nastaven projekt Next.js, podívejte se na Oficiální průvodce Next.js začít.
Když jste vytvořili vlastnost globální značky webu, získali jste skript, jako je tento:
<!-- Značka Google (gtag.js) -->
<skript async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<skript>
okno.dataLayer = okno.dataLayer || [];
funkcegtag(){dataLayer.push(argumenty);}
gtag('js', Novýdatum());
gtag('config', 'G-NHVWK8L97D');
</script>
Tento skript musíte přidat do značky head vašeho webu. V Next.js používáte komponentu Script z next/script. Tato komponenta je rozšířením značky HTML skriptu. Umožňuje vám zahrnout skripty třetích stran na váš web Next.js a nastavit jejich strategii načítání, což zlepšuje výkon.
The Skript Next.js komponenta nabízí různé strategie načítání. Strategie „afterinteractive“ je vhodná pro analytický skript. To znamená, že se načte, až bude stránka interaktivní.
import Skript z "další/skript"
<Skript src="" strategie ="afterInteractive" />
Otevři pages/_app.js a importujte komponentu Script nahoře.
import Skript z 'další/script'
Dále upravte příkaz return komponenty App tak, aby zahrnoval značku skriptu z Google Analytics.
import '../styles/globals.css'
import Rozložení z '../components/Layout/Layout'
import Skript z 'další/script'funkceMoje aplikace({ Component, pageProps }) {
vrátit se (
<>
<Strategie skriptu="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skript
id='google-analytics'
strategie ="afterInteractive"
nebezpečněSetInnerHTML={{
__html: `
okno.dataLayer = okno.dataLayer || [];
funkcegtag(){dataLayer.push(argumenty);}
gtag('js', Novýdatum());
gtag('config', 'G-XXXXXXX', {
cesta_stránky: okno.umístění.název cesty,
});
`,
}}
/>
<Rozložení>
<Komponenta {...pageProps} />
</Layout>
</>
)
}
vývoznívýchozí Moje aplikace
Tato značka se mírně liší od značky, kterou poskytuje Google Analytics. Používá nebezpečněSetInnerHTML a zahrnuje strategii načítání. Fungují však stejně.
Nezapomeňte nahradit G-XXXXXXX svým měřicím kódem. Pro zachování tajnosti je také vhodné uložit sledovací kód do souboru .env.
Přidání Google Analytics do jednostránkové aplikace
Můžete použít značku skriptu výše pro běžný web a nechat to tak. U jednostránkové aplikace, jako je web Next.js, však musíte udělat pár kroků navíc.
A jednostránková aplikace (SPA) je webová stránka, která načte veškerý obsah předem, v reakci na počáteční požadavek. Prohlížeč načítá obsah dynamicky, když uživatel klikne na odkazy za účelem procházení webu. Nevytváří požadavek na stránku, pouze se změní adresa URL.
To se liší pro stránky Next.js, které používají getServerSideProps, protože prohlížeč je vykresluje na vyžádání.
Značka Google funguje tak, že při načtení nové stránky zaznamená zobrazení stránky. Takže u SPA se značka Google spustí pouze jednou, když se stránka načte. Proto musíte ručně zaznamenávat zobrazení, když uživatel přechází na různé stránky.
Viz jednostránkové měření Průvodce Google Analytics dozvědět se více.
Chcete-li ručně zaznamenávat zobrazení stránek v Next.js pomocí skriptu gtag, vytvořte novou složku s názvemlib a přidat nový soubor, gtag.js.
vývozníkonst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;vývozníkonst zobrazení stránky = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
vývozníkonst event = ({ akce, kategorie, štítek, hodnota }) => {
window.gtag("událost", akce, {
event_category: kategorie,
event_label: štítek,
hodnota,
});
};
Dále upravte /pages/_app.js tak, aby používal tyto funkce a sledoval zobrazení stránek v háku useEffect.
import '../styles/globals.css'
import Rozložení z '../components/Layout/Layout'
import Skript z 'další/script'
import { useRouter } z 'další/router';
import { useEffect } z "reagovat";
import * tak jako gtag z "../lib/gtag"funkceMoje aplikace({ Component, pageProps }: AppProps) {
konst router = useRouter();useEffect(() => {
konst handleRouteChange = (url) => {
gtag.zobrazení stránky(url);
};router.events.on("routeChangeComplete", handleRouteChange);
vrátit se () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
vrátit se (
<>
<Strategie skriptu="afterInteractive" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skript
id='google-analytics'
strategie ="afterInteractive"
nebezpečněSetInnerHTML={{
__html: `
okno.dataLayer = okno.dataLayer || [];
funkcegtag(){dataLayer.push(argumenty);}
gtag('js', Novýdatum());
gtag('config', 'G-XXXXXX', {
cesta_stránky: okno.umístění.název cesty,
});
`,
}}
/>
<Rozložení>
<Komponenta {...pageProps} />
</Layout>
</>
)
}
vývoznívýchozí Moje aplikace
Tento příklad používá háčky useRouter a useEffect k zaznamenání zobrazení stránky pokaždé, když uživatel přejde na jinou stránku.
Zavolejte metodu useRouter z next/router a přiřaďte ji do proměnné routeru. V háku useEffect poslouchejte událost routeChangeComplete na routeru. Když se událost spustí, zaznamenejte zobrazení stránky voláním funkce handleRouteChange.
Příkaz return háku useEffect se odhlásí z události routeChangeComplete pomocí metody ‚off‘.
Použijte Google Analytics ke shromažďování uživatelských dat
Data jsou nesmírně přínosná pro dobrá rozhodnutí a přidání Google Analytics na váš web je jedním ze způsobů, jak je shromáždit.
Google Analytics můžete přidat do projektu Next.js pomocí háčků, abyste zajistili, že zaznamenáte všechna zobrazení stránky, i když stránka používá směrování na straně klienta. Nyní můžete na hlavním panelu Google Analytics vidět, kolik zobrazení váš web získá.