Skip to main content
Sends a browse results loaded event to Constructor.io’s API. This tracks when users view a browse or category page, providing insights into how users navigate your product catalog.

​
Method Signature

constructorio.tracker.trackBrowseResultsLoaded(parameters, networkParameters?)

​
Parameters

​
parameters
object
required
Parameters for the browse results event
​
networkParameters
object
Optional parameters for the network request

​
Returns

Returns true on success or an Error object if validation fails.

​
Examples

​
Basic Example

import ConstructorIOClient from '@constructor-io/constructorio-client-javascript';

const constructorio = new ConstructorIOClient({
  apiKey: 'YOUR_API_KEY',
});

// Track browse results loaded
constructorio.tracker.trackBrowseResultsLoaded({
  url: window.location.href,
  filterName: 'brand',
  filterValue: 'Nike',
  items: [
    { itemId: 'SHOE-001' },
    { itemId: 'SHOE-002' },
    { itemId: 'SHOE-003' },
  ],
  resultCount: 45,
});

​
Complete Example

// Track browse results with all parameters
constructorio.tracker.trackBrowseResultsLoaded({
  url: window.location.href,
  filterName: 'category',
  filterValue: 'Running Shoes',
  items: [
    { itemId: 'SHOE-001' },
    { itemId: 'SHOE-002' },
  ],
  resultCount: 45,
  resultPage: 2,
  resultId: '019927c2-f955-4020-8b8d-6b21b93cb5a2',
  selectedFilters: {
    brand: ['Nike', 'Adidas'],
    color: ['blue'],
    size: ['10', '11'],
  },
  sortOrder: 'ascending',
  sortBy: 'price',
  section: 'Products',
});

​
Integration Example

// Track after loading category page
async function loadCategoryPage(category) {
  const response = await constructorio.browse.getBrowseResults(
    'category',
    category
  );
  
  // Extract items from response
  const items = response.results.map(item => ({
    itemId: item.data.id,
  }));
  
  // Track browse results loaded
  constructorio.tracker.trackBrowseResultsLoaded({
    url: window.location.href,
    filterName: 'category',
    filterValue: category,
    items: items,
    resultCount: response.total_num_results,
    resultId: response.result_id,
  });
  
  // Render results...
}

​
Example with Multiple Filters

// Track browse page with multiple active filters
constructorio.tracker.trackBrowseResultsLoaded({
  url: window.location.href,
  filterName: 'category',
  filterValue: 'Laptops',
  items: [
    { itemId: 'LAPTOP-001', itemName: 'Pro Laptop 15"' },
    { itemId: 'LAPTOP-002', itemName: 'Air Laptop 13"' },
  ],
  resultCount: 12,
  selectedFilters: {
    category: ['Laptops'],
    brand: ['Apple', 'Dell'],
    price: ['1000-2000'],
    screen_size: ['13", '15"'],
  },
  sortBy: 'price',
  sortOrder: 'ascending',
});

​
When to Use

Call trackBrowseResultsLoaded() when:
  • A category/collection page loads
  • A user navigates to a brand page
  • Browse results are filtered or sorted
  • Pagination changes on a browse page
  • Any faceted navigation page is displayed

​
Important Notes

  • The filterName and filterValue identify the primary browse filter
  • For a category page, use filterName: 'category' and filterValue: 'Category Name'
  • For a brand page, use filterName: 'brand' and filterValue: 'Brand Name'
  • Always include the resultId from Constructor.io’s response
  • The items array can contain up to 100 items (automatically truncated)
  • Re-track when filters, sorting, or pagination changes

​
Filter Name Examples

Common filterName values:
  • "category" - For category/collection pages
  • "brand" - For brand pages
  • "collection" - For curated collections
  • "group_id" - For product groups

​
Selected Filters Format

The selectedFilters object should map filter names to arrays of values: 
{
  brand: ['Nike', 'Adidas'],
  color: ['blue', 'red'],
  size: ['10'],
  price: ['50-100'],
}

​
Item Object Format

Each item in the items array can include:
  • itemId (required): Unique product identifier
  • itemName (optional): Product name
  • variationId (optional): Variation identifier

​
Relationship with Other Events

Track these events in sequence:
  1. trackBrowseResultsLoaded - When browse page displays (this method)
  2. trackBrowseResultClick - When user clicks a result
  3. trackConversion - If the click leads to a conversion

​
API Endpoint

This method sends a POST request to: 
/v2/behavioral_action/browse_result_load

Build docs developers (and LLMs) love

Get started for freeTalk to us