Datenanalyse ist ein Muss, wenn Sie die Anzahl der Besucher Ihrer Website verfolgen möchten. Es gibt verschiedene Möglichkeiten, wie Sie Analysen zu Ihrem Projekt hinzufügen können, einschließlich Google Analytics. Es ist ein kostenloser Dienst und relativ einfach einzurichten.
Erfahren Sie, wie Sie Google Analytics mithilfe von Next.js, einem React-Framework zum Erstellen SEO-freundlicher Websites, zu Ihrer Website hinzufügen.
Google Analytics einrichten
Google Analytics liefert Erkenntnisse in das Verhalten der Besucher Ihrer Website. Es zeigt Ihnen, welche Seiten die Anzahl der Aufrufe erhalten, und gibt Ihnen Zielgruppendaten wie Standort, Alter, Interesse und das verwendete Gerät. Diese Daten können dabei helfen, Entscheidungen über die Richtung zu treffen, die Ihr Unternehmen einschlagen sollte, um erfolgreich zu sein.
Um zu beginnen, besuchen Sie die Analyse-Dashboard und erstellen Sie ein neues Konto, indem Sie diesen Schritten folgen:
- Drücke den Benutzerkonto erstellen Schaltfläche im Admin-Tab, um ein neues Konto zu erstellen.
- Fügen Sie im Abschnitt Kontoeinrichtung einen Kontonamen hinzu.
- Erstellen Sie die Analytics-Eigenschaft, indem Sie einen Namen angeben.
- Fügen Sie die Geschäftsdetails hinzu. Wählen Sie die Optionen aus, die für Ihre Website gelten.
- Drücke den Erstellen Schaltfläche, um die Einrichtung der Eigenschaft abzuschließen.
- Klicken Sie auf Webstream, um den Datenstrom anzugeben, den Google Analytics verfolgen soll.
- Geben Sie die URL zu Ihrer Website an und geben Sie dem Datenstrom einen Namen.
- Klicken Sie auf Tagging-Anweisungen und erhalten Sie das Skript, das Sie auf Ihrer Website verwenden werden.
- Kopieren Sie die Messungs-ID (den Tracking-Code), um sie später zu verwenden.
Sobald Sie den Tracking-Code erhalten haben, können Sie das Next.js-Projekt einrichten.
Einrichten des Next.js-Projekts
Wenn Sie noch kein Next.js-Projekt eingerichtet haben, lesen Sie die Offizieller Next.js-Leitfaden um anzufangen.
Als Sie die Eigenschaft des allgemeinen Website-Tags erstellt haben, haben Sie ein Skript wie das folgende erhalten:
<!-- Google-Tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"></script>
<Skript>
Fenster.dataLayer = Fenster.dataLayer || [];
FunktionTag(){dataLayer.push(Argumente);}
gtag('js', neuDatum());
Tag('Konfig', 'G-NHVWK8L97D');
</script>
Sie müssen dieses Skript zum Head-Tag Ihrer Website hinzufügen. In Next.js verwenden Sie die Skriptkomponente von next/script. Diese Komponente ist eine Erweiterung des HTML-Script-Tags. Es ermöglicht Ihnen, Skripte von Drittanbietern in Ihre Next.js-Website einzubinden und deren Ladestrategie festzulegen, wodurch die Leistung verbessert wird.
Der Next.js-Skript Die Komponente bietet verschiedene Ladestrategien. Die „afterinteractive“-Strategie eignet sich für ein Analytics-Skript. Dies bedeutet, dass es geladen wird, nachdem die Seite interaktiv ist.
importieren Skript aus "weiter/Skript"
<Skript src="" Strategie="nachInteraktiv" />
Öffne das Seiten/_app.js Datei und importieren Sie die Skriptkomponente oben.
importieren Skript aus 'weiter/Skript'
Ändern Sie als Nächstes die return-Anweisung der App-Komponente so, dass sie das script-Tag von Google Analytics enthält.
importieren '../styles/globals.css'
importieren Layout aus '../Komponenten/Layout/Layout'
importieren Skript aus 'weiter/Skript'FunktionMeine App({ Komponente, pageProps }) {
zurückkehren (
<>
<Skriptstrategie="nachInteraktiv" Quelle="https://www.googletagmanager.com/gtag/js? id=G-XXXXXXX"/>
<Skript
id='Google Analytics'
Strategie="nachInteraktiv"
gefährlichSetInnerHTML={{
__html: `
Fenster.dataLayer = Fenster.dataLayer || [];
FunktionTag(){dataLayer.push(Argumente);}
gtag('js', neuDatum());
Tag('Konfig', 'G-XXXXXXX', {
Seitenpfad: Fenster.Standort.Pfadname,
});
`,
}}
/>
<Layout>
<Komponente {...pageProps} />
</Layout>
</>
)
}
ExportStandard Meine App
Beachten Sie, dass sich dieses Tag geringfügig von dem von Google Analytics unterscheidet. Es verwendet DangerlySetInnerHTML und enthält eine Ladestrategie. Sie funktionieren jedoch gleich.
Denken Sie daran, G-XXXXXXX durch Ihren Tracking-Code zu ersetzen. Es ist auch ratsam, den Tracking-Code in einer .env-Datei zu speichern, um ihn geheim zu halten.
Hinzufügen von Google Analytics zu einer Einzelseitenanwendung
Sie können das obige Skript-Tag für eine normale Website verwenden und es dabei belassen. Für eine Single-Page-Anwendung wie eine Next.js-Website müssen Sie jedoch einige zusätzliche Schritte ausführen.
A einseitige Bewerbung (SPA) ist eine Website, die alle Inhalte im Voraus als Antwort auf eine erste Anfrage lädt. Der Browser lädt Inhalte dynamisch, wenn ein Benutzer auf Links klickt, um auf der Website zu navigieren. Es wird keine Seitenanforderung gestellt, nur die URL ändert sich.
Dies ist bei Next.js-Seiten anders, die getServerSideProps verwenden, da der Browser diese auf Anfrage rendert.
Das Google-Tag funktioniert, indem es einen Seitenaufruf aufzeichnet, wenn eine neue Seite geladen wird. Für SPAs wird das Google-Tag also nur einmal ausgeführt, wenn die Seite zum ersten Mal geladen wird. Daher müssen Sie die Ansichten manuell aufzeichnen, wenn der Benutzer zu verschiedenen Seiten navigiert.
Siehe Einzelseitenmessung Google Analytics-Leitfaden um mehr zu lernen.
Um Seitenansichten in Next.js mithilfe des gtag-Skripts manuell aufzuzeichnen, erstellen Sie einen neuen Ordner mit dem Namenlib und füge eine neue Datei hinzu, gtag.js.
Exportkonst GA_MEASUREMENT_ID = Prozess.env. GA_MEASUREMENT_ID;Exportkonst Seitenaufruf = () => {
Fenster.gtag("Konfig", GA_MEASUREMENT_ID, {
Seitenpfad: URL,
});
};
Exportkonst event = ({ Aktion, Kategorie, Label, Wert }) => {
Fenster.gtag("Fall", Aktion, {
event_category: Kategorie,
event_label: Bezeichnung,
Wert,
});
};
Ändern Sie als Nächstes /pages/_app.js, um diese Funktionen zu verwenden und Seitenaufrufe im useEffect-Hook zu verfolgen.
importieren '../styles/globals.css'
importieren Layout aus '../Komponenten/Layout/Layout'
importieren Skript aus 'weiter/Skript'
importieren {useRouter} aus 'weiter/router';
importieren { useEffect } aus "reagieren";
importieren * als Tag aus "../lib/gtag"FunktionMeine App({ Komponente, pageProps }: AppProps) {
konst router = useRouter();useEffect(() => {
konst handleRouteChange = (url) => {
Tag.Seitenansicht(URL);
};router.events.on("routeChangeComplete", handleRouteChange);
zurückkehren () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.ereignisse]);
zurückkehren (
<>
<Skriptstrategie="nachInteraktiv" Quelle="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Skript
id='Google Analytics'
Strategie="nachInteraktiv"
gefährlichSetInnerHTML={{
__html: `
Fenster.dataLayer = Fenster.dataLayer || [];
FunktionTag(){dataLayer.push(Argumente);}
gtag('js', neuDatum());
Tag('Konfig', 'G-XXXXXX', {
Seitenpfad: Fenster.Standort.Pfadname,
});
`,
}}
/>
<Layout>
<Komponente {...pageProps} />
</Layout>
</>
)
}
ExportStandard Meine App
Dieses Beispiel verwendet die Hooks useRouter und useEffect, um jedes Mal, wenn der Benutzer zu einer anderen Seite navigiert, einen Seitenaufruf aufzuzeichnen.
Rufen Sie die useRouter-Methode von next/router auf und weisen Sie sie der Router-Variablen zu. Hören Sie im useEffect-Hook auf das routeChangeComplete-Ereignis auf dem Router. Wenn das Ereignis ausgelöst wird, zeichnen Sie einen Seitenaufruf auf, indem Sie die Funktion handleRouteChange aufrufen.
Die return-Anweisung des useEffect-Hooks beendet das Abonnement des routeChangeComplete-Ereignisses mit der Methode „off“.
Verwenden Sie Google Analytics, um Benutzerdaten zu sammeln
Daten sind enorm hilfreich, um gute Entscheidungen zu treffen, und das Hinzufügen von Google Analytics zu Ihrer Website ist eine Möglichkeit, sie zu sammeln.
Sie können Google Analytics mithilfe von Hooks zu einem Next.js-Projekt hinzufügen, um sicherzustellen, dass Sie alle Seitenaufrufe aufzeichnen, selbst wenn eine Seite clientseitiges Routing verwendet. Jetzt können Sie in Ihrem Google Analytics-Dashboard sehen, wie viele Aufrufe Ihre Website erhält.