PageView Events

Also referred as Screen Views, defines which page is being currently viewed by the user and from which page/screen did he reach there.

Overview

PageView events are essential for understanding user navigation patterns, popular screens, and user journey through your application. These events help you track which screens users visit most frequently and how they navigate between different parts of your app.

Creating PageView Events

Basic Usage

JavaScript

import Upshot from "react-native-upshotsdk";
// Create a pageview event
Upshot.createPageViewEvent(pageName, function (eventId) {
  console.log("PageView Event ID:", eventId);
});

TypeScript

import Upshot from "react-native-upshotsdk";
// Create a pageview event with proper typing
Upshot.createPageViewEvent(pageName, (eventId: string | null) => {
  if (eventId) {
    console.log("PageView Event ID:", eventId);
  } else {
    console.error("Failed to create pageview event");
  }
});

React Navigation Integration

For React Navigation v5/v6, you can automatically track screen views:

import { NavigationContainer } from "@react-navigation/native";
import Upshot from "react-native-upshotsdk";
const App = () => {
  const navigationRef = useRef();
  const routeNameRef = useRef();

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {
        routeNameRef.current = navigationRef.current.getCurrentRoute().name;
      }}
      onStateChange={async () => {
        const previousRouteName = routeNameRef.current;
        const currentRouteName = navigationRef.current.getCurrentRoute().name;

        if (previousRouteName !== currentRouteName) {
          // Track the screen view
          Upshot.createPageViewEvent(currentRouteName, function (eventId) {
            console.log(
              `Screen view tracked: ${currentRouteName}, Event ID: ${eventId}`
            );
          });
        }

        routeNameRef.current = currentRouteName;
      }}
    >
      {/* Your app content */}
    </NavigationContainer>
  );
};

Screen Component Integration

Track pageviews in individual screen components:

import React, { useEffect } from 'react';
import Upshot  from 'react-native-upshotsdk';

const HomeScreen = ({ navigation }) => {
  useEffect(() => {
    // Track screen view when component mounts
    Upshot.createPageViewEvent('HomeScreen', function(eventId) {
      console.log('Home screen viewed, Event ID:', eventId);
    });
  }, []);

  return (
    // Your screen content
  );
};

const ProfileScreen = ({ route }) => {
  useEffect(() => {
    const screenName = `ProfileScreen_${route.params?.userId || 'unknown'}`;

    Upshot.createPageViewEvent(screenName, function(eventId) {
      console.log(`Profile screen viewed: ${screenName}, Event ID:`, eventId);
    });
  }, [route.params]);

  return (
    // Your screen content
  );
};

Best Practices

1. Consistent Naming: Use a consistent naming convention for all screens
2. Meaningful Names: Use descriptive names that clearly identify the screen
3. Avoid Duplicates: Don't track the same screen view multiple times unnecessarily
4. Error Handling: Always handle the callback response

Validation

You can validate PageView events in the Dashboard Live Events section to ensure your events are being captured correctly.

Next Steps

• Custom Events - Learn how to track custom user interactions
• Attribution Events - Track campaign attribution data