E-commerce 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:

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

2. Track Purchases

On your thank-you/confirmation page:

<script>
  window.addEventListener('load', function() {
    sealmetrics.conv('purchase', 149.99, {
      order_id: 'ORD-12345',
      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_product', {...})`
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:

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

Add to Cart

Track add-to-cart clicks:

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:

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

Begin Checkout

Track checkout initiation:

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

Purchase (Conversion)

Track completed purchases with product details:

// On thank-you page
sealmetrics.conv('purchase', 267.97, {
  order_id: 'ORD-12345',
  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' }
  ]
});

Items format

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:

// 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(); ?>, {
          order_id: '<?php echo $order_id; ?>',
          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:

// 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):

{% if first_time_accessed %}
<script>
  window.addEventListener('load', function() {
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', {{ checkout.total_price | money_without_currency | remove: ',' }}, {
        order_id: '{{ order.name }}',
        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:

// 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
$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(); ?>, {
        order_id: '<?php echo $order->getIncrementId(); ?>',
        currency: '<?php echo $order->getOrderCurrencyCode(); ?>',
        items: <?php echo json_encode($items); ?>
      });
    }
  });
</script>

PrestaShop

In your order confirmation template:

{if isset($order)}
<script>
  window.addEventListener('load', function() {
    if (typeof sealmetrics !== 'undefined') {
      sealmetrics.conv('purchase', {$order.total_paid|floatval}, {
        order_id: '{$order.reference|escape:'javascript'}',
        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:

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

Data Layer

If using Google Tag Manager's data layer:

<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, {
        order_id: purchaseData.ecommerce.transaction_id,
        currency: purchaseData.ecommerce.currency
      });
    }
  });
</script>

Content Grouping for E-commerce

Use content grouping to segment your pages:

<!-- 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
`order_id`	Unique order identifier	`'ORD-12345'`
`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'`

Items format

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.

Go to your site in the SealMetrics dashboard
Click Properties in the sidebar
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
View totals or rates: Toggle between raw counts and conversion rates
Filter: Narrow results by conversion type, UTMs, channel, country, or device
Export: Download CSV for any view

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

tip

Transaction-level properties like currency, payment_method, and coupon are available in the Conversions tab of the same Properties report.

Deduplication

Prevent duplicate conversion tracking:

Server-Side Flag (Recommended)

Mark orders as tracked in your database:

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

Client-Side Check

Use localStorage for simple deduplication:

var orderId = 'ORD-12345';
if (!localStorage.getItem('tracked_' + orderId)) {
  sealmetrics.conv('purchase', 149.99, { order_id: orderId });
  localStorage.setItem('tracked_' + orderId, 'true');
}

Testing

Verify Installation

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

Check Real-Time Data

Log in to SealMetrics dashboard
Go to Real-time report
Your test events should appear within seconds

Verify Conversion Data

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

Conversions - Detailed conversion tracking
Microconversions - Funnel step tracking
Google Tag Manager - GTM integration
WooCommerce Plugin - Official WooCommerce integration

Quick Start​

1. Install the Tracker​

2. Track Purchases​

The E-commerce Funnel​

Step-by-Step Implementation​

Product View​

Add to Cart​

View Cart​

Begin Checkout​

Purchase (Conversion)​

Platform-Specific Implementation​

WooCommerce​

Shopify​

Magento 2​

PrestaShop​

Dynamic Values​

Server-Side Rendering​

Data Layer​

Content Grouping for E-commerce​

Properties Reference​

Product fields inside items​

Viewing Product Data in the Dashboard​

Deduplication​

Server-Side Flag (Recommended)​

Client-Side Check​

Testing​

Verify Installation​

Check Real-Time Data​

Verify Conversion Data​

Related Documentation​