प्रतिक्रिया-रूटर के लिए Google Analytics कैसे सेट करें?

Question 1

मैं अपनी प्रतिक्रिया साइट पर Google Analytics सेट करने का प्रयास कर रहा हूं, और कुछ पैकेजों में आया हूं, लेकिन इनमें से कोई भी उस तरह का सेट अप नहीं है जो मेरे पास उदाहरणों के संदर्भ में है। उम्मीद कर रहा था कि कोई इस पर कुछ प्रकाश डाल सकता है।

मैं जो पैकेज देख रहा हूं, वह प्रतिक्रिया-गा है ।

मेरे index.jsइस तरह से मेरे रेंडर विधि ।

React.render((
<Router history={createBrowserHistory()}>
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader}/>
</Router>), document.getElementById('root'));

Question 2

अपने इतिहास की वस्तु का संदर्भ रखें। अर्थात

import { createBrowserHistory } from 'history';

var history = createBrowserHistory();

ReactDOM.render((
    <Router history={history}>
        [...]

फिर प्रत्येक पेजव्यू रिकॉर्ड करने के लिए एक श्रोता जोड़ें। (यह मानता है कि आपने पहले ही window.gaसामान्य तरीके से ऑब्जेक्ट सेट किया है।)

history.listen((location) => {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
});

Question 3

यह देखते हुए कि गूगल एनालिटिक्स एक ट्रैकिंग आईडी के साथ लोड और आरंभिक है।

<Route>पृष्ठ के विचारों को ट्रैक करने के लिए घटक का उपयोग करके प्रतिक्रिया-राउटर संस्करण 4 के लिए एक समाधान है ।

<Route path="/" render={({location}) => {
  if (typeof window.ga === 'function') {
    window.ga('set', 'page', location.pathname + location.search);
    window.ga('send', 'pageview');
  }
  return null;
}} />

आप बस इस घटक को अंदर प्रस्तुत करते हैं <Router>(लेकिन प्रत्यक्ष बच्चे के रूप में नहीं <Switch>)।

क्या होता है कि जब भी स्थान प्रोप बदलता है तो यह इस घटक के पुन: रेंडर का कारण बनता है (वास्तव में कुछ भी प्रतिपादन नहीं करता है) जो पेजव्यू को आग लगा देता है।

Question 4

मैं React Router v4 और Google Analytics ग्लोबल साइट टैग का उपयोग कर रहा हूं , जो यह लिखते समय अनुशंसित किया गया प्रतीत होता है।

और यहाँ मेरा समाधान है:

WithRouter से लिपटे एक घटक बनाएँ react-router-dom:

import React from 'react';
import { withRouter } from 'react-router-dom';
import { GA_TRACKING_ID } from '../config';

class GoogleAnalytics extends React.Component {
    componentWillUpdate ({ location, history }) {
        const gtag = window.gtag;

        if (location.pathname === this.props.location.pathname) {
            // don't log identical link clicks (nav links likely)
            return;
        }

        if (history.action === 'PUSH' &&
            typeof(gtag) === 'function') {
            gtag('config', GA_TRACKING_ID, {
                'page_title': document.title,
                'page_location': window.location.href,
                'page_path': location.pathname
            });
        }
    }

    render () {
        return null;
    }
}

export default withRouter(GoogleAnalytics);

बस अपने राउटर के भीतर घटक को जोड़ें (मेरा मानना है कि किसी भी मार्गों के बाद आदर्श रूप से मिलान किया जाएगा और किसी भी स्विच घटकों, क्योंकि एनालिटिक्स फ़ंक्शन आपकी साइट रेंडरिंग पर प्राथमिकता नहीं होनी चाहिए):

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import IndexPage from './IndexPage';
import NotFoundPage from './NotFoundPage';
import GoogleAnalytics from './GoogleAnalytics';

const App = () => (
    <Router>
        <Switch>
            <Route exact path="/" component={IndexPage} />
            <Route component={NotFoundPage} />
        </Switch>
        <GoogleAnalytics />
    </Router>
);

जैसा कि कहा गया:

withRouter हर बार रूट बदलने के साथ ही प्रॉम्प्ट के साथ प्रॉम्प्ट के साथ अपने कंपोनेंट को फिर से रेंडर करेगा

इसलिए जब मार्ग बदल जाता है, तो GoogleAnalyticsघटक अपडेट हो जाएगा, उसे प्रॉपर के रूप में नया स्थान प्राप्त होगा, और history.actionया तो PUSHएक नए इतिहास आइटम के लिए होगा या POPइतिहास के माध्यम से पीछे की तरफ जाने का संकेत देगा (जो मुझे लगता है कि पृष्ठ दृश्य को ट्रिगर नहीं करना चाहिए, लेकिन आप अगर समायोजित कर सकते हैं में बयान componentWillUpdateआप मनचाहे ढंग से (तुम भी कोशिश कर सकते componentDidUpdateके साथ this.propsबजाय, लेकिन मैं अनिश्चित जो बेहतर है हूँ))।

Question 5

ध्यान दें कि यदि आप react-router-domपैकेज का उपयोग कर रहे हैं तो आप इसे react-router-4इस तरह से संभाल सकते हैं:

import { Router, Route } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();
const initGA = (history) => {
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'YOUR_IDENTIFIER_HERE', 'auto');
  ga('send', 'pageview');

  history.listen((location) => {
    console.log("tracking page view: " + location.pathname);
    ga('send', 'pageview', location.pathname);
  });
};

initGA(history);

class App extends Component { //eslint-disable-line
  render() {
    return
      (<Router history={history} >
         <Route exact path="/x" component={x} />
         <Route exact path="/y" component={y} />
       </Router>)
  }
}

ध्यान दें कि इसके लिए आपको historyपैकेज स्थापित करना होगा ( npm install history)। यह पहले से ही प्रतिक्रिया-राउटर-डोम की एक निर्भरता है इसलिए आप यहां कोई पृष्ठ भार नहीं जोड़ रहे हैं।

यह भी नोट करें: ब्राउजर राउटर घटक का उपयोग करना संभव नहीं है और इस तरह से अपने गा ट्रैकिंग को उपकरण। यह ठीक है क्योंकि राउटर ऑब्जेक्ट के आसपास BrowserRouter घटक सिर्फ एक बहुत पतला आवरण है। हम साथ यहाँ BrowserRouter कार्यक्षमता को पुन: <Router history={history}>जहां const history = createBrowserHistory();।

Question 6

मेरा सुझाव है कि उत्कृष्ट react-router-gaपैकेज का उपयोग करें जो बेहद हल्के और कॉन्फ़िगर करने में आसान है, खासकर जब BrowserRouterरैपर का उपयोग कर ।

घटक आयात करें:

import Analytics from 'react-router-ga';

तो बस <Analytics>अपने भीतर जोड़ें BrowserRouter:

<BrowserRouter>
    <Analytics id="UA-ANALYTICS-1">
        <Switch>
            <Route path="/somewhere" component={SomeComponent}/>
        </Switch>
    </Analytics>
</BrowserRouter>

Question 7

मुझे यह पसंद है कि कैसे मार्क थॉमस मुलर यहाँ सुझाव देते हैं :

अपने index.js में

import ReactGA from 'react-ga'

ReactGA.initialize('YourAnalyticsID')

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

आपके मार्ग कहां हैं:

import React, { Component } from 'react'
import { Router, Route } from 'react-router-dom'
import createHistory from 'history/createBrowserHistory'
import ReactGA from 'react-ga'

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

export default class AppRoutes extends Component {
    componentDidMount() {
        ReactGA.pageview(window.location.pathname)
    }

    render() {
        return (
            <Router history={history}>
                <div>
                    <Route path="/your" component={Your} />
                    <Route path="/pages" component={Pages} />
                    <Route path="/here" component={Here} />
                </div>
            </Router>
        )
    }
}

लघु, स्केलेबल और सरल :)

