---
title: "Tracking Events: Quick Reference with JS & React Native Examples"
slug: "tracking-events-quick-reference-with-js-react-native-examples"
updated: 2025-10-28T13:35:27Z
published: 2025-10-28T13:35:27Z
canonical: "docs.mapp.com/tracking-events-quick-reference-with-js-react-native-examples"
---

> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mapp.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Tracking Events: Quick Reference with JS & React Native Examples

A quick reference to Mapp Fashion tracking events with concise JS and React Native examples: from page views and identification, through PDP/PLP, basket and order events, to widget interactions like carousels, tabs, and item clicks.

| Function | Function Call / Arguments JS | Function Call / Arguments RN |
| --- | --- | --- |
| Page View | Dressipi('track', 'pageView') | - |
| identify | ```javascript Dressipi('track', 'identify', { email: 'test@mapp.com', customerId: 'abc' }); ``` | ```javascript export type Identification = { customerId?: string; email?: string; }; ``` |
| pdp/item view | ```javascript Dressipi('track', 'pdp', { // instead of 'pdp' you could use 'itemView' sku: 'abc', productCode: 'def' }); ``` | ```javascript export const productDetailPageView = async ( item: TrackingItem ) ``` return: ```javascript item: { product_code: item.productCode, sku: item.sku, price: item.price, currency: item.currency, barcode: item.barcode, size: item.size, item_name: item.name, item_brand: item.brand, }, ``` |
| add/remove from basket | ```javascript Dressipi('track', 'addToBasket', { sku: 'abc', quantity: 1, name: 'def', category: 'cat', unitPrice: 9.99, currency: 'EUR' }); Dressipi('track', 'removeFromBasket', { sku: 'abc', quantity: 1, name: 'def', category: 'cat', unitPrice: 9.99, currency: 'EUR' }); ``` | ```javascript //add export const productDetailPageView = async ( item: TrackingItem ): //return: item: { product_code: item.productCode, sku: item.sku, price: item.price, currency: item.currency, barcode: item.barcode, size: item.size, item_name: item.name, item_brand: item.brand, }, //remove export const removeFromBasket = async ( item: TrackingItem ) //return: data: { sku: item.sku, name: item.name, category: item.category, unitPrice: item.price, quantity: item.quantity, currency: item.currency, },p ``` |
| plp | ```javascript Dressipi("track", "plp", { items: [ { sku: "XYZ123", productCode: "XYZ" }, { sku: "ABC456", productCode: "ABC" }], filters: [ { name: "Style", selected: ["value1", "value2"] } ], page: { number: 1, }, }); ``` | ```javascript export type ProductListPageEvent = { page: { number: number; }; items: ProductListPageItem[]; filters: ProductListPageFilter[]; }; ``` |
| order | ```javascript const user = {email: 'test@mapp.com', customerId: 'abc'}; const lineItem = { sku: 'abc', name: 'ABC product', price: 9.99, quantity: 1, currency: 'EUR' } const order = { orderId: 'xyz', total: 9.99, tax: 1.50, shipping: 0.99, currency: 'EUR', lineItems: [lineItem] } Dressipi('track', 'order', order, user); ``` | ```javascript export type Order = { orderId: string; totalValue: number; items: OrderLine[]; affiliation?: string; taxValue?: number; shipping?: number; city?: string; state?: string; country?: string; currency?: string; }; ``` |
| carouselNavigate (for widgets only) | ```javascript Dressipi('track', 'carouselNavigate', { requestId: 'someUUID', direction: 'next', parentPageViewId: 'SnowplowParentPageViewUUID' // optional }); ``` | n.a. |
| carouselPaginate (for widgets only) | ```javascript Dressipi('track', 'carouselPaginate', { requestId: 'someUUID', tab_name: 123, parentPageViewId: 'SnowplowParentPageViewUUID' // optional }); ``` | n.a. |
| tabClick | ```javascript Dressipi('track', 'tabClick', { tabName: 'test', requestId: 'someUUID', parentPageViewId: 'SnowplowParentPageViewUUID' // optional }); ``` | ```javascript function TabComponent({ activeTab }) { // Track tab click when component mounts useDressipiTabClickTracking({ request_id: '1234567890', tab_name: 'tab1', }); return ( <View> <TouchableOpacity> <Text>Tab 1</Text> </TouchableOpacity> </View> ); } ``` |
| itemClickQuickView | ```javascript Dressipi('track', 'itemClickQuickView', { setId: '44ff586f-ac79-4810-bbac-146f49f02f9c', itemId: 123, requestId: 'someUUID', parentPageViewId: 'SnowplowParentPageViewUUID' // optional }); ``` | ```javascript function QuickViewModal({ item }) { // Track item click in quick view when component mounts useDressipiItemClickQuickViewTracking({ request_id: '1234567890', dressipi_item_id: 1, related_items_set_id: '1234567890', }); return ( <Modal> <Text>{item.name}</Text> <Text>${item.price}</Text> </Modal> ); } ``` |
| itemClickPDP | ```javascript Dressipi('track', 'itemClickPDP', { setId: '44ff586f-ac79-4810-bbac-146f49f02f9c', itemId: 123, requestId: 'someUUID', parentPageViewId: 'SnowplowParentPageViewUUID' // optional }); ``` | ```javascript function RelatedItemsSection({ relatedItems }) { // Track item click on PDP when component mounts useDressipiItemClickPdpTracking({ request_id: '1234567890', dressipi_item_id: 1, related_items_set_id: '1234567890', }); return ( <View> <Text>Related Items</Text> {relatedItems.map(item => ( <TouchableOpacity key={item.id}> <Text>{item.name}</Text> </TouchableOpacity> ))} </View> ); } ``` |