nextjs google analytics

ملحوظة

قد لا تحتاج إلى هذه الحزمة. يرجى التحقق من مكتبات الطرف الثالث أولاً.

NextJS Google Analytics

تحليلات Google لـ Next.js

تعمل هذه الحزمة على تحسين تحميل البرنامج النصي باستخدام علامة Script Next.js ، مما يعني أنه سيعمل فقط على التطبيقات باستخدام Next.js> = 11.0.0 .

تثبيت

 npm install --save nextjs-google-analytics

TL ؛ د

أضف مكون GoogleAnalytics مع تعيين true trackPageViews إلى ملف التطبيق المخصص الخاص بك:

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

يمكنك تمرير معرف قياس Google Analytics الخاص بك عن طريق تعيينه على متغير البيئة NEXT_PUBLIC_GA_MEASUREMENT_ID أو باستخدام prop gaMeasurementId على مكون GoogleAnalytics . سيقوم متغير البيئة بتجاوز الدعامة إذا تم تعيين كلاهما .

الاستخدام

يتم قراءة معرف قياس Google Analytics الخاص بك من NEXT_PUBLIC_GA_MEASUREMENT_ID المتغير ، لذلك تأكد من تعيينه في بيئة الإنتاج الخاصة بك:

• Vercel
• NetLify

إذا لم يتم تعيين المتغير أو فارغ ، فلن يتم تحميل أي شيء ، مما يجعل من الآمن العمل في التطوير.

لتحميله واختباره على التطوير ، أضف:

 NEXT_PUBLIC_GA_MEASUREMENT_ID="G-XXXXXXXXXX"

إلى ملف .env.local الخاص بك.

كبديل ، يمكنك استخدام param gaMeasurementId لتمرير معرف قياس Google Analytics الخاص بك.

سيؤدي متغير البيئة NEXT_PUBLIC_GA_MEASUREMENT_ID إلى الأسبقية على param gaMeasurementId ، لذلك إذا تم تعيين كلاهما بقيم مختلفة ، فإن متغير البيئة سيتجاوز المعلمة.

البرامج النصية

استخدم مكون GoogleAnalytics لتحميل البرامج النصية GTAG. يمكنك إضافته إلى مكون تطبيق مخصص وسيهتم هذا بما في ذلك البرامج النصية اللازمة لكل صفحة (أو يمكنك إضافتها على أساس كل صفحة إذا كنت بحاجة إلى مزيد من التحكم):

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

بشكل افتراضي ، يتم تحميل البرامج النصية باستخدام الاستراتيجية afterInteractive ، مما يعني حقنها على جانب العميل وستتم تشغيلها بعد الترطيب.

إذا كنت بحاجة إلى مزيد من التحكم ، فإن المكون يعرض استراتيجية الدعامة للتحكم في كيفية تحميل البرامج النصية:

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics strategy = "lazyOnload" />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

أيضًا ، يمكنك استخدام بديل للمسار الافتراضي لنص Googletagmanager بواسطة

 < GoogleAnalytics gtagUrl = "/gtag.js" /> 

طرق عرض الصفحة

لتتبع طرق عرض الصفحة ، قم بتعيين trackPageViews لمكون GoogleAnalytics إلى True.

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

بشكل افتراضي ، سيتم تشغيله على تغييرات التجزئة إذا تم تمكين trackPageViews ، ولكن يمكنك تجاهل تغييرات التجزئة من خلال توفير كائن إلى Propeviews trackPageViews :

 // pages/_app.js
import { GoogleAnalytics } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics trackPageViews = { { ignoreHashChange : true } } />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

كبديل ، يمكنك استدعاء خطاف usePageViews مباشرة داخل مكون التطبيق المخصص ، لا تقم بتعيين trackPageViews على مكون GoogleAnalytics أو تعيينه على خطأ (افتراضي):

 // pages/_app.js
import { GoogleAnalytics , usePageViews } from "nextjs-google-analytics" ;

