---
title: "E-commerce Setup Guide"
description: "Complete guide to tracking e-commerce conversions, revenue, and customer journey with Sealmetrics. Includes examples for WooCommerce, Shopify, and custom platforms."
canonical_url: "https://docs.sealmetrics.com/implementation/ecommerce-conversion-tracking/ecommerce-setup-guide"
lang: "en"
date_generated: "2026-09-21T07:18:17.820Z"
source_hash: "39451968dd2bfcdc59468c2d2759450a57fbd187e7ed74244522c669aad05003"
content_type: "implementation"
owner: "engineering"
llm_priority: "critical"
source_file: "implementation/ecommerce-conversion-tracking/ecommerce-setup-guide.mdx"
publisher: "Sealmetrics"
---

# E-commerce Setup Guide

Canonical page: https://docs.sealmetrics.com/implementation/ecommerce-conversion-tracking/ecommerce-setup-guide

This guide covers how to implement complete e-commerce tracking with Sealmetrics, from product views to purchase completion.

---

## Quick Start

### 1. Install the Tracker

Add to every page of your store:

```html
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID" defer></script>
```

### 2. Track Purchases

On your thank-you/confirmation page:

```html
<script>
  window.addEventListener('load', function() {
    sealmetrics.conv('purchase', 149.99, {
      currency: 'EUR',
      items: [
        { product_name: 'Blue Running Shoes', price: 89.99, quantity: 1, category: 'footwear' },
        { product_name: 'Sports Socks Pack', price: 60.00, quantity: 2, category: 'accessories' }
      ]
    });
  });
</script>
```

That's the minimum setup. The `items` array is optional but recommended for detailed product analytics. Read on for complete funnel tracking.

---

## The E-commerce Funnel

Track the complete customer journey:

| Step | Event Type | Function |
|------|------------|----------|
| Product View | Microconversion | `sealmetrics.micro('view_item', {...})` |
| Add to Cart | Microconversion | `sealmetrics.micro('add_to_cart', {...})` |
| View Cart | Microconversion | `sealmetrics.micro('view_cart', {...})` |
| Begin Checkout | Microconversion | `sealmetrics.micro('begin_checkout', {...})` |
| Add Payment Info | Microconversion | `sealmetrics.micro('add_payment_info', {...})` |
| Purchase | Conversion | `sealmetrics.conv('purchase', amount, {...})` |

---

## Step-by-Step Implementation

### Product View

Track when users view product details. Use `view_item`: it is the name the [Funnel report](/reports/funnel) reads for its View Product step (the legacy `view_product`, still emitted by older integrations, is also accepted and summed).

```javascript
// On product page load
sealmetrics.micro('view_item', {
  product_id: 'SKU-123',
  product_name: 'Blue Running Shoes',
  category: 'footwear',
  price: '89.99',
  currency: 'EUR'
});
```

### Add to Cart

Track add-to-cart clicks:

```javascript
document.querySelector('.add-to-cart').addEventListener('click', function() {
  sealmetrics.micro('add_to_cart', {
    product_id: 'SKU-123',
    product_name: 'Blue Running Shoes',
    price: '89.99',
    quantity: '1'
  });
});
```

### View Cart

Track when users view their cart:

```javascript
// On cart page load
sealmetrics.micro('view_cart', {
  items_count: '3',
  cart_value: '267.97'
});
```

### Begin Checkout

Track checkout initiation:

```javascript
// When user starts checkout
sealmetrics.micro('begin_checkout', {
  items_count: '3',
  cart_value: '267.97'
});
```

### Purchase (Conversion)

Track completed purchases with product details:

```javascript
// On thank-you page
sealmetrics.conv('purchase', 267.97, {
  currency: 'EUR',
  payment_method: 'credit_card',
  items: [
    { product_name: 'Blue Running Shoes', product_id: 'SKU-123', price: 89.99, quantity: 2, category: 'footwear' },
    { product_name: 'Sports Socks', product_id: 'SKU-456', price: 89.99, quantity: 1, category: 'accessories' }
  ]
});
```

**Tip:**
The `items` property is an **array of objects** inside the third parameter (properties object) of `sealmetrics.conv()`. Each object can contain any key-value fields you need: `product_name`, `price`, `quantity`, `category`, `variant`, `id`, etc. Do **not** pass `items` as a string or as a separate parameter — it must be a native JavaScript array within the properties object.

---

## Platform-Specific Implementation

### WooCommerce

Add to your `functions.php` or a custom plugin:

