كيف أقوم بإستخدام google analytics في مشروع React؟

يمكنك الإستعانة بهاته الحزمة لتحقيق الغرض.

1. بداية قم بتثبيت الحزمة عن طريق مدير الحزم : 

npm install react-ga --save

    2. تضمين الموديلات اللازمة بملف App.js :

import ReactGA from "react-ga";

    3. مصادقة غوغل انالتكس مع الحزمة , أيضا قم بتعريف ثابت بشكل globally (سنأتي لإستعماله في الخطوة التالية): 

ReactGA.initialize("TRACKING-ID");
const history= createHistory(window);

 4. بداخل وسم LocationProvider بالراوتر قم بتعريف الخاصية history و قم بإرفاقها بالثابت الذي تم تعريفه على هذا النحو : 

<LocationProvider history={history}>
  <Router>
    ..
  </Router>
</LocationProvider>

الان يتم رصد أي تغيير يخص الكائن window . ينبغي الان فقط الإستماع لهاته التغيرات و التصرف بناءا عليها . 

مثال : 

history.listen( window => {
  ReactGA.pageview(window.location.pathname + window.location.search);
});

و هذا جواب سؤالك :

بتاريخ 47 دقائق مضت قال Adam Ebrahim:

 كيف أقوم بإخبار Google analytics بأن المستخدم قد ذهب إلى صفحة معينة حتى أستطيع عمل Tracking للصفحات التي يزورها المستخدمون؟

يمكنك استخدام react-ga مع history قم بتثبيت المكتبات

npm i react-ga history -S

بعد ذلك  تحتاج ببساطة إلى استيراد الحزمة react-ga وتهيئتها في التطبيق الخاص بك.

import ReactGA from 'react-ga';

const trackingId = "XXXXXXXXXXXXX"; // قم بنسخ مفتاح التراكينغ الخاص بك
ReactGA.initialize(trackingId);

بعد ذلك ، نحتاج ببساطة إلى توصيل  المتصفح الخاص بك بال Router وGoogle Analytics 

import React from 'react';
import ReactDOM from 'react-dom';
import ReactGA from 'react-ga';
import { createBrowserHistory } from 'history';
import { Router } from 'react-router-dom';

const history = createBrowserHistory();


history.listen(location => {
  ReactGA.set({ page: location.pathname }); 
  ReactGA.pageview(location.pathname); 
});

const App = () => (
  <Router history={history}>
   .....
  </Router>
);

ReactDOM.render(<App />, document.getElementById('root'));