ربط مشروع React بـ Google Analytics

Image drop

الخطوة الأولى

سجل الدخول الى حسابك في جوجل ثم اذهب الى Google Analytics

الخطوة الثانية

  • اضغط على Start measuring

  • أدخل اسم لحسابك ثم اضغط Next

  • أدخل اسم موقعك والمنطقة الزمنية ثم اضغط Next

  • بعدها اضغط على Create (يمكنك تجاهل ادخال معلومات فئة نشاطك وحجم مؤسستك وغيرها).

  • ستظهر لك اتفاقية الاستخدام قم بالموافقة عليها بالضغط على Agree.

  • بمجرد ظهور الصورة أدناه اضغط على Web.

  • أدخل URL الموقع ثم اسمه ثم اضغط Create stream.

  • ستظهر لك نافذتين الأولى لن تحتاجها قم باغلاقها وهي طريقة اعداد الموقع وربطه بإحصاءات Google 

  • النافذة الثانية ستتضمن MEASUREMENT ID قم بنسخه لاكمال الربط.

الخطوة الثالثة

افتح مشروعك من خلال محرر الأكواد وضمن الـ Terminal قم بتحميل Google Analytics باكيج من خلال الأمر:

npm i react-ga4

ضمن ملف App.js أضف الأكواد التالية مع مراعاة تغيير MEASUREMENT ID:

import ReactGA from "react-ga4" ReactGA.initialize("Your_MEASUREMENT_ID_here")

الخطوة الرابعة

قم بعمل build للمشروع من خلال الأمر: npm run build ثم قم برفع المجلد على الاستضافة

الخطوة الخامسة

عد الى Google Analytics ثم من القائمة الجانبية اذهب الى Reports ثم Realtime  للتحقق من الزيارات بشكل مباشر (قم بفتح موقعك لتسجيل زيارة).