```php
// Track purchases on thank-you page
add_action('woocommerce_thankyou', function($order_id) {
  $order = wc_get_order($order_id);
  if (!$order) return;

  // Build items array
  $items = array();
  foreach ($order->get_items() as $item) {
    $product = $item->get_product();
    $items[] = array(
      'product_name' => $item->get_name(),
      'product_id'   => $product ? $product->get_id() : '',
      'sku'          => $product ? $product->get_sku() : '',
      'price'        => $item->get_total() / max($item->get_quantity(), 1),
      'quantity'     => $item->get_quantity(),
      'category'     => wp_strip_all_tags(wc_get_product_category_list($product ? $product->get_id() : 0)),
    );
  }
  ?>
  <script>
    window.addEventListener('load', function() {
      if (typeof sealmetrics !== 'undefined') {
        sealmetrics.conv('purchase', <?php echo $order->get_total(); ?>, {
          currency: '<?php echo $order->get_currency(); ?>',
          payment_method: '<?php echo $order->get_payment_method(); ?>',
          items: <?php echo json_encode($items); ?>
        });
      }
    });
  </script>
  <?php
});
```

For add-to-cart tracking, add this JavaScript:

```javascript
// WooCommerce AJAX add-to-cart
jQuery(document.body).on('added_to_cart', function(e, fragments, cart_hash, button) {
  if (typeof sealmetrics !== 'undefined') {
    sealmetrics.micro('add_to_cart', {
      product_id: jQuery(button).data('product_id'),
      product_name: jQuery(button).data('product_name') || 'Product'
    });
  }
});
```

### Shopify

In your **checkout.liquid** or via **Additional Scripts** (Settings → Checkout):

```html
{% if first_time_accessed %}
<script>
  window.addEventListener('load', function() {
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', {{ checkout.total_price | money_without_currency | remove: ',' }}, {
        currency: '{{ checkout.currency }}',
        items: [
          {% for item in checkout.line_items %}
          {
            product_name: '{{ item.title | escape }}',
            product_id: '{{ item.product_id }}',
            sku: '{{ item.sku | escape }}',
            price: {{ item.final_price | money_without_currency | remove: ',' }},
            quantity: {{ item.quantity }},
            category: '{{ item.product.type | escape }}'
          }{% unless forloop.last %},{% endunless %}
          {% endfor %}
        ]
      });
    }
  });
</script>
{% endif %}
```

For add-to-cart, use theme JavaScript:

```javascript
// In theme.js or via Shopify ScriptTag API
document.addEventListener('click', function(e) {
  if (e.target.matches('[data-add-to-cart]') || e.target.closest('[data-add-to-cart]')) {
    var form = e.target.closest('form[action*="/cart/add"]');
    if (form && typeof sealmetrics !== 'undefined') {
      sealmetrics.micro('add_to_cart', {
        product_id: form.querySelector('[name="id"]').value
      });
    }
  }
});
```

### Magento 2

In your checkout success template or via layout XML:

```php
<?php
$order = $block->getOrder();
$items = array();
foreach ($order->getAllVisibleItems() as $item) {
    $items[] = array(
        'product_name' => $item->getName(),
        'product_id'   => $item->getProductId(),
        'sku'          => $item->getSku(),
        'price'        => $item->getPrice(),
        'quantity'     => (int)$item->getQtyOrdered(),
    );
}
?>
<script>
  window.addEventListener('load', function() {
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', <?php echo $order->getGrandTotal(); ?>, {
        currency: '<?php echo $order->getOrderCurrencyCode(); ?>',
        items: <?php echo json_encode($items); ?>
      });
    }
  });
</script>
```

### PrestaShop

In your order confirmation template:

```php
{if isset($order)}
<script>
  window.addEventListener('load', function() {
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', {$order.total_paid|floatval}, {
        currency: '{$currency.iso_code|escape:'javascript'}',
        items: [
          {foreach from=$order.products item=product name=items}
          {ldelim}
            product_name: '{$product.product_name|escape:'javascript'}',
            product_id: '{$product.product_id}',
            sku: '{$product.product_reference|escape:'javascript'}',
            price: {$product.unit_price_tax_incl|floatval},
            quantity: {$product.product_quantity|intval},
            category: '{$product.category|escape:'javascript'}'
          {rdelim}{if !$smarty.foreach.items.last},{/if}
          {/foreach}
        ]
      });
    }
  });
</script>
{/if}
```

---

## Dynamic Values

### Server-Side Rendering

Pass values from your backend:

```html
<script>
  window.addEventListener('load', function() {
    sealmetrics.conv('purchase', <?= json_encode($order['total']) ?>, {
      currency: <?= json_encode($order['currency']) ?>
    });
  });
</script>
```

### Data Layer

If using Google Tag Manager's data layer:

