Skip to main content

Context Web Object

Overview​

The context web object contains detailed information about web browser context for events collected through JavaScript implementations. This object is specifically designed for client-side tracking in web browsers, providing essential page and environment information that enables comprehensive tracking and analytics for websites and Single Page Applications (SPAs).

Each context web object captures the browser environment, page details, and navigation context at the time of event occurrence, enabling accurate attribution and user journey tracking across web interactions.

Core Structure​

The context web object consists of several logical groups of properties:

  • Page Information - URL, page type, and navigation details
  • Environment Configuration - Development vs production environment settings
  • Browser Context - Client-side specific data collection parameters

Complete Reference​

context object

url string required-if-applicable

info

Complete URL of the current page including all parameters

SPA Applications: context.url is particularly valuable for Single Page Applications where URL changes don’t automatically trigger page context updates. Manual implementation ensures accurate tracking of page transitions and user navigation within SPA frameworks.

url:"https://shop.example.com/products/laptop?color=silver&storage=512gb&utm_source=google"
warning

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

info

Type of page (product, home ...)

page_type: "product"

environment string recommended

info

Allowed values: prod, dev

environment: "prod"

Implementation Examples​

{
  // Complete page context for product page
  url: "https://shop.example.com/products/wireless-headphones?color=black&size=standard&utm_source=google&utm_medium=cpc&utm_campaign=summer_sale",
  page_type: "product",
  environment: "prod"
}

Page Types​

The page_type field categorizes pages for tracking and analytics:

E-commerce page types for online stores:

{
  page_type: "home",           // Homepage
  page_type: "product",        // Product detail pages
  page_type: "category",       // Product listing/category pages
  page_type: "cart",           // Shopping cart page
  page_type: "checkout",       // Checkout process pages
  page_type: "thankyou",       // Order confirmation page
  page_type: "search"          // Search results pages
}

URL Structure and Parameters​

Context web captures complete URLs including query parameters for comprehensive tracking:

// Complete URL with marketing attribution
{
  url: "https://shop.example.com/products/laptop?color=silver&storage=512gb&utm_source=google&utm_medium=cpc&utm_campaign=back_to_school&utm_content=laptop_ad&utm_term=gaming+laptop"
}

// SPA route with application state
{
  url: "https://app.example.com/projects/123/tasks?status=active&assigned_to=me&sort=priority&view=kanban"
}

// E-commerce category with filters
{
  url: "https://store.example.com/electronics/phones?brand=apple&price_min=500&price_max=1000&rating=4&in_stock=true"
}

Environment Configuration​

The environment field distinguishes between development and production contexts:

Production environment for live website tracking:

{
  url: "https://shop.example.com/products/wireless-mouse",
  page_type: "product",
  environment: "prod"
}

Characteristics:

  • Live customer traffic
  • Real transaction data
  • Production analytics tracking
  • Customer behavior analysis

Single Page Application (SPA) Support​

Context web is essential for SPA implementations where URL changes don't trigger automatic page loads:

Manual Context Updates​

// Update context when SPA route changes
window.reshape = window.reshape || [];

// Navigation to new route
reshape.push({
  event: {
    name: "page_viewed",
    value: 0,
    currency: "USD"
  },
  context: {
    url: "https://app.example.com/new-route?param=value",
    page_type: "dashboard",
    environment: "prod"
  }
});

Automatic SPA Tracking​

// Listen for route changes in React Router
import { useLocation } from 'react-router-dom';

function usePageTracking() {
  const location = useLocation();
  
  useEffect(() => {
    reshape.push({
      event: {
        name: "page_viewed",
        value: 0,
        currency: "USD"
      },
      context: {
        url: window.location.href,
        page_type: getPageType(location.pathname),
        environment: "prod"
      }
    });
  }, [location]);
}

Privacy and URL Parameters​

Sensitive Information Handling​

Context web automatically captures all URL parameters, which may contain sensitive information:

// URLs may contain sensitive data
{
  url: "https://app.example.com/account?user_id=12345&session_token=abc123&[email protected]"
}

Privacy Considerations:

  • Personal Identifiers - User IDs, email addresses, phone numbers
  • Session Data - Authentication tokens, session IDs
  • Private Information - Order details, account information
  • Tracking Parameters - Some UTM parameters may contain sensitive data

URL Parameter Filtering​

Implement URL filtering for privacy compliance:

// Filter sensitive parameters before tracking
function sanitizeUrl(url) {
  const urlObj = new URL(url);
  const sensitiveParams = ['session_token', 'auth_key', 'user_id', 'email'];
  
  sensitiveParams.forEach(param => {
    urlObj.searchParams.delete(param);
  });
  
  return urlObj.toString();
}

// Use sanitized URL in context
reshape.push({
  context: {
    url: sanitizeUrl(window.location.href),
    page_type: "account",
    environment: "prod"
  }
});

Usage in Event Tracking​

The context web object is used across all web-based event implementations:

Best Practices​

Data Quality​

  • Complete URLs - Include full URLs with all relevant parameters
  • Accurate Page Types - Use consistent page type classification
  • Environment Separation - Properly distinguish dev from production traffic
  • Regular Validation - Monitor context data for accuracy and completeness

Performance Optimization​

  • Minimal Processing - Capture context data efficiently without blocking page load
  • Async Implementation - Use non-blocking context collection methods
  • URL Optimization - Consider URL length limits for very long parameter strings
  • Cache Strategy - Cache page type mappings for better performance

Privacy Compliance​

  • Parameter Filtering - Remove sensitive information from URLs before tracking
  • Consent Management - Respect user privacy preferences for URL tracking
  • Data Minimization - Collect only necessary URL parameters for analytics
  • Audit Trail - Maintain logs of context data collection for compliance

SPA Implementation​

  • Route Change Detection - Implement proper route change listening
  • State Management - Maintain context consistency across SPA navigations
  • Manual Updates - Ensure context updates with every significant route change
  • History API Integration - Work with browser history for back/forward navigation

Integration with Other Objects​

Context web works alongside other data objects for comprehensive tracking:

// Complete event with context web
{
  event: {
    name: "product_viewed",
    value: 299.99,
    currency: "USD",
    id: "VIEW_12345"
  },
  context: {
    url: "https://shop.example.com/products/wireless-headphones?color=black",
    page_type: "product",
    environment: "prod"
  },
  products: [{
    id: "HEADPHONES_001",
    name: "Wireless Headphones",
    price: 299.99
  }],
  user: {
    id: "USER_123",
    email: ["[email protected]"]
  }
}