Skip to main content

​
Method Signature

constructorio.tracker.trackItemDetailLoad(parameters, networkParameters?)
Tracks when a user views a product detail page. This helps Constructor.io understand which products users are interested in and improve personalization.

​
Parameters

​
parameters
object
required
The tracking parameters.
​
networkParameters
object
Network-specific parameters.

​
Returns

Returns true on success or an Error object on failure.

​
Examples

​
Basic Usage

constructorio.tracker.trackItemDetailLoad({
  itemName: 'Men\'s Running Shoes',
  itemId: 'shoe-123',
  url: window.location.href
});

​
With Product Variation

constructorio.tracker.trackItemDetailLoad({
  itemName: 'T-Shirt',
  itemId: 'shirt-456',
  url: window.location.href,
  variationId: 'size-l-color-blue'
});

​
With Analytics Tags

constructorio.tracker.trackItemDetailLoad({
  itemName: 'Laptop',
  itemId: 'laptop-789',
  url: window.location.href,
  analyticsTags: {
    source: 'email_campaign',
    campaign_id: 'spring_sale_2024'
  }
});

​
In a React Component

import { useEffect } from 'react';

function ProductDetailPage({ product }) {
  useEffect(() => {
    constructorio.tracker.trackItemDetailLoad({
      itemName: product.name,
      itemId: product.id,
      url: window.location.href,
      variationId: product.selectedVariation?.id
    });
  }, [product]);
  
  return (
    <div>
      <h1>{product.name}</h1>
      {/* Product details */}
    </div>
  );
}

​
In a Vue Component

export default {
  mounted() {
    this.trackProductView();
  },
  methods: {
    trackProductView() {
      this.$constructorio.tracker.trackItemDetailLoad({
        itemName: this.product.name,
        itemId: this.product.id,
        url: window.location.href
      });
    }
  }
}

​
When to Use

Track item detail loads:
  • When a product detail page is first rendered
  • After a user selects a product variant (track with the new variationId)
  • When a product modal or quick view is opened
This event helps Constructor.io:
  • Improve personalized recommendations
  • Understand product interest and engagement
  • Track user browsing patterns

​
Best Practices

  1. Track on Page Load: Call this method when the product detail page loads or when a product modal opens.
  2. Include Variation ID: If the product has variants (size, color, etc.), include the selected variation.
  3. Use Consistent IDs: Ensure itemId matches the product ID used in your catalog and other tracking events.
  4. Track Variation Changes: If a user changes the product variant, track a new item detail load event with the updated variationId.

​
Error Handling

try {
  const result = constructorio.tracker.trackItemDetailLoad({
    itemName: 'Product Name',
    itemId: 'product-123',
    url: window.location.href
  });
  
  if (result instanceof Error) {
    console.error('Tracking failed:', result);
  }
} catch (error) {
  console.error('Error tracking item detail load:', error);
}

Build docs developers (and LLMs) love

Get started for freeTalk to us