تحليلات البيانات أمر لا بد منه إذا كنت ترغب في تتبع عدد الزوار الذين يستقبلهم موقع الويب الخاص بك. هناك طرق مختلفة يمكنك من خلالها إضافة تحليلات إلى مشروعك ، بما في ذلك Google Analytics. إنها خدمة مجانية وسهلة الإعداد نسبيًا.

تعرف على كيفية إضافة Google Analytics إلى موقعك باستخدام Next.js ، إطار عمل React لبناء مواقع ويب صديقة لكبار المسئولين الاقتصاديين.

إعداد برنامج Google Analytics

يوفر Google Analytics رؤى في سلوك الأشخاص الذين يزورون موقع الويب الخاص بك. يخبرك بالصفحات التي تحصل على عدد المشاهدات ويمنحك بيانات الجمهور مثل الموقع والعمر والاهتمام والجهاز الذي يستخدمونه. يمكن أن تساعد هذه البيانات في اتخاذ قرارات بشأن الاتجاه الذي يجب أن يتخذه عملك لتحقيق النجاح.

للبدء ، قم بزيارة لوحة التحليلات وإنشاء حساب جديد باتباع الخطوات التالية:

  1. انقر على إنشاء حساب زر في علامة تبويب المسؤول لإنشاء حساب جديد.
  2. أضف اسم حساب ضمن قسم إعداد الحساب.
  3. أنشئ خاصية التحليلات من خلال توفير اسم.
  4. أضف تفاصيل العمل. حدد الخيارات التي تنطبق على موقع الويب الخاص بك.
  5. انقر على يخلق زر لإنهاء إعداد الممتلكات.
  6. انقر على دفق الويب لتحديد تدفق البيانات الذي يجب على Google Analytics تتبعه.
    7. instagram viewer
  7. حدد عنوان URL لموقع الويب الخاص بك وقم بتسمية دفق البيانات.
  8. انقر فوق تعليمات وضع العلامات واحصل على النص الذي ستستخدمه على موقع الويب الخاص بك.
  9. انسخ معرّف القياس (رمز التتبع) لاستخدامه لاحقًا.

بمجرد حصولك على رمز التتبع ، يمكنك إعداد مشروع Next.js.

إعداد مشروع Next.js

إذا لم يكن لديك مشروع Next.js تم إعداده بالفعل ، فراجع ملف دليل Next.js الرسمي للبدء.

عندما أنشأت خاصية علامة الموقع الشاملة ، حصلت على نص برمجي مثل هذا:

<! - علامة Google (gtag.js) ->
<النصي غير المتزامن src ="https://www.googletagmanager.com/gtag/js? معرف = G-XXXXXXX"></script>
<النصي>
نافذة او شباك.dataLayer = نافذة او شباك.dataLayer || [] ؛
وظيفةgtag(){dataLayer.push (الحجج);}
 gtag ('js'، جديدتاريخ());
 gtag ('التكوين', 'G- NHVWK8L97D');
</script>

تحتاج إلى إضافة هذا البرنامج النصي إلى علامة رأس موقع الويب الخاص بك. في Next.js ، يمكنك استخدام مكون البرنامج النصي من next / script. هذا المكون هو امتداد لعلامة HTML النصي. يسمح لك بتضمين برامج نصية لجهات خارجية إلى موقع Next.js الخاص بك وتعيين إستراتيجية التحميل الخاصة بهم ، مما يؤدي إلى تحسين الأداء.

ال البرنامج النصي Next.js يقدم المكون استراتيجيات تحميل مختلفة. استراتيجية "ما بعد التفاعل" مناسبة لبرنامج نصي للتحليلات. هذا يعني أنه سيتم تحميلها بعد أن تصبح الصفحة تفاعلية.

يستورد النصي من "التالي / النصي"
<البرنامج النصي src ="" استراتيجية ="بعد تفاعلية" />

افتح ال الصفحات / _app.js ملف واستيراد مكون البرنامج النصي في الأعلى.

يستورد النصي من "التالي / النصي"

بعد ذلك ، قم بتعديل بيان الإرجاع الخاص بمكون التطبيق لتضمين علامة البرنامج النصي من تحليلات جوجل.

يستورد '../styles/globals.css'
يستورد تَخطِيط من "../components/Layout/Layout"
يستورد النصي من "التالي / النصي"
وظيفةتطبيقي({مكون ، pageProps}) {
يعود (
<>
<استراتيجية البرنامج النصي ="بعد تفاعلية" src ="https://www.googletagmanager.com/gtag/js? معرف = G-XXXXXXX"/>
<النصي
 معرف ='تحليلات كوكل'
 استراتيجية ="بعد تفاعلية"
 خطيرlySetInnerHTML = {{
 __html: `
نافذة او شباك.dataLayer = نافذة او شباك.dataLayer || [] ؛
وظيفةgtag(){dataLayer.push (الحجج);}
 gtag ('js'، جديدتاريخ());
 gtag ('التكوين', 'G-XXXXXXX', {
page_path: نافذة او شباك.موقع.pathname,
 });
 `,
 }}
 />
<تَخطِيط>
<المكون {... pageProps} />
</Layout>
</>
 )
}
يصدّرتقصير تطبيقي

لاحظ أن هذه العلامة تختلف قليلاً عن تلك التي يوفرها Google Analytics. يستخدم بشكل خطير SetInnerHTML ويتضمن إستراتيجية تحميل. ومع ذلك ، فإنهم يعملون نفس الشيء.

