Web to app funnel tracking

Track your entire user funnel -- from the moment someone lands on your website to when they use your React Native app -- all within a single Flowsery Analytics dashboard.

This is made possible by user identification. When you identify a user with the same user_id on both your website and your app, Flowsery Analytics links both visitor profiles together, giving you a unified view of the complete journey.

How it works

Web to app funnel tracking flow

  1. A visitor arrives at your website -- the Flowsery Analytics tracking script assigns them a visitorId stored in a cookie
  2. The visitor signs up or logs in on your website -- you call identify with their user_id (e.g. email)
  3. The same person opens your React Native app -- the SDK assigns a new visitorId stored in AsyncStorage
  4. They log in to the app -- you call identify with the same user_id
  5. Flowsery Analytics detects the shared user_id and merges both visitor profiles, creating a complete cross-platform journey

Prerequisites

  • The Flowsery Analytics tracking script installed on your website (get started)
  • The Flowsery Analytics React Native SDK installed in your app (React Native guide)
  • Both must use the same Flowsery Analytics website ID (flid_***)

Step 1: Identify users on your website

When a user signs up or logs in on your website, call identify:

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

Add the queue snippet in your <head> so identify calls are captured even before the main script loads.

Step 2: Install the React Native SDK

Follow the React Native / Expo installation guide to add Flowsery Analytics to your app. Make sure to use the same website ID as your website:

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

Step 3: Identify users in your React Native app

When a user logs in to your app, call identify with the same user_id you used on the website:

import { useFlowsery } from 'flowsery/react-native';

export function useIdentifyUser(user) {
  const client = useFlowsery();

  useEffect(() => {
    if (user && client) {
      // Same user_id as the website -- this links both profiles
      client.identify(user.email, {
        name: user.name,
      });
    }
  }, [user, client]);
}

Step 4: Track screens in your app

Record screen views so you can build funnels that span both web and mobile:

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

Build a cross-platform conversion funnel

Once both your website and app are tracking events and identifying users, you can create a conversion funnel in your Flowsery Analytics dashboard that spans both platforms. For example:

  1. Web -- Pageview on / (landing page)
  2. Web -- Pageview on /pricing
  3. Web -- Custom goal signup
  4. Mobile -- Screen view HomeScreen
  5. Mobile -- Custom goal upgrade_click

This gives you visibility into where users drop off between discovering your product and becoming active app users.

Mobile screen views appear as flowsery://ios/HomeScreen or flowsery://android/HomeScreen in your dashboard. You can filter mobile traffic using flowsery:// in the page filter.

Important notes

  • Same website ID: Both your website and React Native app must use the same Flowsery Analytics website ID. This ensures all data flows to one dashboard.
  • Same user_id: The user_id you pass to identify must be identical on both platforms. We recommend using the user's email.
  • Identify on every session: Call identify each time the user starts a new session (e.g. on app open if the user is already logged in) to maintain the link.
  • Domain configuration: In your Flowsery Analytics website settings, make sure your app's domain is listed in the allowed hostnames.
  • Offline support: The React Native SDK queues events while offline and sends them when connectivity is restored, so no data is lost.