Question 8

चूंकि react-router v5.1.0यह एक बहुत आसान के साथ हल किया जा सकता है useLocation।

usePageTracking.js

import { useEffect} from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();

  useEffect(() => {
    ReactGA.initialize("UA-000000000-0");
    ReactGA.pageview(location.pathname + location.search);
  }, [location]);
};

export default usePageTracking;

App.js

const App = () => {
  usePageTracking();

  return (...);
};

यह सभी देखें:

यहाँ एक छोटा होशियार संस्करण है:

usePageTracking.js

import { useEffect, useState } from "react";
import { useLocation } from "react-router-dom";
import ReactGA from "react-ga";

const usePageTracking = () => {
  const location = useLocation();
  const [initialized, setInitialized] = useState(false);

  useEffect(() => {
    if (!window.location.href.includes("localhost")) {
      ReactGA.initialize("UA-000000000-0");
    }
    setInitialized(true);
  }, []);

  useEffect(() => {
    if (initialized) {
      ReactGA.pageview(location.pathname + location.search);
    }
  }, [initialized, location]);
};

export default usePageTracking;

Question 9

हमेशा लाइब्रेरी के अनुशंसित तरीके से जाएं

रिएक्ट-जीए प्रलेखन में, उन्होंने रिएक्टर राउटर के साथ उपयोग करने के लिए अनुशंसित एक सामुदायिक घटक जोड़ा है: https://github.com/react-ga/react-ga/wiki/React-Router-v4-withTracker

