Web-zu-App Funnel-Tracking — Hilfecenter

Verfolgen Sie Ihren gesamten Benutzer-Funnel -- vom Moment, in dem jemand auf Ihrer Website landet, bis zur Nutzung Ihrer React Native-App -- alles in einem einzigen Flowsery Analytics Dashboard.

Dies wird durch die Benutzeridentifikation ermöglicht. Wenn Sie einen Benutzer mit derselben userId sowohl auf Ihrer Website als auch in Ihrer App identifizieren, verknüpft Flowsery Analytics beide Besucherprofile und gibt Ihnen eine einheitliche Ansicht der gesamten Reise.

Funktionsweise

Ein Besucher kommt auf Ihre Website -- das Flowsery Analytics Tracking-Script weist ihm eine visitorId zu, die in einem Cookie gespeichert wird
Der Besucher registriert sich oder meldet sich an -- Sie rufen identify mit seiner userId auf (z.B. E-Mail)
Dieselbe Person öffnet Ihre React Native-App -- das SDK weist eine neue visitorId zu, die in AsyncStorage gespeichert wird
Sie meldet sich in der App an -- Sie rufen identify mit derselben userId auf
Flowsery Analytics erkennt die gemeinsame userId und vereint beide Besucherprofile zu einer vollständigen plattformübergreifenden Reise

Voraussetzungen

Das Flowsery Analytics Tracking-Script auf Ihrer Website installiert (Erste Schritte)
Das Flowsery Analytics React Native SDK in Ihrer App installiert (React Native-Anleitung)
Beide müssen die gleiche Flowsery Analytics Website-ID (flid_***) verwenden

Schritt 1: Benutzer auf Ihrer Website identifizieren

Wenn sich ein Benutzer auf Ihrer Website registriert oder anmeldet, rufen Sie identify auf:

HTML

// After signup or login on your website window?.flowsery("identify", { userId: user.email, // or any unique ID name: user.name, });

Fügen Sie das Queue-Snippet in Ihrem <head> hinzu, damit identify-Aufrufe auch erfasst werden, bevor das Hauptscript geladen ist.

Schritt 2: React Native SDK installieren

Folgen Sie der React Native / Expo-Installationsanleitung, um Flowsery Analytics zu Ihrer App hinzuzufügen. Stellen Sie sicher, dass Sie die gleiche Website-ID wie Ihre Website verwenden:

JavaScript

import { FlowseryProvider } from 'flowsery/react-native';
 
export default function RootLayout() {
  return (
    <FlowseryProvider
      config={{
        // Same website ID as your landing page
        websiteId: process.env.EXPO_PUBLIC_FLOWSERY_WEBSITE_ID!,
        domain: process.env.EXPO_PUBLIC_FLOWSERY_DOMAIN!,
        debug: __DEV__,
      }}>
      {/* your app */}
    </FlowseryProvider>
  );
}

Schritt 3: Benutzer in Ihrer React Native-App identifizieren

Wenn sich ein Benutzer in Ihrer App anmeldet, rufen Sie identify mit der gleichen userId auf, die Sie auf der Website verwendet haben:

JavaScript

import { useFlowsery } from 'flowsery/react-native';
 
export function useIdentifyUser(user) {
  const client = useFlowsery();
 
  useEffect(() => {
    if (user && client) {
      // Same userId as the website -- this links both profiles
      client.identify(user.email, {
        name: user.name,
      });
    }
  }, [user, client]);
}

Schritt 4: Screens in Ihrer App verfolgen

Erfassen Sie Screen-Aufrufe, damit Sie Funnels erstellen können, die sowohl Web als auch Mobile umfassen:

JavaScript

import { useFlowseryScreen, useFlowseryTrack } from 'flowsery/react-native';
 
export default function HomeScreen() {
  useFlowseryScreen('HomeScreen');
  const track = useFlowseryTrack();
 
  return (
    <Pressable onPress={() => track('upgrade_click', { source: 'home' })}>
      <Text>Upgrade to Pro</Text>
    </Pressable>
  );
}

Plattformübergreifenden Conversion-Funnel erstellen

Sobald sowohl Ihre Website als auch Ihre App Events verfolgen und Benutzer identifizieren, können Sie in Ihrem Flowsery Analytics Dashboard einen Conversion-Funnel erstellen, der beide Plattformen umfasst. Zum Beispiel:

Web -- Seitenaufruf auf / (Landing Page)
Web -- Seitenaufruf auf /pricing
Web -- Benutzerdefiniertes Goal signup
Mobile -- Screen-Aufruf HomeScreen
Mobile -- Benutzerdefiniertes Goal upgrade_click

So sehen Sie, wo Benutzer zwischen der Entdeckung Ihres Produkts und der Nutzung als aktive App-Benutzer abspringen.

Mobile Screen-Aufrufe erscheinen als flowsery://ios/HomeScreen oder flowsery://android/HomeScreen in Ihrem Dashboard. Sie können mobilen Traffic mit flowsery:// im Seitenfilter filtern.

Wichtige Hinweise

Gleiche Website-ID: Sowohl Ihre Website als auch Ihre React Native-App müssen die gleiche Flowsery Analytics Website-ID verwenden. Das stellt sicher, dass alle Daten in ein Dashboard fließen.
Gleiche userId: Die userId, die Sie an identify übergeben, muss auf beiden Plattformen identisch sein. Wir empfehlen die Verwendung der E-Mail des Benutzers.
Bei jeder Sitzung identifizieren: Rufen Sie identify jedes Mal auf, wenn der Benutzer eine neue Sitzung startet (z.B. beim App-Öffnen, wenn der Benutzer bereits eingeloggt ist), um die Verknüpfung aufrechtzuerhalten.
Domain-Konfiguration: Stellen Sie in Ihren Flowsery Analytics Website-Einstellungen sicher, dass die Domain Ihrer App in den erlaubten Hostnamen aufgeführt ist.
Offline-Unterstützung: Das React Native SDK stellt Events in eine Warteschlange, wenn kein Internet verfügbar ist, und sendet sie, wenn die Verbindung wiederhergestellt wird -- so gehen keine Daten verloren.