E-commerce Tracking

Overview

Track the complete customer journey from product discovery to purchase completion. Monitor conversion rates, cart abandonment, and revenue metrics.

Complete E-commerce Implementation

Product Page Tracking

Track product views and interactions.

import { useMentiqAnalytics, TrackView, TrackClick } from "mentiq-sdk";
import { useEffect } from "react";

function ProductPage({ product }) {
  const { track, page } = useMentiqAnalytics();

  useEffect(() => {
    // Track page view
    page({
      title: `${product.name} - Product`,
      path: `/products/${product.id}`,
    });

    // Track product view
    track("product_viewed", {
      product_id: product.id,
      product_name: product.name,
      category: product.category,
      price: product.price,
      currency: "USD",
      in_stock: product.inventory > 0,
      inventory_count: product.inventory,
    });
  }, [product, page, track]);

  const handleAddToCart = () => {
    track("add_to_cart", {
      product_id: product.id,
      product_name: product.name,
      price: product.price,
      quantity: 1,
      cart_total: product.price,
    });

    // Add to cart logic
    addToCart(product);
  };

  const handleWishlist = () => {
    track("add_to_wishlist", {
      product_id: product.id,
      product_name: product.name,
      category: product.category,
    });
  };

  return (
    <TrackView
      event="product_details_viewed"
      properties={{ product_id: product.id, category: product.category }}
      threshold={0.5}
    >
      <div className="product-page">
        <div className="product-images">
          <img src={product.image} alt={product.name} />
        </div>

        <div className="product-info">
          <h1>{product.name}</h1>
          <p className="price">${product.price}</p>
          <p className="description">{product.description}</p>

          <TrackClick
            event="add_to_cart_clicked"
            properties={{ 
              product_id: product.id,
              source: "product_page" 
            }}
          >
            <button onClick={handleAddToCart}>
              Add to Cart - ${product.price}
            </button>
          </TrackClick>

          <TrackClick
            event="add_to_wishlist_clicked"
            properties={{ product_id: product.id }}
          >
            <button onClick={handleWishlist} className="wishlist-btn">
              Add to Wishlist
            </button>
          </TrackClick>
        </div>
      </div>
    </TrackView>
  );
}

Product Listing & Search

Track product impressions and search behavior.

import { useMentiqAnalytics, TrackView } from "mentiq-sdk";

function ProductGrid({ products, searchQuery }) {
  const { track } = useMentiqAnalytics();

  useEffect(() => {
    if (searchQuery) {
      track("product_searched", {
        query: searchQuery,
        results_count: products.length,
        has_results: products.length > 0,
      });
    }

    // Track product impressions
    track("products_viewed", {
      product_ids: products.map(p => p.id),
      product_count: products.length,
      category: products[0]?.category,
    });
  }, [products, searchQuery, track]);

  const handleProductClick = (product, position) => {
    track("product_clicked", {
      product_id: product.id,
      product_name: product.name,
      price: product.price,
      position: position,
      list_name: "search_results",
    });
  };

  return (
    <div className="product-grid">
      {products.map((product, index) => (
        <TrackView
          key={product.id}
          event="product_impression"
          properties={{
            product_id: product.id,
            position: index + 1,
            price: product.price,
          }}
        >
          <div 
            className="product-card"
            onClick={() => handleProductClick(product, index + 1)}
          >
            <img src={product.image} alt={product.name} />
            <h3>{product.name}</h3>
            <p className="price">${product.price}</p>
          </div>
        </TrackView>
      ))}
    </div>
  );
}

Shopping Cart

Track cart interactions and abandonment.

import { useMentiqAnalytics } from "mentiq-sdk";
import { useEffect, useState } from "react";

