Google analytics, web siteniz için size kapsamlı istatistikler sağlayan harika bir açılır çözümdür. Bir Next.js sitesiyle nasıl kullanılacağını öğrenin.
Web sitenizin aldığı ziyaretçi sayısını takip etmek istiyorsanız, veri analizi bir zorunluluktur. Google Analytics dahil olmak üzere projenize analiz eklemenin farklı yolları vardır. Ücretsiz bir hizmettir ve kurulumu nispeten basittir.
SEO dostu web siteleri oluşturmak için bir React çerçevesi olan Next.js’yi kullanarak Google Analytics’i sitenize nasıl ekleyeceğinizi öğrenin.
Google Analytics’i Ayarlama
Google Analytics, web sitenizi ziyaret eden kişilerin davranışları hakkında bilgi sağlar. Hangi sayfaların görüntülenme sayısını aldığını söyler ve konum, yaş, ilgi alanı ve kullandıkları cihaz gibi hedef kitle verilerini verir. Bu veriler, işletmenizin başarılı olması için atması gereken yön hakkında kararlar almanıza yardımcı olabilir.
Başlamak için analiz panosunu ziyaret edin ve aşağıdaki adımları izleyerek yeni bir hesap oluşturun:
- Yeni bir hesap oluşturmak için yönetici sekmesindeki Hesap Oluştur düğmesini tıklayın .
- Hesap kurulumu bölümünün altına bir hesap adı ekleyin.
- Bir ad sağlayarak analitik özelliğini oluşturun.
- İşletme ayrıntılarını ekleyin. Web siteniz için geçerli olan seçenekleri seçin.
- Mülkün kurulumunu tamamlamak için Oluştur düğmesini tıklayın .
- Google Analytics’in izlemesi gereken veri akışını belirtmek için web akışını tıklayın.
- Web sitenizin URL’sini belirtin ve veri akışına bir ad verin.
- Etiketleme talimatlarına tıklayın ve web sitenizde kullanacağınız komut dosyasını alın.
- Etiketleme talimatları
- Daha sonra kullanmak üzere ölçüm kimliğini (izleme kodu) kopyalayın.
- Google analytics ölçüm kimliği
- İzleme kodunu aldıktan sonra Next.js projesini kurabilirsiniz.
Next.js Projesini Kurma
Henüz bir Next.js projeniz yoksa, başlamak için Next.js resmi kılavuzuna bakın .
Global site etiketi özelliğini oluşturduğunuzda, şöyle bir komut dosyası elde edersiniz:
<!– Google tag (gtag.js) –>
<script async src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX”></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-NHVWK8L97D’);
</script>
Bu betiği web sitenizin head etiketine eklemeniz gerekiyor. Next.js’de next/script’ten Script bileşenini kullanırsınız. Bu bileşen, HTML komut dosyası etiketinin bir uzantısıdır. Next.js web sitenize üçüncü taraf komut dosyaları eklemenize ve yükleme stratejilerini belirleyerek performansı artırmanıza olanak tanır.
Next.js Komut Dosyası bileşeni, farklı yükleme stratejileri sunar. “Sonraki etkileşimli” strateji, bir analitik komut dosyası için uygundur. Bu, sayfa etkileşimli olduktan sonra yükleneceği anlamına gelir.
import Script from “next/script”
<Script src=”” strategy=”afterInteractive” />
Pages/_app.js dosyasını açın ve en üstteki Komut Dosyası bileşenini içe aktarın.
import Script from ‘next/script’
Ardından, Google analytics’ten komut dosyası etiketini eklemek için Uygulama bileşeninin return ifadesini değiştirin.
import ‘../styles/globals.css’
import Layout from ‘../components/Layout/Layout’
import Script from ‘next/script’
function MyApp({ Component, pageProps }) {
return (
<>
<Script strategy=”afterInteractive” src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX”/>
<Script
id=’google-analytics’
strategy=”afterInteractive”
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-XXXXXXX’, {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {…pageProps} />
</Layout>
</>
)
}
export default MyApp
Bu etiketin, Google Analytics’in sağladığı etiketten biraz farklı olduğunu unutmayın. TehlikeliSetInnerHTML kullanır ve bir yükleme stratejisi içerir. Ancak aynı şekilde çalışırlar.
G-XXXXXXX’i izleme kodunuzla değiştirmeyi unutmayın. Gizli tutmak için izleme kodunu bir .env dosyasında saklamanız da önerilir.
Google Analytics’i Tek Sayfalı Bir Uygulamaya Ekleme
Normal bir web sitesi için yukarıdaki komut dosyası etiketini kullanabilir ve bu şekilde bırakabilirsiniz. Ancak, Next.js web sitesi gibi tek sayfalık bir uygulama için birkaç ekstra adım atmanız gerekir.
Tek sayfalık bir uygulama (SPA), bir ilk isteğe yanıt olarak tüm içeriği önceden yükleyen bir web sitesidir. Kullanıcı sitede gezinmek için bağlantıları tıkladıkça, tarayıcı içeriği dinamik olarak yükler. Sayfa isteği yapmaz, sadece URL değişir.
Bu, tarayıcı istek üzerine bunları işlerken getServerSideProps kullanan Next.js sayfaları için farklıdır.
Google etiketi, yeni bir sayfa yüklendiğinde bir sayfa görünümü kaydederek çalışır. Bu nedenle, SPA’lar için Google etiketi, sayfa ilk yüklendiğinde yalnızca bir kez yürütülür. Bu nedenle, kullanıcı farklı sayfalara giderken görünümleri manuel olarak kaydetmelisiniz.
Daha fazla bilgi için tek sayfalık ölçüm Google Analytics kılavuzuna bakın .
Next.js’de gtag komut dosyasını kullanarak sayfa görünümlerini manuel olarak kaydetmek için lib adlı yeni bir klasör oluşturun ve gtag.js adlı yeni bir dosya ekleyin .
export const GA_MEASUREMENT_ID = process.env.GA_MEASUREMENT_ID;
export const pageview = () => {
window.gtag(“config”, GA_MEASUREMENT_ID, {
page_path: url,
});
};
export const event = ({ action, category, label, value }) => {
window.gtag(“event”, action, {
event_category: category,
event_label: label,
value,
});
};
Ardından, bu işlevleri kullanmak ve useEffect kancasındaki sayfa görünümlerini izlemek için /pages/_app.js öğesini değiştirin.
import ‘../styles/globals.css’
import Layout from ‘../components/Layout/Layout’
import Script from ‘next/script’
import { useRouter } from ‘next/router’;
import { useEffect } from “react”;
import * as gtag from “../lib/gtag”
function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url);
};
router.events.on(“routeChangeComplete”, handleRouteChange);
return () => {
router.events.off(“routeChangeComplete”, handleRouteChange);
};
}, [router.events]);
return (
<>
<Script strategy=”afterInteractive” src=”https://www.googletagmanager.com/gtag/js?id=G-XXXXXX”></Script>
<Script
id=’google-analytics’
strategy=”afterInteractive”
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag(‘js’, new Date());
gtag(‘config’, ‘G-XXXXXX’, {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {…pageProps} />
</Layout>
</>
)
}
export default MyApp
Bu örnek, kullanıcı başka bir sayfaya her gittiğinde bir sayfa görünümünü kaydetmek için useRouter ve useEffect kancalarını kullanır.
next/router’dan userRouter yöntemini çağırın ve bunu router değişkenine atayın. useEffect kancasında, yönlendiricideki routeChangeComplete olayını dinleyin. Olay başladığında, handleRouteChange işlevini çağırarak bir sayfa görünümü kaydedin.
useEffect kancasının dönüş ifadesi, ‘off’ yöntemiyle routeChangeComplete olayının aboneliğinden çıkar.
Kullanıcı Verilerini Toplamak için Google Analytics’i Kullanın
Veriler, iyi kararlar vermek için son derece faydalıdır ve Google Analytics’i web sitenize eklemek, verileri toplamanın bir yoludur.
Bir sayfa istemci tarafı yönlendirme kullandığında bile tüm sayfa görüntülemelerini kaydetmenizi sağlamak için Google Analytics’i bir Next.js projesine kancalar kullanarak ekleyebilirsiniz. Artık sitenizin kaç kez görüntülendiğini Google Analytics gösterge tablonuzda görebilirsiniz.