Page Viewed
Fire the page_viewed event when a Single Page Application (SPA) navigates to a new route — React, Vue, Angular, Svelte and similar frameworks update the URL via the History API without triggering a full page reload, so the standard page-view detection does not fire automatically. Push this event on every route change to keep page-view counts accurate.
For traditional multi-page websites, you do not need to fire this event manually — page views are detected automatically on full page loads.
This event is the DATA Reshape equivalent of the standard page-view event in every major advertising and analytics platform — push it once and Reshape fans it out to every connected destination with the correct platform-specific name and field mapping, so you do not need to fire gtag, fbq, ttq or other tracking function calls in parallel.
- Google Analytics 4 —
page_view(withpage_location,page_title). - Google Ads — page-view signal used for remarketing audiences.
- Meta Pixel / Meta Conversions API —
PageView(with source URL). - TikTok Pixel / TikTok Events API —
Pageview(with source URL). - Other connected destinations — mapped automatically based on each destination's native schema.
A single Reshape event can produce one or more native events per destination, with different characteristics depending on each website's destination configuration (active pixels, server endpoints, event-mapping rules).
Complete Reference
The page_viewed event accepts the following objects and fields.
event object required
name string required
Use only static value page_viewed for event.name. DATA Reshape maps this to page_view (GA4), PageView (Meta), and Pageview (TikTok) automatically.
name: "page_viewed"
value number required
Typically 0 for page views.
value: 0
currency string required
Currency code, ISO 4217 three-letter format.
currency: "USD"
id string
Optional page-view event identifier.
id: "pv_abc123"
context object required
Must include the current route URL for SPA tracking. Optionally include page_type for analytics segmentation.
View complete Context Object documentation
url string required-if-applicable
Collected automatically for standard websites. Required only for SPA applications where URL changes don't trigger automatic page context updates.
url:"https://example.com/products/prod_abc123?utm_source=example"
URL Parameter Sensitivity: Be mindful of sensitive information in URLs. Query parameters may contain personal identifiers, session tokens, or private information that should be handled according to privacy regulations.
page_type string recommended
Type of page (product, home ...)
page_type: "product"
environment string recommended
Allowed values: prod, dev
environment: "prod"
user object recommended
id string recommended
Unique customer identifier in your system.
id: "cust_abc123"
email string recommended
Customer email address in plaintext. Do not send pre-hashed values — DATA Reshape automatically normalizes and hashes before sending to destinations.
email: "[email protected]"
phone string recommended
Customer phone number in E.164 format (plaintext). Do not send pre-hashed values — DATA Reshape automatically normalizes and hashes before sending to destinations.
phone: "+10000000000"
first_name string recommended
Customer first name
first_name: "Example First Name"
last_name string recommended
Customer last name
last_name: "Example Last Name"
country string
Country name or ISO country code
country: "US"
region string recommended
State, province, or region name
region: "Example Region"
city string recommended
City or locality name
city: "Example City"
street string
Street address including number
street: "123 Sample Street"
postal_code string
Postal code or ZIP code
postal_code: "00000"
orders_total_number number recommended
Cumulative number of orders placed by this user
orders_total_number: 5
orders_canceled_number number recommended
Cumulative number of orders placed and canceled by this user
orders_canceled_number: 0
orders_total_value number recommended
Cumulative lifetime user orders value (decimal format: 2500.50)
orders_total_value: 1234.99
orders_refunded_value number recommended
Cumulative lifetime user orders value canceled (decimal format: 2500.50)
orders_refunded_value: 250.99
predicted_value number
Predicted lifetime value of a customer for your business
predicted_value: 100.99
created_at number recommended
Timestamp in milliseconds since Unix epoch representing the first time the user was recorded
created_at: 1754926521690
properties object recommended
Custom Customer Properties Examples
Use the properties object to store custom user attributes, with property names defined by each business as needed, that enable advanced segmentation, personalization, and analytics across your marketing campaigns.
- E-commerce Customer
- B2B Lead/Customer
- Subscription Service
- Content Platform
properties: {
customer_type: "returning",
membership_level: "platinum",
preferred_category: ["electronics", "fashion"],
last_purchase_date: "2024-12-15",
average_order_value: "350.00",
payment_method_preference: "card",
registration_date: "2023-06-15"
}
properties: {
company_size: "enterprise",
industry: "fintech",
job_title: "marketing_director",
decision_maker: "true",
budget_range: "50000-100000",
lead_source: ["linkedin", "webinar"],
qualification_status: "qualified",
sales_stage: "proposal"
}
properties: {
subscription_tier: "premium",
billing_cycle: "annual",
feature_usage: ["analytics", "reporting", "api"],
trial_user: "false",
renewal_date: "2025-06-30",
support_level: "priority",
usage_frequency: "daily"
}
properties: {
content_preferences: ["technology", "business"],
engagement_level: "high",
newsletter_subscriber: "true",
social_media_follower: "true",
content_consumption: "premium",
device_preference: ["mobile", "desktop"],
timezone: "Example/Timezone"
}
Examples
The examples below show a complete page_viewed payload and a minimal payload with only the required fields.
- Complete
- Minimal
window.reshape = window.reshape || [];
reshape.push({
"event": {
"name": "page_viewed",
"value": 0,
"currency": "USD",
"id": "pv_abc123"
},
"context": {
"url": "https://example.com/dashboard/analytics",
"page_type": "dashboard",
"environment": "prod"
},
"user": {
"id": "cust_abc123",
"email": "[email protected]",
"country": "US"
}
});
window.reshape = window.reshape || [];
reshape.push({
"event": {
"name": "page_viewed",
"value": 0,
"currency": "USD"
},
"context": {
"url": "https://example.com/dashboard/analytics"
}
});
Custom properties (event.properties, user.properties, products[*].properties) are fully processed server-side. On browser-side pixels and tags, only a subset may be available. Server-side processing can also enrich the outgoing payload with additional parameters derived from context and data quality.
SPA Implementation
Hook into your router and call reshape.push({ event: { name: "page_viewed" }, ... }) on every successful route transition. Examples:
- React Router — subscribe to
useLocation()orhistory.listen()and fire on change. - Vue Router —
router.afterEach()hook. - Angular Router —
Router.events.subscribe()filtering onNavigationEnd. - Svelte / Nuxt / Next.js — equivalent route-change hooks for each framework.
Pass the new URL as context.url so destinations record the correct page.
Best Practices
- Fire only for SPA route changes — for full page loads on multi-page sites, page views are detected automatically.
- Always pass the new
context.url— this is what destinations record as the page URL. - Set
context.page_typewhen possible — enables clean segmentation in destinations that support page-type filtering. - Fire after the route transition completes — wait until the new view is rendered, not on intent-to-navigate.
- Avoid duplicate page views — make sure your router hook fires exactly once per route change, not on every state update.