function ShoppingCart({ items, onCheckout }) {
  const { track } = useMentiqAnalytics();
  const [cartTotal, setCartTotal] = useState(0);

  useEffect(() => {
    const total = items.reduce((sum, item) => 
      sum + (item.price * item.quantity), 0
    );
    setCartTotal(total);

    // Track cart viewed
    track("cart_viewed", {
      item_count: items.length,
      cart_total: total,
      product_ids: items.map(item => item.product_id),
    });
  }, [items, track]);

  const handleRemoveItem = (item) => {
    track("remove_from_cart", {
      product_id: item.product_id,
      product_name: item.name,
      price: item.price,
      quantity: item.quantity,
      cart_total_after: cartTotal - (item.price * item.quantity),
    });

    removeFromCart(item.id);
  };

  const handleUpdateQuantity = (item, newQuantity) => {
    const quantityChange = newQuantity - item.quantity;

    track("cart_quantity_updated", {
      product_id: item.product_id,
      old_quantity: item.quantity,
      new_quantity: newQuantity,
      quantity_change: quantityChange,
    });

    updateQuantity(item.id, newQuantity);
  };

  const handleCheckout = () => {
    track("checkout_started", {
      cart_total: cartTotal,
      item_count: items.length,
      products: items.map(item => ({
        product_id: item.product_id,
        name: item.name,
        price: item.price,
        quantity: item.quantity,
      })),
    });

    onCheckout();
  };

  const handleApplyCoupon = (couponCode) => {
    track("coupon_applied", {
      coupon_code: couponCode,
      cart_total: cartTotal,
    });
  };

  return (
    <div className="shopping-cart">
      <h2>Shopping Cart ({items.length} items)</h2>

      {items.map(item => (
        <div key={item.id} className="cart-item">
          <img src={item.image} alt={item.name} />
          <div className="item-details">
            <h3>{item.name}</h3>
            <p className="price">${item.price}</p>
            <input
              type="number"
              value={item.quantity}
              onChange={(e) => handleUpdateQuantity(item, parseInt(e.target.value))}
              min="1"
            />
          </div>
          <button onClick={() => handleRemoveItem(item)}>Remove</button>
        </div>
      ))}

      <div className="cart-summary">
        <h3>Total: ${cartTotal.toFixed(2)}</h3>
        <input 
          type="text" 
          placeholder="Coupon code"
          onBlur={(e) => e.target.value && handleApplyCoupon(e.target.value)}
        />
        <button onClick={handleCheckout}>Proceed to Checkout</button>
      </div>
    </div>
  );
}

Checkout Flow

Track the complete checkout process with funnel analytics.

import { useMentiqAnalytics } from "mentiq-sdk";
import { useState, useEffect } from "react";

function CheckoutFlow({ cart }) {
  const { track, startFunnel, advanceFunnel, completeFunnel, abandonFunnel } = useMentiqAnalytics();
  const [step, setStep] = useState("shipping");
  const [checkoutData, setCheckoutData] = useState({});

  useEffect(() => {
    // Start checkout funnel
    startFunnel("checkout", {
      cart_total: cart.total,
      item_count: cart.items.length,
    });

    // Track initial step
    advanceFunnel("checkout", "shipping_info", {
      step_number: 1,
    });
  }, []);

  const handleShippingComplete = (shippingInfo) => {
    setCheckoutData({ ...checkoutData, shipping: shippingInfo });

    advanceFunnel("checkout", "payment_info", {
      step_number: 2,
      shipping_method: shippingInfo.method,
    });

    setStep("payment");
  };

  const handlePaymentComplete = (paymentInfo) => {
    setCheckoutData({ ...checkoutData, payment: paymentInfo });

    advanceFunnel("checkout", "review_order", {
      step_number: 3,
      payment_method: paymentInfo.method,
    });

    setStep("review");
  };

  const handleOrderComplete = async (orderId) => {
    // Track purchase
    track("purchase_completed", {
      order_id: orderId,
      total: cart.total,
      tax: cart.tax,
      shipping: cart.shipping,
      currency: "USD",
      item_count: cart.items.length,
      products: cart.items.map(item => ({
        product_id: item.product_id,
        name: item.name,
        price: item.price,
        quantity: item.quantity,
        category: item.category,
      })),
      payment_method: checkoutData.payment.method,
      shipping_method: checkoutData.shipping.method,
    });

    // Complete checkout funnel
    completeFunnel("checkout", {
      order_id: orderId,
      total: cart.total,
    });

    // Track revenue
    track("revenue", {
      order_id: orderId,
      revenue: cart.total,
      currency: "USD",
    });
  };

  const handleAbandonCheckout = () => {
    abandonFunnel("checkout", "user_exited", {
      current_step: step,
      cart_total: cart.total,
    });
  };

  return (
    <div className="checkout-flow">
      <ProgressIndicator currentStep={step} />

      {step === "shipping" && (
        <ShippingForm onComplete={handleShippingComplete} />
      )}

      {step === "payment" && (
        <PaymentForm onComplete={handlePaymentComplete} />
      )}

      {step === "review" && (
        <OrderReview 
          cart={cart}
          checkoutData={checkoutData}
          onComplete={handleOrderComplete}
        />
      )}

      <button onClick={handleAbandonCheckout}>Cancel</button>
    </div>
  );
}

