Suivi de l'entonnoir web vers application

Suivez l'ensemble de votre entonnoir utilisateur -- depuis le moment ou quelqu'un arrive sur votre site web jusqu'a l'utilisation de votre application React Native -- le tout dans un seul tableau de bord Flowsery Analytics.

Cela est rendu possible par l'identification des utilisateurs. Lorsque vous identifiez un utilisateur avec le meme userId sur votre site web et votre application, Flowsery Analytics relie les deux profils visiteurs ensemble, vous donnant une vue unifiee du parcours complet.

Comment cela fonctionne

Un visiteur arrive sur votre site web -- le script de suivi Flowsery Analytics lui attribue un visitorId stocke dans un cookie
Le visiteur s'inscrit ou se connecte sur votre site -- vous appelez identify avec son userId (par ex. email)
La meme personne ouvre votre application React Native -- le SDK attribue un nouveau visitorId stocke dans AsyncStorage
Elle se connecte a l'application -- vous appelez identify avec le meme userId
Flowsery Analytics detecte le userId partage et fusionne les deux profils visiteurs, creant un parcours cross-plateforme complet

Prerequis

Le script de suivi Flowsery Analytics installe sur votre site web (pour commencer)
Le SDK Flowsery Analytics React Native installe dans votre application (guide React Native)
Les deux doivent utiliser le meme identifiant de site Flowsery Analytics (flid_***)

Etape 1 : Identifier les utilisateurs sur votre site web

Lorsqu'un utilisateur s'inscrit ou se connecte sur votre site, appelez identify :

HTML

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

Ajoutez le snippet de file d'attente dans votre <head> pour que les appels identify soient captures meme avant le chargement du script principal.

Etape 2 : Installer le SDK React Native

Suivez le guide d'installation React Native / Expo pour ajouter Flowsery Analytics a votre application. Assurez-vous d'utiliser le meme identifiant de site que votre site web :

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>
  );
}

Etape 3 : Identifier les utilisateurs dans votre application React Native

Lorsqu'un utilisateur se connecte a votre application, appelez identify avec le meme userId que celui utilise sur le site web :

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]);
}

Etape 4 : Suivre les ecrans dans votre application

Enregistrez les vues d'ecran pour pouvoir construire des entonnoirs qui couvrent le web et le mobile :

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>
  );
}

Construire un entonnoir de conversion cross-plateforme

Une fois que votre site web et votre application suivent les evenements et identifient les utilisateurs, vous pouvez creer un entonnoir de conversion dans votre tableau de bord Flowsery Analytics qui couvre les deux plateformes. Par exemple :

Web -- Page vue sur / (page d'accueil)
Web -- Page vue sur /pricing
Web -- Objectif personnalise signup
Mobile -- Vue d'ecran HomeScreen
Mobile -- Objectif personnalise upgrade_click

Cela vous donne une visibilite sur les endroits ou les utilisateurs abandonnent entre la decouverte de votre produit et le passage a des utilisateurs actifs de l'application.

Les vues d'ecran mobiles apparaissent sous la forme flowsery://ios/HomeScreen ou flowsery://android/HomeScreen dans votre tableau de bord. Vous pouvez filtrer le trafic mobile en utilisant flowsery:// dans le filtre de page.

Remarques importantes

Meme identifiant de site : Votre site web et votre application React Native doivent utiliser le meme identifiant de site Flowsery Analytics. Cela garantit que toutes les donnees arrivent dans un seul tableau de bord.
Meme userId : Le userId que vous transmettez a identify doit etre identique sur les deux plateformes. Nous recommandons d'utiliser l'email de l'utilisateur.
Identifier a chaque session : Appelez identify chaque fois que l'utilisateur demarre une nouvelle session (par ex. a l'ouverture de l'application si l'utilisateur est deja connecte) pour maintenir le lien.
Configuration du domaine : Dans les parametres de votre site Flowsery Analytics, assurez-vous que le domaine de votre application est liste dans les noms d'hote autorises.
Support hors-ligne : Le SDK React Native met en file d'attente les evenements lorsqu'il est hors-ligne et les envoie lorsque la connectivite est retablie, donc aucune donnee n'est perdue.