Tracking Events: Quick Reference with JS & React Native Examples

Page View

Dressipi('track', 'pageView')

-

identify

Dressipi('track', 'identify', {  
  email: 'test@mapp.com',
  customerId: 'abc' 
});

export type Identification = {
  customerId?: string;
  email?: string;
};

pdp/item view

Dressipi('track', 'pdp', { // instead of 'pdp' you could use 'itemView'     
  sku: 'abc',     
  productCode: 'def' 
});

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,
},

add/remove from basket

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' 
});

//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

Dressipi("track", "plp", {
  items: [
    { sku: "XYZ123", productCode: "XYZ" }, 
    { sku: "ABC456", productCode: "ABC" }],
  filters: [
    { name: "Style", selected: ["value1", "value2"] }
  ],
  page: {
    number: 1,
  },
});

export type ProductListPageEvent = {
  page: {
    number: number;
  };
  items: ProductListPageItem[];
  filters: ProductListPageFilter[];
};

order

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);

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)

Dressipi('track', 'carouselNavigate', {
  requestId: 'someUUID',
  direction: 'next',
  parentPageViewId: 'SnowplowParentPageViewUUID' // optional
});

n.a.

carouselPaginate

(for widgets only)

Dressipi('track', 'carouselPaginate', {
  requestId: 'someUUID',
  tab_name: 123,
  parentPageViewId: 'SnowplowParentPageViewUUID' // optional
});

n.a.

tabClick

Dressipi('track', 'tabClick', {
  tabName: 'test',
  requestId: 'someUUID',
  parentPageViewId: 'SnowplowParentPageViewUUID' // optional
});

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

Dressipi('track', 'itemClickQuickView', {
      setId: '44ff586f-ac79-4810-bbac-146f49f02f9c',
      itemId: 123,
      requestId: 'someUUID',
      parentPageViewId: 'SnowplowParentPageViewUUID' // optional
});

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

Dressipi('track', 'itemClickPDP', {
      setId: '44ff586f-ac79-4810-bbac-146f49f02f9c',
      itemId: 123,
      requestId: 'someUUID',
      parentPageViewId: 'SnowplowParentPageViewUUID' // optional
});

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>
  );
}