Web sitenizin aldığı ziyaretçi sayısını takip etmek istiyorsanız veri analizi şarttır. Google Analytics dahil, projenize analitik eklemenin farklı yolları vardır. Ücretsiz bir hizmettir ve kurulumu nispeten kolaydır.
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 Kurulumu
Google Analytics içgörü sağlar web sitenizi ziyaret eden kişilerin davranışlarına. Size hangi sayfaların daha fazla görüntülendiğini söyler ve size konum, yaş, ilgi alanları ve kullandıkları cihaz gibi hedef kitle verilerini verir. Bu veriler, işletmenizin başarılı olması için izlemesi gereken yön hakkında kararlar almanıza yardımcı olabilir.
Başlamak için şu adresi ziyaret edin: analitik kontrol paneli ve aşağıdaki adımları izleyerek yeni bir hesap oluşturun:
- Tıkla Hesap oluşturmak Yeni bir hesap oluşturmak için yönetici sekmesindeki düğme.
- Hesap kurulumu bölümü altında bir hesap adı ekleyin.
- Bir ad sağlayarak analytics özelliğini oluşturun.
- İşletme ayrıntılarını ekleyin. Web siteniz için geçerli olan seçenekleri belirleyin.
- Tıkla Yaratmak özelliğin kurulumunu bitirmek için düğmesine bası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.
- Daha sonra kullanmak üzere ölçüm kimliğini (izleme kodu) kopyalayın.
İzleme kodunu aldıktan sonra Next.js projesini kurabilirsiniz.
Next.js Projesini Kurma
Halihazırda bir Next.js projeniz yoksa bkz. Next.js resmi kılavuzu başlamak.
Global site etiketi özelliğini oluşturduğunuzda, şöyle bir komut dosyanız olur:
<!-- Google etiketi (gtag.js) -->
<komut dosyası uyumsuz src="https://www.googletagmanager.com/gtag/js? kimlik=G-XXXXXXX"></script>
<senaryo>
pencere.dataLayer = pencere.dataLayer || [];
işlevetiket(){dataLayer.push(argümanlar);}
gtag('js', yeniTarih());
etiket('yapılandırma', 'G-NHVWK8L97D');
</script>
Bu betiği web sitenizin head etiketine eklemeniz gerekir. Next.js'de, next/script'ten Komut Dosyası bileşenini kullanırsınız. Bu bileşen, HTML betik 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.
bu Next.js Komut Dosyası bileşen, farklı yükleme stratejileri sunar. "Afterinteractive" stratejisi, bir analitik betiği için uygundur. Bu, sayfa etkileşimli hale geldikten sonra yükleneceği anlamına gelir.
içe aktarmak Senaryo itibaren "sonraki/komut dosyası"
<Komut dosyası kaynağı="" strateji="sonraEtkileşimli" />
Aç sayfalar/_app.js dosyasını açın ve en üstteki Komut Dosyası bileşenini içe aktarın.
içe aktarmak Senaryo itibaren "sonraki/komut dosyası"
Ardından, Uygulama bileşeninin dönüş ifadesini Google analytics'ten komut dosyası etiketini içerecek şekilde değiştirin.
içe aktarmak '../styles/globals.css'
içe aktarmak Düzen itibaren '../bileşenler/Düzen/Düzen'
içe aktarmak Senaryo itibaren "sonraki/komut dosyası"işlevUygulamam({ Bileşen, pageProps }) {
geri dönmek (
<>
<Komut dosyası stratejisi="sonraEtkileşimli" kaynak="https://www.googletagmanager.com/gtag/js? kimlik=G-XXXXXXX"/>
<Senaryo
kimlik='google-analitik'
strateji="sonraEtkileşimli"
tehlikeli şekildeSetInnerHTML={{
__html: `
pencere.dataLayer = pencere.dataLayer || [];
işlevetiket(){dataLayer.push(argümanlar);}
gtag('js', yeniTarih());
etiket('yapılandırma', 'G-XXXXXXX', {
sayfa_yolu: pencere.konum.yol adı,
});
`,
}}
/>
<Düzen>
<Bileşen {...pageProps} />
</Layout>
</>
)
}
ihracatvarsayılan Uygulamam
Bu etiketin, Google Analytics'in sağladığından biraz farklı olduğunu unutmayın. Tehlikeli SetInnerHTML 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 kalması için izleme kodunun bir .env dosyasında saklanması da önerilir.
Google Analytics'i Tek Sayfa Uygulamasına Ekleme
Normal bir web sitesi için yukarıdaki script etiketini kullanabilir ve öylece bırakabilirsiniz. Ancak Next.js web sitesi gibi tek sayfalık bir uygulama için fazladan birkaç adım atmanız gerekir.
A tek sayfalık uygulama (SPA), ilk talebe yanıt olarak tüm içeriği önceden yükleyen bir web sitesidir. Bir kullanıcı sitede gezinmek için bağlantıları tıkladığında 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üntülemesini kaydederek çalışır. Bu nedenle, SPA'lar için, Google etiketi yalnızca bir kez, sayfa ilk yüklendiğinde yürütülür. Bu nedenle, kullanıcı farklı sayfalarda gezinirken görünümleri manuel olarak kaydetmeniz gerekir.
Tek sayfalık ölçüme bakın Google Analytics kılavuzu daha fazla öğrenmek için.
Sayfa görünümlerini gtag betiğini kullanarak Next.js'de manuel olarak kaydetmek için adında yeni bir klasör oluşturun.lib ve yeni bir dosya ekleyin, gtag.js.
ihracatsabit GA_MEASUREMENT_ID = işlem.env. GA_MEASUREMENT_ID;ihracatsabit sayfa görüntüleme = () => {
pencere.gtag("yapılandırma", GA_MEASUREMENT_ID, {
sayfa_yolu: url,
});
};
ihracatsabit olay = ({ eylem, kategori, etiket, değer }) => {
pencere.gtag("etkinlik", aksiyon, {
event_category: kategori,
event_label: etiket,
değer,
});
};
Ardından, bu işlevleri kullanmak ve sayfa görünümlerini useEffect kancasında izlemek için /pages/_app.js dosyasını değiştirin.
içe aktarmak '../styles/globals.css'
içe aktarmak Düzen itibaren '../bileşenler/Düzen/Düzen'
içe aktarmak Senaryo itibaren "sonraki/komut dosyası"
içe aktarmak {Yönlendiriciyi kullan} itibaren 'sonraki/yönlendirici';
içe aktarmak { useEffect } itibaren "tepki";
içe aktarmak * gibi etiket itibaren "../lib/gtag"işlevUygulamam({ Bileşen, pageProps }: AppProps) {
sabit yönlendirici = useRouter();useEffect(() => {
sabit handleRouteChange = (url) => {
etiket.sayfa görünümü(url);
};yönlendirici.events.on("rotaDeğişikliğiTamamlandı", handleRouteChange);
geri dönmek () => {
yönlendirici.events.off("rotaDeğişikliğiTamamlandı", handleRouteChange);
};
}, [yönlendirici.olaylar]);
geri dönmek (
<>
<Komut dosyası stratejisi="sonraEtkileşimli" kaynak="https://www.googletagmanager.com/gtag/js? kimlik=G-XXXXXX"></Script>
<Senaryo
kimlik='google-analitik'
strateji="sonraEtkileşimli"
tehlikeli şekildeSetInnerHTML={{
__html: `
pencere.dataLayer = pencere.dataLayer || [];
işlevetiket(){dataLayer.push(argümanlar);}
gtag('js', yeniTarih());
etiket('yapılandırma', 'G-XXXXXX', {
sayfa_yolu: pencere.konum.yol adı,
});
`,
}}
/>
<Düzen>
<Bileşen {...pageProps} />
</Layout>
</>
)
}
ihracatvarsayılan Uygulamam
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 useRouter yöntemini çağırın ve onu yönlendirici değişkenine atayın. useEffect kancasında, yönlendiricideki routeChangeComplete olayını dinleyin. Olay tetiklendiğinde, handleRouteChange işlevini çağırarak bir sayfa görünümü kaydedin.
useEffect kancasının dönüş ifadesi, 'off' yöntemiyle routeChangeComplete olayından ayrılır.
Kullanıcı Verilerini Toplamak için Google Analytics'i Kullanın
Veriler, iyi kararlar almak için son derece faydalıdır ve web sitenize Google Analytics eklemek, onu toplamanın bir yoludur.
Bir sayfa istemci tarafı yönlendirme kullandığında bile tüm sayfa görüntülemelerini kaydettiğinizden emin olmak için kancaları kullanarak Google Analytics'i bir Next.js projesine ekleyebilirsiniz. Artık sitenizin kaç kez görüntülendiğini Google Analytics kontrol panelinizde görebilirsiniz.