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 pagevsBasket Page. - Mapping only some screens and forgetting the rest.