Component-level event tracking
Wire event capture directly into your component handlers:
import { setEventProperties, setPageProperties } from 'zeo-collect';
import { Button } from 'react-native';
const ProductDetail = ({ name, price, size, color, navigation, onAddToCart }) => {
return (
<BottomButtons
onPress={() => {
setPageProperties({ page: "Product Detail" });
setEventProperties("Add To Cart", {
name,
price,
size,
color,
quantity: 1
});
onAddToCart();
navigation.navigate('Cart');
}}
/>
);
};
Identity patterns
Tie post-login behavior to a known user
import { setUserIdentities, setEventProperties } from 'zeo-collect';
const handleLogin = async (email, password) => {
await api.login(email, password);
setUserIdentities({
email,
loginid: "userA-123",
fpuid: "crm_42"
});
setEventProperties("login", { method: "password" });
};
All subsequent events carry those identities.
Differentiate two users on the same device
setUserIdentities ties events to the current identity until you clear them:
import { setUserIdentities, unSetUserIdentities } from 'zeo-collect';
setUserIdentities({ email: "alice@example.com" });
// ... Alice's activity
unSetUserIdentities();
setUserIdentities({ email: "bob@example.com" });
// ... Bob's activity
Let the package hash raw PII
import { initialiseZeoCollect, setUserIdentities } from 'zeo-collect';
initialiseZeoCollect({
android_write_key: "...",
ios_write_key: "...",
are_identities_hashed: false,
hash_identities: true
});
setUserIdentities({
email: "xyz@gmail.com", // hashed by package
crmID: "12345" // custom identity, sent as-is
});
Send pre-hashed identities
initialiseZeoCollect({
android_write_key: "...",
ios_write_key: "...",
are_identities_hashed: true
});
setUserIdentities({
email_sha256_lowercase: "32e19a491662fd86de7d3806b1199b76f0ee44e928d3475f05b0c8a59912c097",
crmID: "12345"
});
Common payloads
View product
import { setEventProperties } from 'zeo-collect';
setEventProperties("view_product", {
productID: "sku_123",
productName: "watch"
});
Add to cart
setEventProperties("addToCart", {
productID: "sku_123",
quantity: 1,
price: 29.99
});
Purchase
setEventProperties("purchase", {
orderID: "order_456",
total: 89.97,
currency: "EUR"
});
Logout
import { unSetUserIdentities } from 'zeo-collect';
unSetUserIdentities();
Send events with callbacks
All event functions accept an optional callback. Useful in dev for surfacing dispatch errors:
import { setEventProperties } from 'zeo-collect';
setEventProperties("Add_to_cart", { sku: "abc" }, (res) => {
if (res.status === "ERROR") {
console.warn("Event failed:", res.message);
}
});
Pause and resume
import { pauseCollection, resumeCollection } from 'zeo-collect';
pauseCollection();
// ... screen where no events should fire
resumeCollection();
Initialize from useEffect (App.js)
Best practice — initialize once on app mount and call SDK functions only after that. Using React Navigation? Mount this in your root App component, not inside a screen:
import React, { useEffect } from 'react';
import { initialiseZeoCollect } from 'zeo-collect';
import { NavigationContainer } from '@react-navigation/native';
const App = () => {
useEffect(() => {
initialiseZeoCollect({
android_write_key: process.env.ZEOTAP_ANDROID_KEY,
ios_write_key: process.env.ZEOTAP_IOS_KEY,
use_consent: true,
check_for_cmp: false
});
}, []);
return (
<NavigationContainer>
{/* ... */}
</NavigationContainer>
);
};
Contextual data captured automatically
You don’t need to send these explicitly — the underlying native SDKs append them to every event:
- Device ID (iOS ID / Android ID)
- IP address, telco carrier, network type, OS version
- Device manufacturer, model, version
- App name, app version
zi (SDK-generated user ID)
- AdID / IDFA (when permitted on each platform)
Last modified on June 22, 2026