Google Analytics Next.js Kurulumu

Bugün saat 08:37 OP

Konuyu Açan #0

Next.js projelerinde Google Analytics'i kullanmak, kullanıcı etkileşimlerini izlemek ve web sitenizin performansını analiz etmek için oldukça önemlidir. Bu kılavuzda, Google Analytics'in Next.js ile nasıl entegre edileceğini adım adım açıklayacağım.

İlk olarak, Google Analytics hesabınızı oluşturmalısınız. Google Analytics'e kaydolduktan sonra, yeni bir mülk oluşturun ve bu mülk için bir izleme kodu alın. İzleme kodu genellikle şu şekilde görünür: UA-XXXXXXXXX-X. Bu kod, projenizdeki kullanıcı verilerini toplamak için gereklidir.

Next.js projenizde Google Analytics'i kurmak için iki ana yöntem bulunmaktadır: next/script bileşenini kullanarak veya özel bir React bileşeni oluşturarak. İkinci yöntem daha esnek olduğu için burada onu ele alacağız.

Gerekli Paketleri Yükleme: Öncelikle, npm veya yarn kullanarak gerekli bağımlılıkları yükleyin. Google Analytics'i izlemek için react-ga kütüphanesini kullanacağız.

CODE

1   npm install react-ga

Google Analytics Bileşeni Oluşturma: Projenizin kök dizininde lib adında bir klasör oluşturun ve gtag.js adında bir dosya oluşturun. Bu dosya, Google Analytics'i başlatmak için gerekli kodu içerecek.

CODE

123456789   // lib/gtag.js
   export const GA_TRACKING_ID = 'UA-XXXXXXXXX-X'; // İzleme kodunuzu buraya ekleyin

   // Sayfa görüntüleme izleme
   export const pageview = (url) => {
       window.gtag('config', GA_TRACKING_ID, {
           page_path: url,
       });
   };

_app.js Dosyasını Güncelleme: Next.js uygulamanızın _app.js dosyasını güncelleyerek, sayfa geçişlerinde izleme yapılmasını sağlayabilirsiniz.

CODE

12345678910111213141516171819202122   // pages/_app.js
   import { useEffect } from 'react';
   import { useRouter } from 'next/router';
   import * as gtag from '../lib/gtag';

   function MyApp({ Component, pageProps }) {
       const router = useRouter();

       useEffect(() => {
           const handleRouteChange = (url) => {
               gtag.pageview(url);
           };
           router.events.on('routeChangeComplete', handleRouteChange);
           return () => {
               router.events.off('routeChangeComplete', handleRouteChange);
           };
       }, [router.events]);

       return <Component {...pageProps} />;
   }

   export default MyApp;

Google Analytics Scripti Ekleme: pages/_document.js dosyasını oluşturarak Google Analytics scriptini ekleyin.

CODE

12345678910111213141516171819202122232425262728293031323334   // pages/_document.js
   import Document, { Html, Head, Main, NextScript } from 'next/document';
   import { GA_TRACKING_ID } from '../lib/gtag';

   class MyDocument extends Document {
       render() {
           return (
               <Html>
                   <Head>
                       {/* Google Analytics */}
                       <script async src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`} />
                       <script
                           dangerouslySetInnerHTML={{
                               __html: `
                               window.dataLayer = window.dataLayer || [];
                               function gtag(){dataLayer.push(arguments);}
                               gtag('js', new Date());
                               gtag('config', '${GA_TRACKING_ID}', {
                                   page_path: window.location.pathname,
                               });
                           `,
                           }}
                       />
                   </Head>
                   <body>
                       <Main />
                       <NextScript />
                   </body>
               </Html>
           );
       }
   }

   export default MyDocument;

Bu adımları tamamladıktan sonra, Google Analytics'iniz Next.js projenizle entegre olmuş olacaktır. Artık kullanıcı etkileşimlerini izlemeye başlayabilir ve web sitenizin performansını analiz edebilirsiniz. Next.js projelerinde Google Analytics kullanmanın avantajları ve karşılaşabileceğiniz zorluklar hakkında daha fazla bilgi almak isterseniz, deneyimlerinizi ve görüşlerinizi paylaşabilirsiniz.

Benzer konular

İçeriği Şikayet Et