const App = ( { Component , pageProps } ) => {
  usePageViews ( ) ; // IgnoreHashChange defaults to false
  // usePageViews({ ignoreHashChange: true });

  return (
    < >
      < GoogleAnalytics /> { /* or <GoogleAnalytics trackPageViews={false} /> */ }
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

تقوم الوحدة أيضًا بتصدير وظيفة pageView التي يمكنك استخدامها إذا كنت بحاجة إلى مزيد من التحكم.

حدث مخصص

يمكنك استخدام وظيفة event لتتبع حدث مخصص:

 import { useState } from "react" ;
import Page from "../components/Page" ;
import { event } from "nextjs-google-analytics" ;

export function Contact ( ) {
  const [ message , setMessage ] = useState ( "" ) ;

  const handleInput = ( e ) => {
    setMessage ( e . target . value ) ;
  } ;

  const handleSubmit = ( e ) => {
    e . preventDefault ( ) ;

    event ( "submit_form" , {
      category : "Contact" ,
      label : message ,
    } ) ;

    setState ( "" ) ;
  } ;

  return (
    < Page >
      < h1 > This is the Contact page </ h1 >
      < form onSubmit = { handleSubmit } >
        < label >
          < span > Message: </ span >
          < textarea onChange = { handleInput } value = { message } />
        </ label >
        < button type = "submit" > submit </ button >
      </ form >
    </ Page >
  ) ;
}

للحصول على المعلمات المحتملة التي يمكن تحديدها في event ، يرجى الرجوع إلى أمر event في مرجع API لعلامة Google.

• مرجع واجهة برمجة تطبيقات Google Tag - حدث

موافقة

يمكنك استخدام وظيفة consent لتحديث تفضيلات ملفات تعريف الارتباط للمستخدمين (GDPR).

 const consentValue : 'denied' | 'granted' = getUserCookiePreferenceFromLocalStorage ( ) ; // 'denied' or 'granted'
 
 consent ( {
    arg : 'update' ,
    params : {
      ad_storage : consentValue ,
      analytics_storage : consentValue ,
      ad_user_data : consentValue ,
      ad_personalization : consentValue
    } ,
 } ) ;

بالنسبة للقيم المحتملة التي يمكن تحديدها في arg و params ، يرجى الرجوع إلى الأمر consent في مرجع API لـ Google Tag.

• مرجع واجهة برمجة تطبيقات علامة Google - الموافقة

حيويات الويب

لإرسال Next.js على الويب الحيوي إلى Google Analytics ، يمكنك استخدام حدث مخصص في وظيفة reportWebVitals داخل مكون التطبيق المخصص:

 // pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;

export function reportWebVitals ( { id , name , label , value } ) {
  event ( name , {
    category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
    value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
    label : id , // id unique to current page load
    nonInteraction : true , // avoids affecting bounce rate.
  } ) ;
}

const App = ( { Component , pageProps } ) => {
  return (
    < >
      < GoogleAnalytics />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ;

إذا كنت تستخدم TypeScript ، فيمكنك استيراد NextWebVitalsMetric من next/app :

 import type { NextWebVitalsMetric } from "next/app" ;

export function reportWebVitals ( metric : NextWebVitalsMetric ) {
  // ...
} 

باستخدام param gaMeasurementId

جميع المكونات التي تم تصديرها ، والسنانير ، والوظائف ، تقبل param اختياري gaMeasurementId التي يمكن استخدامها في حالة عدم توفير متغير البيئة:

 // pages/_app.js
import { GoogleAnalytics , event } from "nextjs-google-analytics" ;
import { gaMeasurementId } from "./lib/gtag" ;

export function reportWebVitals ( {
  id ,
  name ,
  label ,
  value ,
} : NextWebVitalsMetric ) {
  event (
    name ,
    {
      category : label === "web-vital" ? "Web Vitals" : "Next.js custom metric" ,
      value : Math . round ( name === "CLS" ? value * 1000 : value ) , // values must be integers
      label : id , // id unique to current page load
      nonInteraction : true , // avoids affecting bounce rate.
    } ,
    gaMeasurementId
  ) ;
}
const App = ( { Component , pageProps } ) => {
  usePageViews ( { gaMeasurementId } ) ;

  return (
    < >
      < GoogleAnalytics gaMeasurementId = { gaMeasurementId } />
      < Component { ... pageProps } />
    </ >
  ) ;
} ;

export default App ; 

تصحيح الأخطاء لك تحليلات Google

1. تثبيت مصحح تصحيح Google Analytics.

2. قم بتشغيله بالنقر فوق أيقونة على يمين شريط العناوين.

3. افتح وحدة التحكم JavaScript Chrome لمشاهدة الرسائل.

   على Windows و Linux ، اضغط على Control-Shift-J.

   على MAC ، اضغط على Command-Option-J.

4. قم بتحديث الصفحة التي أنت عليها.

TypeScript

يتم كتابة الوحدة النمطية في TypeScript ويتم تضمين تعريفات النوع.

المساهمة

المساهمات والقضايا وطلبات الميزات موضع ترحيب!

أظهر دعمك

إعطاء ️ إذا كنت تحب هذا المشروع!

رخصة

معهد ماساتشوستس للتكنولوجيا