it-swarm.com.de

Google Analytics zu React hinzufügen

Ich versuche, Google Analytics zu einer React-Webanwendung hinzuzufügen.

Ich weiß, wie man dies in HTML/CSS/JS-Sites macht, und ich habe es auch in eine AngularJS-App integriert. Aber ich bin nicht ganz sicher, wie ich reagieren soll, wenn es darum geht, zu reagieren.

Mit HTML/CSS/JS hatte ich es einfach zu jeder einzelnen Seite hinzugefügt.

Was ich mit AngularJS gemacht hatte, war das Hinzufügen von GTM und GA -Skript zu index.html und das Hinzufügen von UA-Labels zu den HTML-Divs (und Schaltflächen), um Klicks zu erhalten. 

Wie kann ich das mit React machen?

Bitte helfen

8
Raj

Update: Feb 2019
Als ich sah, dass diese Frage viel durchsucht wird, habe ich mich entschlossen, meine Erklärung zu erweitern.
Zum Hinzufügen von Google Analytics zu React empfehle ich die Verwendung von React-GA.
Hinzufügen durch Ausführen von:
npm install react-ga --save 

Initialisierung:
Initialisieren Sie in einer Root-Komponente, indem Sie Folgendes ausführen:

import ReactGA from 'react-ga';
ReactGA.initialize('Your Unique ID');

So melden Sie die Seitenansicht: 

ReactGA.pageview(window.location.pathname + window.location.search);

Benutzerdefiniertes Ereignis melden: 

ReactGA.event({
  category: 'User',
  action: 'Sent message'
});

Weitere Anweisungen finden Sie im github repo


Die beste Methode für diese IMO ist die Verwendung von "reave-ga ..__". Schauen Sie sich die github rep an.

12
Matan Bobi

Wenn Sie es vorziehen, ein Paket nicht zu verwenden, können Sie dies in einer Reaktionsanwendung tun. Fügen Sie das "gtag" in index.html hinzu

<!-- index.html -->

<script>
            window.dataLayer = window.dataLayer || [];
            function gtag() {
                dataLayer.Push(arguments);
            }
            gtag("js", new Date());

            gtag("config", "<GA-PROPERTYID>");
        </script>

Feuern Sie in der Übermittlungsaktion des Anmeldeformulars das Ereignis ab

window.gtag("event", "login", {
            event_category: "access",
            event_label: "login"
        });
3
Giwan

Ohne ein Paket zu verwenden, würde ich es so machen:

In Ihrem index.js (in der render-Methode):

    {/* Global site tag (gtag.js) - Google Analytics */}
    <script
      async
      src="https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID"
    />
    <script>{injectGA()}</script>

Und außerhalb der Klasse:

const injectGA = () => {
  if (typeof window == 'undefined') {
    return;
  }
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    window.dataLayer.Push(arguments);
  }
  gtag('js', new Date());

  gtag('config', 'YOUR_TRACKING_ID');
};
2
cameck

Eine weitere großartige Bibliothek, die Sie überprüfen können, ist redux-beacon .

Es lässt sich sehr einfach in die reakt/redux-Anwendung integrieren und verfügt über eine großartige Dokumentation. ReactGA ist auch gut, aber mit Redux-Beacon werden Sie Ihren App-Code nicht mit Google Analytics-Code überladen, da er über seine eigene Middleware funktioniert. 

2
utkarsh

Ich schlage vor, das Segment-Skript in Ihren index.html einzubetten, die für das window-Objekt zugängliche Analysebibliothek zu verwenden und den Ereignisbehandlern von React Tracking-Aufrufe hinzuzufügen:

export default class SignupButton extends Component {
  trackEvent() {
    window.analytics.track('User Signup');
  }

  render() {
    return (
      <button onClick={this.trackEvent}>
        Signup with Segment today!
      </button>
    );
  }
}

Ich bin der Betreuer von https://github.com/segmentio/analytics-react . Ich empfehle Ihnen, es zu überprüfen, wenn Sie dieses Problem mithilfe einer einzigen API zur Verwaltung Ihrer Kundendaten lösen möchten und in jedes andere Analysetool (wir unterstützen mehr als 250 Ziele) integrieren können, ohne zusätzlichen Code schreiben zu müssen. ???? 

0
William