Skip to main content

​
Method Signature

constructorio.tracker.trackRecommendationView(parameters, networkParameters?)
Tracks when recommendation results are viewed by the user. This is similar to trackRecommendationResultsLoaded but provides more granular control over what constitutes a “view”.

​
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

const recommendations = await constructorio.recommendations.getRecommendationResults('home-page-recs');

constructorio.tracker.trackRecommendationView({
  url: window.location.href,
  podId: 'home-page-recs',
  numResultsViewed: 4,
  items: recommendations.response.results.slice(0, 4).map(result => ({
    itemId: result.data.id,
    itemName: result.value
  })),
  resultCount: recommendations.response.total_num_results,
  resultId: recommendations.result_id
});

​
With Intersection Observer (Viewport Tracking)

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const visibleItems = getVisibleRecommendations();
      
      constructorio.tracker.trackRecommendationView({
        url: window.location.href,
        podId: 'pdp-recommendations',
        numResultsViewed: visibleItems.length,
        items: visibleItems.map(item => ({
          itemId: item.id,
          itemName: item.name
        })),
        resultId: recommendationResultId
      });
      
      observer.disconnect();
    }
  });
}, { threshold: 0.5 });

const recsContainer = document.getElementById('recommendations');
observer.observe(recsContainer);

class RecommendationCarousel {
  constructor(podId, recommendations) {
    this.podId = podId;
    this.recommendations = recommendations;
    this.currentSlide = 0;
    this.viewedItems = new Set();
  }
  
  onSlideChange(newSlide) {
    this.currentSlide = newSlide;
    const visibleItems = this.getVisibleItems();
    
    // Track newly visible items
    visibleItems.forEach(item => this.viewedItems.add(item.id));
    
    constructorio.tracker.trackRecommendationView({
      url: window.location.href,
      podId: this.podId,
      numResultsViewed: this.viewedItems.size,
      items: Array.from(this.viewedItems).map(id => {
        const item = this.recommendations.find(r => r.data.id === id);
        return {
          itemId: item.data.id,
          itemName: item.value
        };
      })
    });
  }
  
  getVisibleItems() {
    // Return items visible in current carousel slide
    return this.recommendations.slice(this.currentSlide * 4, (this.currentSlide + 1) * 4);
  }
}

​
Lazy-Loaded Recommendations

async function loadRecommendations() {
  const recs = await constructorio.recommendations.getRecommendationResults('related-products');
  
  renderRecommendations(recs.response.results);
  
  // Track after a delay to ensure DOM is rendered and visible
  setTimeout(() => {
    const visibleCount = countVisibleRecommendations();
    
    constructorio.tracker.trackRecommendationView({
      url: window.location.href,
      podId: 'related-products',
      numResultsViewed: visibleCount,
      resultId: recs.result_id
    });
  }, 500);
}

​
With Analytics Tags

constructorio.tracker.trackRecommendationView({
  url: window.location.href,
  podId: 'personalized-recs',
  numResultsViewed: 6,
  items: visibleRecommendations,
  section: 'homepage',
  analyticsTags: {
    user_segment: 'premium',
    ab_test_variant: 'variant_b',
    placement: 'above_fold'
  }
});

​
When to Use

Use trackRecommendationView when:
  • You want to track only the recommendations actually visible in the viewport
  • Implementing scroll-based lazy loading
  • Tracking carousel or slider views
  • You need more control than trackRecommendationResultsLoaded provides
Difference from trackRecommendationResultsLoaded:
  • trackRecommendationResultsLoaded: Track when recommendations are loaded/rendered
  • trackRecommendationView: Track when recommendations are actually viewed by the user
You may use both - load tracking when results render, and view tracking when they enter the viewport.

​
Best Practices

  1. Track Actual Views: Use numResultsViewed to indicate how many recommendations were actually seen, not just rendered.
  2. Viewport Detection: Consider using Intersection Observer API to accurately track when recommendations enter the viewport.
  3. Deduplicate: If tracking carousel views, ensure you don’t double-count items as users navigate.
  4. Combine with Load Tracking: Use trackRecommendationResultsLoaded for when results load, and this method for when they’re viewed.

​
Error Handling

try {
  const result = constructorio.tracker.trackRecommendationView({
    url: window.location.href,
    podId: 'home-recs',
    numResultsViewed: 4
  });
  
  if (result instanceof Error) {
    console.error('Tracking failed:', result);
  }
} catch (error) {
  console.error('Error tracking recommendation view:', error);
}

Build docs developers (and LLMs) love

Get started for freeTalk to us