कार्यान्वयन

import withTracker from './withTracker';

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <Route component={withTracker(App, { /* additional attributes */ } )} />
    </ConnectedRouter>
  </Provider>,
  document.getElementById('root'),
);

कोड

import React, { Component, } from "react";
import GoogleAnalytics from "react-ga";

GoogleAnalytics.initialize("UA-0000000-0");

const withTracker = (WrappedComponent, options = {}) => {
  const trackPage = page => {
    GoogleAnalytics.set({
      page,
      ...options,
    });
    GoogleAnalytics.pageview(page);
  };

  // eslint-disable-next-line
  const HOC = class extends Component {
    componentDidMount() {
      // eslint-disable-next-line
      const page = this.props.location.pathname + this.props.location.search;
      trackPage(page);
    }

    componentDidUpdate(prevProps) {
      const currentPage =
        prevProps.location.pathname + prevProps.location.search;
      const nextPage =
        this.props.location.pathname + this.props.location.search;

      if (currentPage !== nextPage) {
        trackPage(nextPage);
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };

  return HOC;
};

export default withTracker;

Question 10

सबसे पहले, अपने index.js में गा को कॉल करने के लिए onUpdate फ़ंक्शन सेट करें

import ga from 'ga.js';
onUpdate() {
  console.log('=====GA=====>', location.pathname);
  console.log('=====GA_TRACKING_CODE=====>', GA_TRACKING_CODE);
  ga("send", "pageview", location.pathname);
}

render() {
  return (
    <Router onUpdate={this.onUpdate.bind(this)}>...</Router>
  );
}

और गा.जे:

'use strict';
if(typeof window !== 'undefined' && typeof GA_TRACKING_CODE !== 'undefined') {
  (function(window, document, script, url, r, tag, firstScriptTag) {
    window['GoogleAnalyticsObject']=r;
    window[r] = window[r] || function() {
      (window[r].q = window[r].q || []).push(arguments)
    };
    window[r].l = 1*new Date();
    tag = document.createElement(script),
    firstScriptTag = document.getElementsByTagName(script)[0];
    tag.async = 1;
    tag.src = url;
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
  })(
    window,
    document,
    'script',
    '//www.google-analytics.com/analytics.js',
    'ga'
  );

  var ga = window.ga;

  ga('create', GA_TRACKING_CODE, 'auto');

  module.exports = function() {
    return window.ga.apply(window.ga, arguments);
  };
} else {
  module.exports = function() {console.log(arguments)};
}

Question 11

यहाँ कुछ काम के साथ सभी रास्तों को ट्रैक करने का एक सरल तरीका है:

npm i --save history react-ga

एक फ़ाइल बनाएँ history.js

import { createBrowserHistory } from "history"
import ReactGA from "react-ga"

ReactGA.initialize(process.env.REACT_APP_GA)

const history = createBrowserHistory()
history.listen((location) => {
    ReactGA.pageview(location.pathname)
})

// workaround for initial visit
if (window.performance && (performance.navigation.type === performance.navigation.TYPE_NAVIGATE)) {
    ReactGA.pageview("/")
}

export default history

और फिर इसे आयात करें जहां आपका सेट है Router

import history from "./history"

...

class Route extends Component {
render() {
    return (
        <Router history={history}>
            <Switch>
              <Route path="/" exact component={HomePage} />
              ...
            </Switch>
        </Router>
    )
}

export default Route

संदर्भ:

गुस्तावो गोंजालेज | medium.com

इतिहास | GitHub

Question 12

मेरा सुझाव है कि सेगमेंट एनालिटिक्स लाइब्रेरी का उपयोग करें और प्रतिक्रिया-राउटर लाइब्रेरी का उपयोग करके पेज कॉल को ट्रैक करने के लिए रिएक्ट क्विकस्टार्ट गाइड का पालन करें । जब पेज रेंडर करता है और इनवॉइस कॉल का उपयोग करने के लिए आप घटक को संभालने की अनुमति दे सकते हैं। नीचे दिए गए उदाहरण से पता चलता है कि आप ऐसा कैसे कर सकते हैं:<Route />componentDidMountpage

    const App = () => (
      <div>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    );

    export default App;

    export default class Home extends Component {
      componentDidMount() {
        window.analytics.page('Home');
      }

      render() {
        return (
          <h1>
            Home page.
          </h1>
        );
      }
    }

मैं https://github.com/segmentio/analytics-react का अनुरक्षक हूं । सेगमेंट के साथ, यदि आप बिना कोई अतिरिक्त कोड लिखने के कई एनालिटिक्स टूल (हम 250+ से अधिक गंतव्यों का समर्थन करते हैं) को आज़माने के इच्छुक हैं, तो आप अलग-अलग गंतव्यों को एक स्विच के फ्लिप पर बंद कर सकते हैं। 🙂

Question 13

यदि आप हैश या ब्राउज़र इतिहास का उपयोग करते हैं तो आप कर सकते हैं:

import trackingHit from 'tracking';

import { Router, browserHistory } from 'react-router';
browserHistory.listen(trackingHit);
// OR
import { Router, hashHistory } from 'react-router';
hashHistory.listen(trackingHit);

कहाँ ./tracking.es6

export default function(location) {
    console.log('New page hit', location.pathname);
    // Do your shizzle here
}

Question 14

आपके index.js के साथ बुनियादी प्रतिक्रिया-गा कार्यान्वयन

var ReactGA = require('react-ga'); // require the react-ga module
ReactGA.initialize('Your-UA-ID-HERE'); // add your UA code 

function logPageView() { // add this function to your component
  ReactGA.set({ page: window.location.pathname + window.location.search });
  ReactGA.pageview(window.location.pathname + window.location.search);
}

React.render((
<Router history={createBrowserHistory()} onUpdate={logPageView} > // insert onUpdate props here
    <Route path="/" component={App}>
        <IndexRoute component={Home} onLeave={closeHeader}/>
        <Route path="/about" component={About} onLeave={closeHeader}/>
        <Route path="/gallery" component={Gallery} onLeave={closeHeader}/>
        <Route path="/contact-us" component={Contact} onLeave={closeHeader}>
            <Route path="/contact-us/:service" component={Contact} onLeave={closeHeader}/>
        </Route>
        <Route path="/privacy-policy" component={PrivacyPolicy} onLeave={closeHeader} />
        <Route path="/feedback" component={Feedback} onLeave={closeHeader} />
    </Route>
    <Route path="*" component={NoMatch} onLeave={closeHeader} />
</Router>), document.getElementById('root'));

Question 15

@ David-l-walsh और @bozdoz सुझावों के आधार पर

मैंने एक HOC बनाया जो कार्य और कार्य को अंजाम देता है window.ga('set','page','{currentUrl})और आसानी से window.ga('send', 'pageview');सीधे राउटर पृष्ठ में उपयोग किया जाता है ...

यह HOC है:

import React from 'react';
import { history } from '../../store'; // or wherever you createBrowserHistory(); invokation is

function withGAHistoryTrack(WrappedComponent) {
  return class extends React.Component {
    constructor(props) {
      super(props);
    }

    componentDidMount() {
      const { location } = history;
      const page = location.pathname + location.search;

      if (typeof window.ga === 'function') {
        window.ga('set', 'page', page);
        window.ga('send', 'pageview');
      }
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
}

export default withGAHistoryTrack;

और राउटर पेज में इस तरह से उपयोग किया जाता है:

<Route
 path={'yourPath'}
 component={withGAHistoryTrack(yourComponent)}
 exact
/>

Question 16

किसी घटना (जैसे onClick आदि) पर गतिशील रूप से url अपडेट करने के लिए, निम्नलिखित का उपयोग किया जा सकता है:

 //Imports
 import ReactGA from "react-ga";
 import { createBrowserHistory } from "history";

 // Add following on some event, like onClick (depends on your requirement)
 const history = createBrowserHistory();
 ReactGA.initialize("<Your-UA-ID-HERE>");
 ReactGA.pageview(history.location.pathname);