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/omnisegment";

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.

App Unsubscribe / Logout

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
} from "@bebit-tech/omnisegment";


const Logout = ({navigation}: any) => {
  return (
    <View style={styles.ImageContainer}>
      <TouchableOpacity
            onPress={() => {
              OmniSegment.logout();
              const event = OSGEventBuilder.appUnsubscribe()
              event.location = 'app://Home'
              event.locationTitle = 'RN Test App @Home'
              OmniSegment.trackEvent(event);
              
              navigation.navigate("Login");

            }}
          >
      <Image
        source={require('../assets/app_images/avatar.png')}
        style={styles.Image}
      />
      </TouchableOpacity>
    </View>
  );
};


export default ProfilePic;

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/omnisegment";

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/omnisegment";

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/omnisegment";

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/omnisegment";

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.

For pages without products, create a product impression event using an empty OSGProduct list to track page views, ensuring complete user engagement analytics.

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

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

    const event = OSGEventBuilder.productImpression([])
    event.location = 'app://Home'
    event.locationTitle = 'RN Test App @Home without any product'
    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.

Submit a search

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

const searchCoffee = (search: string) => {
    if (search != "") {

      const event = OSGEventBuilder.search({search_string: 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/omnisegment";

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.

Add To Wishlist

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

const ToggleFavourite = (favourite: boolean, type: string, id: string) => {
    if (favourite) {
      deleteFromFavoriteList(type, id)
    } else {
      addToFavoriteList(type, id)

      const event = OSGEventBuilder.addToWishlist([{id, name: type}])
      event.location = 'app://Detail'
      event.locationTitle = 'RN Test App @Detail'
      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.

Remove from Cart

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

const decrementCartItemQuantityHandler = (id: string, size: string) => {
    decrementCartItemQuantity(id, size);
    calculateCartPrice();

    const products: [OSGProduct] = [{ id, name: size }];
    const event = OSGEventBuilder.removeFromCart(products)
    event.location = 'app://Cart'
    event.locationTitle = 'RN Test App @Cart'
    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.

Checkout

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

 useEffect(() => {
    OmniSegment.setCurrentPage("Cart");
    const products: [OSGProduct] = CartList.map((item: any) => ({id: item.id, name: item.name}));
    const event = OSGEventBuilder.checkout(products)
    event.location = 'app://Cart'
    event.locationTitle = 'RN Test App @Cart'
    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 detail Impressions

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

useEffect(() => {
    OmniSegment.setCurrentPage("Detail");

    const event = OSGEventBuilder.productImpression([{id: ItemOfIndex.id, name: ItemOfIndex.name}])
    event.location = 'app://Detail'
    event.locationTitle = 'RN Test App @Detail'
    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.

Purchases

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

 const buttonPressHandler = () => {
    setShowAnimation(true);
    addToOrderHistoryListFromCart();
    calculateCartPrice();

    const products: [OSGProduct] = CartList.map((item: any) => ({id: item.id, name: item.name}));
    const event = OSGEventBuilder.purchase(`transactionId-${test}`,amount, products)
    event.location = 'app://Payment'
    event.locationTitle = 'RN Test App @Payment'
    event.transactionShipping = "300"
    event.transactionTax = "500"

    OmniSegment.trackEvent(event);
   
    setTimeout(() => {
      setShowAnimation(false);
      navigation.navigate('Home');
    }, 2000);
  };

Browsing history

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

Custom Event

Please ensure the custom event predefined in OmniSegment as per the guidelines on Custom Event documentation

Syntax and Usage

import OmniSegment, {
  OSGEventBuilder,
  OSGProduct,
} from "@bebit-tech/omnisegment";

   return (
    <View style={styles.ScreenContainer}>
     {PaymentList.map((data: {name: string, icon: string, isIcon: boolean}) => (
            <TouchableOpacity
              key={data.name}
              onPress={() => {
                const event = OSGEventBuilder.custom('Reservation', JSON.stringify({time: "2023-06-07T06:09:29.167342+00:00", store: "bebit", number: "2"}))
                event.location = 'app://Payment'
                event.locationTitle = 'RN Test App @Payment'

                OmniSegment.trackEvent(event);
              }}>
              <PaymentMethod
                paymentMode={paymentMode}
                name={data.name}
                icon={data.icon}
                isIcon={data.isIcon}
              />
            </TouchableOpacity>
          ))}
    </View>
  );

Browsing history

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