Skip to main content

Method Signature

constructorio.tracker.trackRecommendationClick(parameters, networkParameters?)
Tracks when a user clicks on a product from recommendation results. This method provides more detailed tracking options than trackRecommendationResultClick.

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

function handleRecommendationClick(recommendation, podId, strategyId, position) {
  constructorio.tracker.trackRecommendationClick({
    podId: podId,
    strategyId: strategyId,
    itemId: recommendation.data.id,
    itemName: recommendation.value,
    resultPositionOnPage: position
  });
  
  // Navigate to product page
  window.location.href = recommendation.data.url;
}

With Result Metadata

const recommendations = await constructorio.recommendations.getRecommendationResults('pdp-similar');

function onProductClick(item, index) {
  constructorio.tracker.trackRecommendationClick({
    podId: 'pdp-similar',
    strategyId: recommendations.response.pod.strategy_id || 'similar_items',
    itemId: item.data.id,
    itemName: item.value,
    resultId: recommendations.result_id,
    resultPositionOnPage: index,
    resultCount: recommendations.response.total_num_results
  });
}

Item-Based Recommendations

// Get recommendations based on a seed item
const recs = await constructorio.recommendations.getRecommendationResults('similar-items', {
  itemIds: ['product-123']
});

function handleClick(clickedItem, position) {
  constructorio.tracker.trackRecommendationClick({
    podId: 'similar-items',
    strategyId: 'similar_items',
    itemId: clickedItem.data.id,
    itemName: clickedItem.value,
    seedItemIds: 'product-123',  // The item that seeded these recommendations
    resultPositionOnPage: position,
    resultId: recs.result_id
  });
}

With Product Variation

constructorio.tracker.trackRecommendationClick({
  podId: 'homepage-recs',
  strategyId: 'best_sellers',
  itemId: 'shirt-789',
  itemName: 'Cotton T-Shirt',
  variationId: 'size-m-color-blue',
  resultPositionOnPage: 2
});

In a React Component

import { useCallback } from 'react';

function RecommendationGrid({ podId, strategyId, recommendations, resultId }) {
  const handleClick = useCallback((item, index) => {
    constructorio.tracker.trackRecommendationClick({
      podId,
      strategyId,
      itemId: item.data.id,
      itemName: item.value,
      resultId,
      resultPositionOnPage: index,
      resultCount: recommendations.length
    });
    
    // Navigate or handle click
    navigate(`/products/${item.data.id}`);
  }, [podId, strategyId, resultId]);
  
  return (
    <div className="recommendation-grid">
      {recommendations.map((item, index) => (
        <ProductCard
          key={item.data.id}
          product={item}
          onClick={() => handleClick(item, index)}
        />
      ))}
    </div>
  );
}

With Analytics Tags

constructorio.tracker.trackRecommendationClick({
  podId: 'cart-page-recs',
  strategyId: 'frequently_bought_together',
  itemId: 'product-456',
  itemName: 'Wireless Mouse',
  resultPositionOnPage: 1,
  analyticsTags: {
    cart_value: '125.99',
    user_segment: 'returning_customer',
    ab_test_variant: 'variant_a'
  }
});
// Track click on a sponsored recommendation
constructorio.tracker.trackRecommendationClick({
  podId: 'sponsored-recs',
  strategyId: 'sponsored',
  itemId: 'sponsored-product-123',
  itemName: 'Premium Product',
  slCampaignId: 'campaign-abc',
  slCampaignOwner: 'vendor-xyz',
  resultPositionOnPage: 0
});

When to Use

Track recommendation clicks:
  • When a user clicks on a recommended product
  • Before navigating to the product detail page
  • When adding a recommended product to cart directly from the widget
Difference from trackRecommendationResultClick:
  • trackRecommendationClick: Provides more detailed metadata (strategyId, seedItemIds, position, etc.)
  • trackRecommendationResultClick: Simpler method with fewer parameters
Use trackRecommendationClick when you need detailed analytics and attribution.

Best Practices

  1. Include Position: Always include resultPositionOnPage to understand which positions perform best.
  2. Track Strategy: Include strategyId to measure performance of different recommendation strategies.
  3. Seed Items: For item-based recommendations, include seedItemIds to track which products drive recommendations.
  4. Consistent IDs: Ensure itemId matches your catalog and other tracking events.

Error Handling

try {
  const result = constructorio.tracker.trackRecommendationClick({
    podId: 'home-recs',
    strategyId: 'popular',
    itemId: 'product-123',
    itemName: 'Product Name'
  });
  
  if (result instanceof Error) {
    console.error('Tracking failed:', result);
  }
} catch (error) {
  console.error('Error tracking recommendation click:', error);
}

Build docs developers (and LLMs) love