Order Confirmation

Track successful purchases and post-purchase actions.

import { useMentiqAnalytics } from "mentiq-sdk";
import { useEffect } from "react";

function OrderConfirmation({ order }) {
  const { track, identify } = useMentiqAnalytics();

  useEffect(() => {
    // Update user traits with purchase data
    identify(order.userId, {
      last_purchase_date: order.date,
      total_purchases: order.userPurchaseCount,
      lifetime_value: order.userLifetimeValue,
    });

    // Track order confirmation view
    track("order_confirmation_viewed", {
      order_id: order.id,
      total: order.total,
    });
  }, [order, track, identify]);

  const handleNewsletterSignup = () => {
    track("newsletter_signup", {
      source: "order_confirmation",
      order_id: order.id,
    });
  };

  const handleSocialShare = (platform) => {
    track("order_shared", {
      platform,
      order_id: order.id,
      total: order.total,
    });
  };

  return (
    <div className="order-confirmation">
      <h1>Order Confirmed!</h1>
      <p>Order #{order.id}</p>
      <p>Total: ${order.total}</p>

      <div className="order-items">
        {order.items.map(item => (
          <div key={item.id}>
            <span>{item.name}</span>
            <span>${item.price} x {item.quantity}</span>
          </div>
        ))}
      </div>

      <button onClick={handleNewsletterSignup}>
        Get 10% off your next order
      </button>

      <div className="social-share">
        <button onClick={() => handleSocialShare("twitter")}>Share</button>
        <button onClick={() => handleSocialShare("facebook")}>Share</button>
      </div>
    </div>
  );
}

Key E-commerce Events

Product Events

product_viewed - User views a product page
product_impression - Product appears in a list
product_clicked - User clicks on a product
product_searched - User searches for products

Cart Events

add_to_cart - Product added to cart
remove_from_cart - Product removed from cart
cart_viewed - User views cart
cart_quantity_updated - Cart item quantity changed
cart_abandoned - User leaves with items in cart
coupon_applied - Discount code used

Checkout Events

checkout_started - User begins checkout
shipping_info_completed - Shipping details entered
payment_info_completed - Payment details entered
purchase_completed - Order successfully placed
checkout_abandoned - User exits checkout

Post-Purchase Events

order_confirmation_viewed - Confirmation page viewed
order_shared - User shares purchase
review_submitted - Product review posted
newsletter_signup - Post-purchase newsletter signup

Best Practices

Use consistent property names across all e-commerce events. This makes it easier to analyze data and create reports.

Don’t track sensitive payment information like credit card numbers or CVV codes. Only track payment methods (e.g., “credit_card”, “paypal”).

Recommended Properties

// Product properties
{
  product_id: "prod_123",
  product_name: "Widget Pro",
  category: "Electronics",
  price: 29.99,
  currency: "USD",
  quantity: 1
}

// Order properties
{
  order_id: "order_12345",
  total: 99.99,
  subtotal: 89.99,
  tax: 7.00,
  shipping: 3.00,
  currency: "USD",
  item_count: 3,
  coupon_code: "SAVE10"
}

Analytics Dashboard

Once implemented, you’ll be able to track:

Conversion rates at each funnel step
Cart abandonment rates and reasons
Average order value and revenue
Top-selling products and categories
Customer lifetime value
Payment method preferences

Get Started

Core Concepts

React Integration

Features

Guides

Examples

Overview

Complete E-commerce Implementation

Product Page Tracking

Product Listing & Search

Shopping Cart

Checkout Flow

Order Confirmation

Key E-commerce Events

Best Practices

Recommended Properties

Analytics Dashboard

Next Steps

SaaS Tracking

Funnel Analytics

Build docs developers (and LLMs) love

Get Started

Core Concepts

React Integration

Features

Guides

Examples

​Overview

​Complete E-commerce Implementation

​Product Page Tracking

​Product Listing & Search

​Shopping Cart

​Checkout Flow

​Order Confirmation

​Key E-commerce Events

​Best Practices

​Recommended Properties

​Analytics Dashboard

​Next Steps

SaaS Tracking

Funnel Analytics

Build docs developers (and LLMs) love

Overview

Complete E-commerce Implementation

Product Page Tracking

Product Listing & Search

Shopping Cart

Checkout Flow

Order Confirmation

Key E-commerce Events

Best Practices

Recommended Properties

Analytics Dashboard

Next Steps