Skip to content

Page Mapping Guide

For developers

How to map app route names to Segmentify page types so mobile and web campaigns stay aligned. Plain-language background: How Tracking Works.

Why page mapping matters

pageTypeMapping tells the SDK how your internal route names map to Segmentify page types.

Example:

  • App route key: ProductDetail
  • Mapped page type: Product Page

This mapping is used when page-view events are sent. If names are inconsistent, campaigns and reports may not match expected pages.

pageTypeMapping object structure

Add this object inside your SDK configuration:

const SEGMENTIFY_CONFIGURATION = {
pageTypeMapping: {
// app-route-name: segmentify-page-type
Home: 'Home Page',
Search: 'Search Page',
ProductDetail: 'Product Page',
CategoryListing: 'Category Page',
Cart: 'Basket Page',
Checkout: 'Checkout Page',
Success: 'Order Success Page',
},
loggerOptions: {
debugMode: true,
},
config: {
segmentifyApiUrl: 'https://per2.segmentify.com',
segmentifyPushUrl: 'https://psh2.segmentify.com',
domain: 'your-domain.com',
apiKey: 'your-api-key',
language: 'EN',
currency: 'EUR',
testMode: false,
},
};

Best practices

  • Keep keys equal to your real navigation route names.
  • Keep values exactly equal to your Segmentify page names.
  • Use one shared mapping source if multiple teams manage routes.
  • Update mapping immediately when route names change.

For best results, your page mapping must overlap with your web page configuration so the same campaigns run on the same pages across platforms.

If web uses Product Page, mobile should also use Product Page (not Product Detail Page).

Example: web and mobile alignment

If web page configuration is:

{
"Home": "Home Page",
"ProductDetail": "Product Page",
"Cart": "Basket Page"
}

Use the same values in mobile:

pageTypeMapping: {
Home: 'Home Page',
ProductDetail: 'Product Page',
Cart: 'Basket Page',
}

This keeps recommendation and push/in-app campaign targeting behavior consistent between web and mobile.

Common mistakes

  • Using route names as values (e.g. ProductDetail: 'ProductDetail').
  • Renaming mobile page labels without updating web config.
  • Typo differences like Basket page vs Basket Page.
  • Mapping only some screens and forgetting the rest.