تذكر استبدال G-XXXXXXX بشفرة التتبع الخاصة بك. يُنصح أيضًا بتخزين شفرة التتبع في ملف .env للحفاظ على سريتها.

إضافة Google Analytics إلى تطبيق صفحة واحدة

يمكنك استخدام علامة البرنامج النصي أعلاه لموقع ويب عادي وتركها عند هذا الحد. ومع ذلك ، بالنسبة لتطبيق من صفحة واحدة مثل موقع Next.js ، فأنت بحاجة إلى اتخاذ بضع خطوات إضافية.

أ تطبيق من صفحة واحدة (SPA) هو موقع ويب يقوم بتحميل كل المحتوى مقدمًا ، استجابة لطلب أولي. يقوم المتصفح بتحميل المحتوى ديناميكيًا عندما ينقر المستخدم على الروابط للتنقل في الموقع. فهو لا يقدم طلب صفحة ، فقط يتغير عنوان URL.

هذا يختلف بالنسبة لصفحات Next.js التي تستخدم getServerSideProps حيث يعرض المتصفح تلك الصفحات عند الطلب.

تعمل علامة Google عن طريق تسجيل مشاهدة صفحة عند تحميل صفحة جديدة. لذلك ، بالنسبة إلى SPA ، يتم تنفيذ علامة Google مرة واحدة فقط ، عندما يتم تحميل الصفحة في البداية. لذلك ، يجب عليك تسجيل طرق العرض يدويًا أثناء انتقال المستخدم إلى صفحات مختلفة.

انظر قياس الصفحة الواحدة دليل Google Analytics لتعلم المزيد.

لتسجيل مشاهدات الصفحة يدويًا في Next.js باستخدام البرنامج النصي gtag ، أنشئ مجلدًا جديدًا يسمىليب وإضافة ملف جديد ، gtag.js.

يصدّرمقدار ثابت GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID ،
يصدّرمقدار ثابت مشاهدة الصفحة = () => {
 window.gtag ("التكوين"، GA_MEASUREMENT_ID ، {
 page_path: عنوان url ،
 });
};
يصدّرمقدار ثابت الحدث = ({action، category، label، value}) => {
 window.gtag ("حدث"، فعل، {
 event_category: فئة ،
 event_label: التسمية ،
 قيمة،
 });
};

بعد ذلك ، قم بتعديل /pages/_app.js لاستخدام هذه الوظائف وتتبع مشاهدات الصفحة في الخطاف useEffect.

يستورد '../styles/globals.css'
يستورد تَخطِيط من "../components/Layout/Layout"
يستورد النصي من "التالي / النصي"
يستورد {useRouter} من "التالي / جهاز التوجيه" ؛
يستورد {useEffect} من "تتفاعل"؛
يستورد * مثل gtag من "../lib/gtag"
وظيفةتطبيقي({مكون ، pageProps}: AppProps) {
مقدار ثابت جهاز التوجيه = useRouter () ،


useEffect (() => {
مقدار ثابت handleRouteChange = (url) => {
gtag.pageview(عنوان url);
 };


router.events.on ("طريقالتغييرإكمال"، handleRouteChange) ؛


يعود () => {
 router.events.off ("طريقالتغييرإكمال"، handleRouteChange) ؛
 };
 }, [router.events]);
يعود (
<>
<استراتيجية البرنامج النصي ="بعد تفاعلية" src ="https://www.googletagmanager.com/gtag/js? معرف = G-XXXXXX"></Script>
<النصي
 معرف ='تحليلات كوكل'
 استراتيجية ="بعد تفاعلية"
 خطيرlySetInnerHTML = {{
 __html: `
نافذة او شباك.dataLayer = نافذة او شباك.dataLayer || [] ؛
وظيفةgtag(){dataLayer.push (الحجج);}
 gtag ('js'، جديدتاريخ());
 gtag ('التكوين', 'G-XXXXXX', {
page_path: نافذة او شباك.موقع.pathname,
 });
 `,
 }}
 />
<تَخطِيط>
<المكون {... pageProps} />
</Layout>
</>
 )
}
يصدّرتقصير تطبيقي

يستخدم هذا المثال الخطافات useRouter و useEffect لتسجيل عرض صفحة في كل مرة ينتقل فيها المستخدم إلى صفحة أخرى.

قم باستدعاء طريقة useRouter من next / router وقم بتعيينها لمتغير جهاز التوجيه. في الخطاف useEffect ، استمع إلى حدث routeChangeComplete على جهاز التوجيه. عند وقوع الحدث ، قم بتسجيل عرض صفحة عن طريق استدعاء وظيفة handleRouteChange.

تلغي عبارة الإرجاع الخاصة بـ الخطاف useEffect الاشتراك من حدث routeChangeComplete بالطريقة "off".

استخدم Google Analytics لجمع بيانات المستخدم

تعتبر البيانات مفيدة للغاية في اتخاذ قرارات جيدة ، وتعد إضافة Google Analytics إلى موقع الويب الخاص بك إحدى طرق جمعها.

يمكنك إضافة Google Analytics إلى مشروع Next.js باستخدام الخطافات لضمان تسجيل جميع مشاهدات الصفحة حتى عندما تستخدم الصفحة التوجيه من جانب العميل. يمكنك الآن معرفة عدد المشاهدات التي يحصل عليها موقعك على لوحة معلومات Google Analytics.