Seguimiento de embudo de web a aplicacion

Rastrea tu embudo de usuario completo -- desde el momento en que alguien llega a tu sitio web hasta que usa tu aplicacion React Native -- todo dentro de un unico panel de Flowsery Analytics.

Esto es posible gracias a la identificacion de usuarios. Cuando identificas a un usuario con el mismo userId tanto en tu sitio web como en tu aplicacion, Flowsery Analytics vincula ambos perfiles de visitante, dandote una vista unificada del recorrido completo.

Como funciona

Un visitante llega a tu sitio web -- el script de seguimiento de Flowsery Analytics le asigna un visitorId almacenado en una cookie
El visitante se registra o inicia sesion en tu sitio web -- llamas a identify con su userId (ej. email)
La misma persona abre tu aplicacion React Native -- el SDK asigna un nuevo visitorId almacenado en AsyncStorage
Inicia sesion en la aplicacion -- llamas a identify con el mismo userId
Flowsery Analytics detecta el userId compartido y fusiona ambos perfiles de visitante, creando un recorrido multiplataforma completo

Requisitos previos

El script de seguimiento de Flowsery Analytics instalado en tu sitio web (comenzar)
El SDK de React Native de Flowsery Analytics instalado en tu aplicacion (guia de React Native)
Ambos deben usar el mismo ID de sitio web de Flowsery Analytics (flid_***)

Paso 1: Identificar usuarios en tu sitio web

Cuando un usuario se registra o inicia sesion en tu sitio web, llama a identify:

HTML

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

Agrega el fragmento de cola en tu <head> para que las llamadas de identify se capturen incluso antes de que el script principal se cargue.

Paso 2: Instalar el SDK de React Native

Sigue la guia de instalacion de React Native / Expo para agregar Flowsery Analytics a tu aplicacion. Asegurate de usar el mismo website ID que tu sitio 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>
  );
}

Paso 3: Identificar usuarios en tu aplicacion React Native

Cuando un usuario inicia sesion en tu aplicacion, llama a identify con el mismo userId que usaste en el sitio 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]);
}

Paso 4: Rastrear pantallas en tu aplicacion

Registra vistas de pantalla para que puedas construir embudos que abarquen tanto web como movil:

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

Construir un embudo de conversion multiplataforma

Una vez que tanto tu sitio web como tu aplicacion esten rastreando eventos e identificando usuarios, puedes crear un embudo de conversion en tu panel de Flowsery Analytics que abarque ambas plataformas. Por ejemplo:

Web -- Vista de pagina en / (landing page)
Web -- Vista de pagina en /pricing
Web -- Objetivo personalizado signup
Movil -- Vista de pantalla HomeScreen
Movil -- Objetivo personalizado upgrade_click

Esto te da visibilidad sobre donde los usuarios abandonan entre descubrir tu producto y convertirse en usuarios activos de la aplicacion.

Las vistas de pantalla moviles aparecen como flowsery://ios/HomeScreen o flowsery://android/HomeScreen en tu panel. Puedes filtrar el trafico movil usando flowsery:// en el filtro de pagina.

Notas importantes

Mismo website ID: Tanto tu sitio web como tu aplicacion React Native deben usar el mismo ID de sitio web de Flowsery Analytics. Esto asegura que todos los datos fluyan a un panel.
Mismo userId: El userId que pasas a identify debe ser identico en ambas plataformas. Recomendamos usar el email del usuario.
Identificar en cada sesion: Llama a identify cada vez que el usuario inicie una nueva sesion (ej. al abrir la aplicacion si el usuario ya esta logueado) para mantener el vinculo.
Configuracion de dominio: En la configuracion de tu sitio web en Flowsery Analytics, asegurate de que el dominio de tu aplicacion este listado en los hostnames permitidos.
Soporte offline: El SDK de React Native encola eventos mientras esta offline y los envia cuando se restaura la conectividad, por lo que no se pierden datos.