```html
<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    event: 'purchase',
    ecommerce: {
      transaction_id: 'ORD-12345',
      value: 149.99,
      currency: 'EUR'
    }
  });
</script>

<script>
  // Read from data layer
  window.addEventListener('load', function() {
    var purchaseData = window.dataLayer.find(function(item) {
      return item.event === 'purchase';
    });

    if (purchaseData && typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', purchaseData.ecommerce.value, {
        currency: purchaseData.ecommerce.currency
      });
    }
  });
</script>
```

---

## Content Grouping for E-commerce

Use content grouping to segment your pages:

```html
<!-- Product pages -->
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID&group=product" defer></script>

<!-- Category pages -->
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID&group=category" defer></script>

<!-- Cart page -->
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID&group=cart" defer></script>

<!-- Checkout pages -->
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID&group=checkout" defer></script>
```

---

## Properties Reference

Recommended properties for e-commerce events:

| Property | Description | Example |
|----------|-------------|---------|
| `currency` | ISO 4217 currency code | `'EUR'`, `'USD'` |
| `payment_method` | Payment type | `'credit_card'` |
| `coupon` | Discount code | `'SAVE10'` |
| `items` | Array of product objects (see below) | `[{ product_name: '...', price: 19.99 }]` |

### Product fields inside `items`

Each object in the `items` array can contain any combination of these fields (all are optional, free-form key-value):

| Field | Description | Example |
|-------|-------------|---------|
| `product_name` | Product name | `'Blue Running Shoes'` |
| `product_id` | Product SKU/ID | `'SKU-123'` |
| `price` | Unit price | `89.99` |
| `quantity` | Units purchased | `2` |
| `category` | Product category | `'footwear'` |
| `brand` | Brand name | `'Nike'` |
| `variant` | Product variant | `'Blue / Size 42'` |
| `sku` | Stock keeping unit | `'SKU-123-BL'` |

**Tip:**
`items` is an **array of JavaScript objects** inside the properties parameter. Do not pass it as a string or as a separate parameter outside properties. Individual product fields (`product_name`, `price`, etc.) go inside each object of the array, not as top-level properties. You can include any custom fields you need — all are accepted.

---

## Viewing Product Data in the Dashboard

Once you're tracking purchases with `items`, your product data is available in the **Properties** report.

1. Go to your site in the Sealmetrics dashboard
2. Click **Properties** in the sidebar
3. Select the **Conv. Items** tab

In this mode you can:

- **Browse product fields**: See all fields you've tracked across items (`product_name`, `category`, `brand`, `sku`, etc.) and how frequently each appears
- **Analyze by source**: Select a field (e.g., `product_name`) to see which products are sold by each traffic source, medium, and campaign
- **Export**: Download CSV for any view

The report filters by date range only — there is no filter by conversion type, UTM, channel, country or device on it. See the [Properties report](/reports/properties) for what each mode and toggle actually shows.

Items with a `quantity` field are automatically counted by units — a product with `quantity: 2` counts as 2 in the report.

**Tip:**

---

## Deduplication

Prevent duplicate conversion tracking:

### Server-Side Flag (Recommended)

Mark orders as tracked in your database:

```php
// PHP example
if (!$order->isTracked()) {
  echo '<script>sealmetrics.conv("purchase", ' . $order->getTotal() . ', {...});</script>';
  $order->markAsTracked();
}
```

### Client-Side Check

Use localStorage for simple deduplication:

```javascript
// Use your order ID only as a local deduplication key — do not send it in the payload
var orderId = 'ORD-12345';
if (!localStorage.getItem('tracked_' + orderId)) {
  sealmetrics.conv('purchase', 149.99);
  localStorage.setItem('tracked_' + orderId, 'true');
}
```

---

## Testing

### Verify Installation

1. Open your store in a browser
2. Open Developer Tools → Network tab
3. Filter by `t.sealmetrics.com`
4. Navigate through pages and complete a test purchase
5. Verify requests are sent with correct data

### Check Data Is Arriving

1. Log in to [Sealmetrics dashboard](https://my.sealmetrics.com)
2. Open your site's **Overview** report
3. Within seconds, the **Last hit** timestamp at the top right updates and your test events are reflected in the numbers

### Verify Conversion Data

1. Go to **Conversions** report — check that purchase amount is correct
2. Go to **Properties** report — verify properties appear in the **Conversions** tab
3. Select **Conv. Items** tab — confirm your product items are listed with correct fields
4. Verify attribution to traffic source

---

## Related Documentation

- [Conversions](/implementation/tracker/conversions) - Detailed conversion tracking
- [Microconversions](/implementation/tracker/microconversions) - Funnel step tracking
- [Google Tag Manager](/integrations/google-tag-manager) - GTM integration
- [WooCommerce Plugin](/integrations/ecommerce/woocommerce) - Official WooCommerce integration