Integration mit React

Zweifellos ist React heutzutage eines der bekanntesten Frontend-Frameworks. Wir bei Metricalp freuen uns, eine offizielle Integrationsbibliothek für React und NextJS zu haben. Wenn Sie NextJS verwenden, schauen Sie sich bitte die NextJS Integrationsdokumente an. Wenn Sie React verwenden, sind Sie hier genau richtig. Fangen wir an!

Unsere Integrationsbibliothek auf NPM heißt @metricalp/react

Installation

Sie können es installieren als:

yarn add @metricalp/react

oder

npm install @metricalp/react

Integration

Im obersten Level Ihrer App in src/index.js | src/main.tsx (Vite) | App.js, wickeln Sie Ihre App mit MetricalpReactProvider ein. Geben Sie dann Ihre tid (alias TrackerID) als Prop an den Provider. Im Grunde war's das schon, Metricalp beginnt automatisch alle Besuchs- und Routenänderungsereignisse zu sammeln. Aber Sie können das Verhalten mit Props anpassen. Wir erklären alles.

Beispiel (Vite-basierte React-Anwendung)

Importieren Sie in src/main.tsx die Bibliothek import { MetricalpReactProvider } from '@metricalp/react';. Dann wickeln Sie Ihre App ein mit <MetricalpReactProvider allowLocalhost tid="YOUR_TID">

VERGESSEN SIE NICHT, das tid-Prop durch Ihre tid zu ersetzen.

Wir haben allowLocalhost hinzugefügt, weil Metricalp standardmäßig nicht auf localhost funktioniert, um Ihre Kontingentgrenzen zu schützen. Wir haben localhost zu Testzwecken zugelassen. Sie sollten es nach einmaligem Testen entfernen, um Ihr Kontingent zu sparen. Für detaillierte Informationen überprüfen Sie allow localhost & exclude me docs.

Beispielcode

        import React from 'react';
        import ReactDOM from 'react-dom/client';
        import { MetricalpReactProvider } from '@metricalp/react';
        import './index.css';
        import { App } from './App.tsx';
        
        ReactDOM.createRoot(document.getElementById('root')!).render(
          <React.StrictMode>
            <MetricalpReactProvider allowLocalhost tid="YOUR_TID">
              <App />
            </MetricalpReactProvider>
          </React.StrictMode>
        );

VERWENDUNG

Wenn Sie die Bibliothek mit Ihrer App integriert haben, beginnt sie automatisch, screen_view-Ereignisse zu verfolgen. Metricalp hört auf Änderungen von window.history und erstellt standardmäßig bei jeder Pfadänderung ein screen_view-Ereignis. Wenn Sie also nur screen_views verfolgen möchten, ist Ihre App direkt nach der Integration bereit. Sie müssen nichts weiter tun. Wenn Sie jedoch benutzerdefinierte Ereignisse erzeugen oder das automatische Routen-Tracking deaktivieren und screen_view-Ereignisse manuell erstellen möchten, folgen Sie diesem Abschnitt.

Ereignisse erzeugen

Sie haben zwei Möglichkeiten, Metricalp-Ereignisse mit dieser Bibliothek zu erzeugen. Ein Hook oder ein direkter Funktionsaufruf.

Ereignisse mit Hook erzeugen

        import { useMetricalp } from '@metricalp/react';

        export default function MyComponent() {
          // Hook aufrufen, um die Metricalp-Ereignisfunktion zu erhalten
          const metricalpEvent = useMetricalp();
        
          return (
            <div>
              <button
                onClick={() => {
                  metricalpEvent({ type: 'click_test_button', custom_prop1: 'hook' });
                }}>
                Click me
              </button>
            </div>
          );
        }

Ereignisse mit direktem Funktionsaufruf erzeugen

Manchmal (außerhalb von Komponenten) können Sie in React keine Hooks aufrufen. Dann können Sie die direkte Ereignisauslöserfunktion von Metricalp importieren.

        import { metricalpEvent } from "@metricalp/react";

        export default function MyComponent() {
        
          return (
            <div>
              <button
                onClick={() => {
                  metricalpEvent({ type: 'click_test_button', custom_prop1: 'direct' });
                }}
              >
                Click me
              </button>
            </div>
          );
        }

Es liegt ganz bei Ihnen, ob Sie in Ihrer gesamten App Hook oder direkten Funktionsaufruf bevorzugen. Sie können entscheiden, nur einen zu verwenden oder beide je nach Verwendungsort zu nutzen. In den obigen Beispielen erzeugen wir benutzerdefinierte Ereignisse mit benutzerdefinierten Eigenschaften. In Ihrem Metricalp-Dashboard können Sie Aliase für custom_prop festlegen, dann können Sie diesen Schlüssel direkt in den Ereignissen verwenden. Zum Beispiel: metricalpEvent({ type: 'click_test_button', user_role: 'admin' }); Hier haben wir user_role als Alias für custom_prop1 in den Tracker-Einstellungen definiert und verwenden ihn nun direkt in den Ereignissen.

Anpassen der Verhaltensweisen mit Props

<MetricalpReactProvider
    allowLocalhost
    tid="mam123456"
    initialSharedCustomProps={{
      _global: { custom_prop3: "v1.0" },
      screen_view: { color: 'red', custom_prop2: 'Test' } 
  }}>