Send Action (Event) Examples

Prerequisites

• Import OmniSegment SDK in your React Native project.
• Ensure that the OmniSegment is properly initialized and configured.

App Open

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
} from "bebit-tech-react-native-app-sdk";

const App = () => {
  useEffect(() => {
    
    OmniSegment.setFCMToken("Test FCM Token from RN");
    OmniSegment.setAppId("TestAppId");
    OmniSegment.setAppName("TestAppName");
    OmniSegment.setDeviceId("TestDeviceId");
    const event = OSGEventBuilder.appOpen()
    event.location = 'app://LaunchApp' // you can set your deeplink here, if you have
    event.locationTitle = 'RN Test App @OpenApp'
    OmniSegment.trackEvent(event);
  }, []);
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name='Login' component={LoginScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.

Complete Registration

Syntax and Usage

• Tracking with Email:

import OmniSegment, {
  OSGEventBuilder,
  OSGRecommendRequest,
  OSGRecommendType,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const RegisterScreen = ({ navigation }: any) => {
  const handleRegister = () => {
    OmniSegment.setCurrentPage("Register");

    const event = OSGEventBuilder.completeRegistration({email: 'renee@bebit-tech.com'})
    event.location = 'app://Register' // you can set your deeplink here
    event.locationTitle = 'Register'
    OmniSegment.trackEvent(event);

    navigation.navigate("Tab", { screen: "Home" });
   };

 return (
   <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={handleLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
   </View>
    )
  };

• Tracking with Registration Type:

import OmniSegment, {
  OSGEventBuilder,
  OSGRecommendRequest,
  OSGRecommendType,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const RegisterScreen = ({ navigation }: any) => {
  const handleRegister = () => {
    
    OmniSegment.setCurrentPage("Register");

    const event = OSGEventBuilder.completeRegistration({regType: 'Google'});
    event.location = 'app://Register' // you can set your deeplink here, if you have
    event.locationTitle = 'Register'
    OmniSegment.trackEvent(event);

    navigation.navigate("Tab", { screen: "Home" });
   };

 return (
   <View style={styles.container}>
      <TouchableOpacity style={styles.button} onPress={handleLogin}>
        <Text style={styles.buttonText}>Login</Text>
      </TouchableOpacity>
   </View>
    )
  };

Explanation

• The label dictionary can include various keys like email or regeType. These keys can be customized based on the data you want to track.

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.

Add To Cart

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const CoffeCardAddToCart = ({
    id,
    index,
    name,
    roasted,
    imagelink_square,
    special_ingredient,
    type,
    prices,
  }: any) => {
    addToCart({
      id,
      index,
      name,
      roasted,
      imagelink_square,
      special_ingredient,
      type,
      prices,
    });
    calculateCartPrice();

    const products: [OSGProduct] = [{ id, name }];
    const event = OSGEventBuilder.addToCart(products)
    event.location = 'app://Home'
    event.locationTitle = 'RN Test App @Home'
    OmniSegment.trackEvent(event);

  };

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.

Product Impressions

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const HomeScreen = ({ navigation }: any) => {
  const CoffeeList = useStore((state: any) => state.CoffeeList);

  useEffect(() => {
    OmniSegment.login("omnisegment20240101")
    OmniSegment.setCurrentPage("Home");

    const products: [OSGProduct] = CoffeeList.map((i) => ({id: i.id, name: i.name}))
    const event = OSGEventBuilder.productImpression(products)
    event.location = 'app://Home'
    event.locationTitle = 'RN Test App @Home'
    OmniSegment.trackEvent(event);
  },[])

  return (
    ...
  );
};

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.

Submit a search

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const searchCoffee = (search: string) => {
    if (search != "") {
      ListRef?.current?.scrollToOffset({
        animated: true,
        offset: 0,
      });
      setCategoryIndex({ index: 0, category: categories[0] });
      setSortedCoffee([
        ...CoffeeList.filter((item: any) =>
          item.name.toLowerCase().includes(search.toLowerCase())
        ),
      ]);
      const event = OSGEventBuilder.search({label: search})
      event.location = 'app://Home'
      event.locationTitle = 'RN Test App @Home'
      OmniSegment.trackEvent(event);
    }
  };

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.

Product Clicks

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "bebit-tech-react-native-app-sdk";

const HomeScreen = ({ navigation }: any) => {

  return (
    <FlatList
          keyExtractor={(item) => item.id}
          renderItem={({ item }) => {
            return (
              <TouchableOpacity
                onPress={() => {
                  navigation.push("Details", {
                    index: item.index,
                    id: item.id,
                    type: item.type,
                  });

                  const event = OSGEventBuilder.productClicked([{id:item.id, name: item.name}])
                  event.location = 'app://Home'
                  event.locationTitle = 'RN Test App @Home'
                  OmniSegment.trackEvent(event);
                }}
              >
                <CoffeeCard
                  id={item.id}
                  index={item.index}
                  type={item.type}
                  roasted={item.roasted}
                  imagelink_square={item.imagelink_square}
                  name={item.name}
                  special_ingredient={item.special_ingredient}
                  average_rating={item.average_rating}
                  price={item.prices[2]}
                  buttonPressHandler={CoffeCardAddToCart}
                />
              </TouchableOpacity>
            );
          }}
        />
  );
};

Browsing history

• You can find the incoming data in OmniSegment under the customer page, in the corresponding user details, and browsing history.