Track Product View

Call trackProductDetailsViewed() on your product details page to track customer interest and engagement.

---

Usage

HTML

<script>
  const productData = {
    product: {
      productId: "PROD-001",
      name: "Running Shoes",
      price: 44.99,
      category: "Footwear",         // Optional
      sku: "SHOE-RUN-42"           // Optional
    }
  };

  AffiliateSDK.trackProductDetailsViewed(productData);
</script>

WordPress

<?php
global $product;
if ( is_product() && $product ) :
?>
<script>
  const productData = {
    product: {
      productId: "<?php echo $product->get_id(); ?>",
      name: "<?php echo $product->get_name(); ?>",
      price: <?php echo $product->get_price(); ?>,
      category: "<?php echo wc_get_product_category_list( $product->get_id() ); ?>",
      sku: "<?php echo $product->get_sku(); ?>"
    }
  };

  if (window.AffiliateSDK) {
    AffiliateSDK.trackProductDetailsViewed(productData);
  }
</script>
<?php endif; ?>

Shopify

<script>
  const productData = {
    product: {
      productId: "{{ product.id }}",
      name: "{{ product.title }}",
      price: {{ product.price | money_without_currency }},
      category: "{{ product.type }}",
      sku: "{{ product.selected_or_first_available_variant.sku }}"
    }
  };

  if (window.AffiliateSDK) {
    AffiliateSDK.trackProductDetailsViewed(productData);
  }
</script>

Next.js

import { useEffect } from "react";

export default function ProductPage({ product }) {
  useEffect(() => {
    const productData = {
      product: {
        productId: product.id,
        name: product.name,
        price: product.price,
        category: product.category,
        sku: product.sku
      }
    };

    if (window.AffiliateSDK) {
      window.AffiliateSDK.trackProductDetailsViewed(productData);
    }
  }, [product]);

  return <h1>{product.name}</h1>;
}

Nuxt.js

<script setup lang="ts">
const { product } = defineProps(['product']);

onMounted(() => {
  const productData = {
    product: {
      productId: product.id,
      name: product.name,
      price: product.price,
      category: product.category,
      sku: product.sku
    }
  };

  if (window.AffiliateSDK) {
    window.AffiliateSDK.trackProductDetailsViewed(productData);
  }
});
</script>

<template>
  <h1>{{ product.name }}</h1>
</template>