Analiza danych jest koniecznością, jeśli chcesz śledzić liczbę odwiedzających Twoją witrynę. Istnieją różne sposoby dodawania danych analitycznych do projektu, w tym Google Analytics. Jest to bezpłatna usługa i jest stosunkowo prosta w konfiguracji.
Dowiedz się, jak dodać Google Analytics do swojej witryny za pomocą Next.js, frameworka React do tworzenia witryn przyjaznych dla SEO.
Konfigurowanie Google Analytics
Google Analytics zapewnia wgląd w zachowanie osób odwiedzających Twoją witrynę. Informuje, które strony uzyskują liczbę wyświetleń i podaje dane odbiorców, takie jak lokalizacja, wiek, zainteresowania i używane przez nich urządzenia. Te dane mogą pomóc w podjęciu decyzji o kierunku, w którym Twoja firma powinna podążać, aby odnieść sukces.
Aby rozpocząć, odwiedź stronę panel analityczny i utwórz nowe konto, wykonując następujące czynności:
- Kliknij Utwórz konto przycisk na karcie administratora, aby utworzyć nowe konto.
- Dodaj nazwę konta w sekcji Konfiguracja konta.
- Utwórz właściwość analityczną, podając nazwę.
- Dodaj szczegóły firmy. Wybierz opcje, które dotyczą Twojej witryny.
- Kliknij Tworzyć przycisk, aby zakończyć konfigurowanie właściwości.
- Kliknij strumień internetowy, aby określić strumień danych, który ma śledzić Google Analytics.
- Podaj adres URL swojej witryny i nadaj nazwę strumieniowi danych.
- Kliknij instrukcje tagowania i pobierz skrypt, którego będziesz używać w swojej witrynie.
- Skopiuj identyfikator pomiaru (kod śledzenia), aby użyć go później.
Po otrzymaniu kodu śledzenia możesz skonfigurować projekt Next.js.
Konfigurowanie projektu Next.js
Jeśli nie masz jeszcze skonfigurowanego projektu Next.js, zobacz Oficjalny przewodnik Next.js rozpocząć.
Podczas tworzenia właściwości globalnego tagu witryny uzyskano taki skrypt:
<!-- Tag Google (gtag.js) -->
<skrypt asynchroniczny src="https://www.googletagmanager.com/gtag/js? identyfikator=G-XXXXXXX"></script>
<scenariusz>
okno.dataLayer = okno.dataLayer || [];
funkcjonowaćgtag(){dataLayer.push(argumenty);}
gtag('js', nowyData());
gtag('konfiguracja', 'G-NHVWK8L97D');
</script>
Musisz dodać ten skrypt do tagu head swojej witryny. W Next.js używasz komponentu Script z next/script. Ten komponent jest rozszerzeniem znacznika skryptu HTML. Pozwala dołączyć skrypty innych firm do Twojej witryny Next.js i ustawić ich strategię ładowania, poprawiając wydajność.
The Skrypt Next.js komponent oferuje różne strategie ładowania. Strategia „afterinteractive” jest odpowiednia dla skryptu analitycznego. Oznacza to, że załaduje się po tym, jak strona stanie się interaktywna.
import Scenariusz z „następny/skrypt”
<Źródło skryptu="" strategia="poInteraktywny" />
Otworzyć pages/_app.js plik i zaimportuj komponent Script u góry.
import Scenariusz z „następny/skrypt”
Następnie zmodyfikuj instrukcję return komponentu App, tak aby zawierała tag script z Google Analytics.
import '../styles/globals.css'
import Układ z „../komponenty/Układ/Układ”
import Scenariusz z „następny/skrypt”funkcjonowaćMojaAplikacja({ Komponent, pageProps }) {
powrót (
<>
<Strategia skryptu="poInteraktywny" źródło="https://www.googletagmanager.com/gtag/js? identyfikator=G-XXXXXXX"/>
<Scenariusz
identyfikator='Google Analytics'
strategia="poInteraktywny"
niebezpiecznieSetInnerHTML={{
__html: `
okno.dataLayer = okno.dataLayer || [];
funkcjonowaćgtag(){dataLayer.push(argumenty);}
gtag('js', nowyData());
gtag('konfiguracja', 'G-XXXXXXX', {
ścieżka_strony: okno.Lokalizacja.nazwa ścieżki,
});
`,
}}
/>
<Układ>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportdomyślny MojaAplikacja
Pamiętaj, że ten tag różni się nieco od tagu udostępnianego przez Google Analytics. Wykorzystuje niebezpiecznieSetInnerHTML i zawiera strategię ładowania. Działają jednak tak samo.
Pamiętaj, aby zastąpić G-XXXXXXX kodem śledzenia. Zaleca się również przechowywanie kodu śledzenia w pliku .env, aby zachować go w tajemnicy.
Dodanie Google Analytics do aplikacji jednostronicowej
Możesz użyć powyższego tagu skryptu dla zwykłej strony internetowej i tak to zostawić. Jednak w przypadku aplikacji jednostronicowej, takiej jak witryna internetowa Next.js, należy wykonać kilka dodatkowych kroków.
A aplikacja jednostronicowa (SPA) to strona internetowa, która ładuje całą zawartość z góry, w odpowiedzi na wstępne żądanie. Przeglądarka ładuje zawartość dynamicznie, gdy użytkownik klika łącza, aby poruszać się po witrynie. Nie wysyła żądania strony, zmienia się tylko adres URL.
Inaczej jest w przypadku stron Next.js, które używają getServerSideProps, ponieważ przeglądarka renderuje je na żądanie.
Tag Google działa poprzez rejestrowanie wyświetlenia strony podczas ładowania nowej strony. Tak więc w przypadku SPA tag Google jest wykonywany tylko raz, podczas pierwszego ładowania strony. Dlatego musisz ręcznie rejestrować wyświetlenia, gdy użytkownik przechodzi do różnych stron.
Zobacz pomiar jednej strony Przewodnik po Google Analytics uczyć się więcej.
Aby ręcznie rejestrować wyświetlenia strony w Next.js za pomocą skryptu gtag, utwórz nowy folder o nazwielib i dodaj nowy plik, gtag.js.
eksportkonst GA_MEASUREMENT_ID = proces.env. GA_MEASUREMENT_ID;eksportkonst odsłona = () => {
okno.gtag("konfiguracja", GA_MEASUREMENT_ID, {
ścieżka_strony: adres URL,
});
};
eksportkonst zdarzenie = ({ akcja, kategoria, etykieta, wartość }) => {
okno.gtag("wydarzenie", działanie, {
kategoria_zdarzeń: kategoria,
etykieta_zdarzenia: etykieta,
wartość,
});
};
Następnie zmodyfikuj plik /pages/_app.js, aby używać tych funkcji i śledzić wyświetlenia strony w haku useEffect.
import '../styles/globals.css'
import Układ z „../komponenty/Układ/Układ”
import Scenariusz z „następny/skrypt”
import { useRouter } z „następny/router”;
import {efekt użycia} z "reagować";
import * Jak gtag z "../lib/gtag"funkcjonowaćMojaAplikacja({ Komponent, pageProps }: AppProps) {
konst router = użyj routera ();użyjEfektu(() => {
konst handleRouteChange = (url) => {
gtag.widok strony(adres URL);
};router.zdarzenia.wł.("trasaChangeComplete", uchwyt zmiany trasy);
powrót () => {
router.zdarzenia.wył.("trasaChangeComplete", uchwyt zmiany trasy);
};
}, [zdarzenia.routera]);
powrót (
<>
<Strategia skryptu="poInteraktywny" źródło="https://www.googletagmanager.com/gtag/js? identyfikator=G-XXXXXX"></Script>
<Scenariusz
identyfikator='Google Analytics'
strategia="poInteraktywny"
niebezpiecznieSetInnerHTML={{
__html: `
okno.dataLayer = okno.dataLayer || [];
funkcjonowaćgtag(){dataLayer.push(argumenty);}
gtag('js', nowyData());
gtag('konfiguracja', 'G-XXXXXX', {
ścieżka_strony: okno.Lokalizacja.nazwa ścieżki,
});
`,
}}
/>
<Układ>
<Komponent {...pageProps} />
</Layout>
</>
)
}
eksportdomyślny MojaAplikacja
W tym przykładzie użyto haków useRouter i useEffect do rejestrowania wyświetlenia strony za każdym razem, gdy użytkownik przechodzi na inną stronę.
Wywołaj metodę useRouter z next/router i przypisz ją do zmiennej routera. W haku useEffect odsłuchaj zdarzenie routeChangeComplete na routerze. Po uruchomieniu zdarzenia zarejestruj odsłonę strony, wywołując funkcję handleRouteChange.
Instrukcja return haka useEffect anuluje subskrypcję zdarzenia routeChangeComplete za pomocą metody „off”.
Użyj Google Analytics do zbierania danych użytkownika
Dane są niezwykle przydatne przy podejmowaniu dobrych decyzji, a dodanie Google Analytics do witryny to jeden ze sposobów ich gromadzenia.
Możesz dodać Google Analytics do projektu Next.js za pomocą haków, aby mieć pewność, że rejestrujesz wszystkie wyświetlenia strony, nawet jeśli strona korzysta z routingu po stronie klienta. Teraz możesz zobaczyć, ile wyświetleń uzyskuje Twoja witryna na pulpicie nawigacyjnym Google Analytics.
