---
title: "E-commerce Store"
description: "Complete implementation guide for tracking an online store with Sealmetrics - from product views to purchases."
canonical_url: "https://docs.sealmetrics.com/use-cases/ecommerce"
lang: "en"
date_generated: "2026-09-04T00:07:24.876Z"
source_hash: "365865090ee49ae731fbddfe225a5bb4256df7b0988c44692e9b305215b42f57"
content_type: "documentation"
owner: "docs"
llm_priority: "useful"
source_file: "use-cases/ecommerce.mdx"
publisher: "Sealmetrics"
---

# E-commerce Store

Canonical page: https://docs.sealmetrics.com/use-cases/ecommerce

To track an online store with Sealmetrics, add the tracking script to your store's header, then instrument three event types across the funnel: **pageviews** (automatic, for product and category pages), **microconversions** via `sealmetrics.micro()` (add to cart, begin checkout), and **conversions** via `sealmetrics.conv()` (purchase, with revenue and items). This guide covers each step with copy-paste examples for WooCommerce, Shopify, Magento, and PrestaShop.

## What will you track?

| Event Type | Example | Purpose |
|------------|---------|---------|
| Pageviews | Product page, category, cart | Traffic analysis |
| Microconversions | Add to cart, begin checkout | Funnel analysis |
| Conversions | Purchase | Revenue attribution |

---

## Step 1: Basic Installation

Add the tracking script to your store's header:

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

### With Content Grouping

Use different groups for different page types:

```html
<!-- Homepage -->
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ID&group=home" defer></script>

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

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

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

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

---

## Step 2: Track Add to Cart

Track when users add products to their cart.

### Basic Implementation

```javascript
document.querySelectorAll('.add-to-cart-button').forEach(function(button) {
  button.addEventListener('click', function() {
    sealmetrics.micro('add_to_cart', {
      product_id: this.dataset.productId,
      product_name: this.dataset.productName,
      price: this.dataset.price,
      currency: 'EUR'
    });
  });
});
```

### WooCommerce (WordPress)

```php
// In functions.php or custom plugin
add_action('wp_footer', function() {
  if (!is_product()) return;
  ?>
  <script>
    document.querySelector('.single_add_to_cart_button').addEventListener('click', function() {
      sealmetrics.micro('add_to_cart', {
        product_id: '<?php echo get_the_ID(); ?>',
        product_name: '<?php echo esc_js(get_the_title()); ?>',
        price: '<?php echo wc_get_product()->get_price(); ?>',
        currency: '<?php echo get_woocommerce_currency(); ?>'
      });
    });
  </script>
  <?php
});
```

### Shopify

```html
<!-- In theme.liquid or product template -->
<script>
  document.querySelector('[name="add"]').addEventListener('click', function() {
    sealmetrics.micro('add_to_cart', {
      product_id: '{{ product.id }}',
      product_name: '{{ product.title | escape }}',
      price: '{{ product.price | money_without_currency }}',
      currency: '{{ cart.currency.iso_code }}'
    });
  });
</script>
```

### Magento 2

```javascript
// In custom module or theme JS
require(['jquery'], function($) {
  $(document).on('click', '#product-addtocart-button', function() {
    var form = $('#product_addtocart_form');
    sealmetrics.micro('add_to_cart', {
      product_id: $('[name="product"]').val(),
      product_name: $('.page-title span').text(),
      price: $('.price-final_price .price').first().text().replace(/[^0-9.,]/g, ''),
      quantity: $('#qty').val()
    });
  });
});
```

### PrestaShop

```javascript
// In custom.js or theme
document.addEventListener('click', function(e) {
  if (e.target.matches('.add-to-cart')) {
    var productInfo = document.querySelector('[data-product]');
    if (productInfo) {
      var product = JSON.parse(productInfo.dataset.product);
      sealmetrics.micro('add_to_cart', {
        product_id: product.id,
        product_name: product.name,
        price: product.price_amount,
        currency: prestashop.currency.iso_code
      });
    }
  }
});
```

---

## Step 3: Track Checkout Funnel

Track each step of the checkout process.

### Complete Funnel Example

```javascript
// Step 1: View cart
// On cart page load
sealmetrics.micro('view_cart', {
  items_count: document.querySelectorAll('.cart-item').length.toString(),
  cart_value: document.querySelector('.cart-total').dataset.value
});

// Step 2: Begin checkout
document.querySelector('.checkout-button').addEventListener('click', function() {
  sealmetrics.micro('begin_checkout', {
    cart_value: this.dataset.cartTotal
  });
});

// Step 3: Add contact info
document.querySelector('#contact-form').addEventListener('submit', function() {
  sealmetrics.micro('add_contact_info');
});

// Step 4: Add shipping info
document.querySelector('#shipping-form').addEventListener('submit', function() {
  sealmetrics.micro('add_shipping_info', {
    shipping_method: document.querySelector('[name="shipping"]:checked').value
  });
});

// Step 5: Add payment info
document.querySelector('#payment-form').addEventListener('submit', function() {
  sealmetrics.micro('add_payment_info', {
    payment_method: document.querySelector('[name="payment"]:checked').value
  });
});
```

### WooCommerce Checkout

```php
add_action('wp_footer', function() {
  if (!is_checkout()) return;
  ?>
  <script>
    // Track checkout page load
    sealmetrics.micro('begin_checkout', {
      cart_value: '<?php echo WC()->cart->get_total('edit'); ?>'
    });

    // Track form submission
    document.querySelector('form.checkout').addEventListener('submit', function() {
      var paymentMethod = document.querySelector('[name="payment_method"]:checked');
      sealmetrics.micro('add_payment_info', {
        payment_method: paymentMethod ? paymentMethod.value : 'unknown'
      });
    });
  </script>
  <?php
});
```

### Shopify Checkout

In **Settings → Checkout → Additional scripts** (before thank you):

```html
{% if first_time_accessed %}
<script>
  // Track checkout completion steps based on page
  {% if checkout.shipping_address %}
    sealmetrics.micro('add_shipping_info', {
      shipping_method: '{{ checkout.shipping_rate.title | escape }}'
    });
  {% endif %}
</script>
{% endif %}
```

---

## Step 4: Track Purchases

Track completed orders on the thank-you page.

### Basic Implementation

```html
<!-- On order confirmation/thank-you page -->
<script>
  window.addEventListener('load', function() {
    sealmetrics.conv('purchase', ORDER_TOTAL, {
      currency: 'EUR',
      payment_method: 'PAYMENT_METHOD',
      items: [
        { product_name: 'Product 1', price: 29.99, quantity: 1, category: 'Category A' },
        { product_name: 'Product 2', price: 19.99, quantity: 2, category: 'Category B' }
        // ... one object per product in the order
      ]
    });
  });
</script>
```

**Tip:**

### WooCommerce

```php
add_action('woocommerce_thankyou', function($order_id) {
  // Prevent duplicate tracking on refresh
  if (get_post_meta($order_id, '_sealmetrics_tracked', true)) return;

  $order = wc_get_order($order_id);

  // 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() {
      sealmetrics.conv('purchase', <?php echo $order->get_total(); ?>, {
        currency: '<?php echo $order->get_currency(); ?>',
        payment_method: '<?php echo esc_js($order->get_payment_method_title()); ?>',
        coupon: '<?php echo implode(',', $order->get_coupon_codes()); ?>',
        items: <?php echo json_encode($items); ?>
      });
    });
  </script>
  <?php
  update_post_meta($order_id, '_sealmetrics_tracked', true);
});
```

### Shopify

In **Settings → Checkout → Additional scripts**:

```html
{% if first_time_accessed %}
<script src="https://t.sealmetrics.com/t.js?id=YOUR_ACCOUNT_ID&group=checkout" defer></script>
<script>
  window.addEventListener('load', function() {
    sealmetrics.conv('purchase', {{ checkout.total_price | money_without_currency | remove: ',' }}, {
      currency: '{{ checkout.currency }}',
      payment_method: '{{ checkout.transactions[0].gateway | default: "unknown" }}',
      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 }}
        }{% unless forloop.last %},{% endunless %}
        {% endfor %}
      ]
    });
  });
</script>
{% endif %}
```

### Magento 2

```php
// In success.phtml or via layout XML
<?php
$order = $block->getOrder();
if ($order && !$order->getSealmetricsTracked()):
  $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() {
    sealmetrics.conv('purchase', <?php echo $order->getGrandTotal(); ?>, {
      currency: '<?php echo $order->getOrderCurrencyCode(); ?>',
      payment_method: '<?php echo $order->getPayment()->getMethodInstance()->getTitle(); ?>',
      items: <?php echo json_encode($items); ?>
    });
  });
</script>
<?php
  $order->setSealmetricsTracked(true)->save();
endif;
?>
```

### PrestaShop

```php
// In OrderConfirmationController or hook
public function hookDisplayOrderConfirmation($params)
{
  $order = $params['order'];
  if ($order->sealmetrics_tracked) return '';

  $items = array();
  foreach ($order->getProducts() as $product) {
    $items[] = array(
      'product_name' => $product['product_name'],
      'product_id'   => $product['product_id'],
      'sku'          => $product['product_reference'],
      'price'        => (float)$product['unit_price_tax_incl'],
      'quantity'     => (int)$product['product_quantity'],
      'category'     => $product['category'],
    );
  }

  $output = '<script>
    window.addEventListener("load", function() {
      sealmetrics.conv("purchase", ' . $order->total_paid . ', {
        currency: "' . $order->id_currency . '",
        payment_method: "' . $order->payment . '",
        items: ' . json_encode($items) . '
      });
    });
  </script>';

  $order->sealmetrics_tracked = true;
  $order->save();

  return $output;
}
```

---

## Step 5: Additional E-commerce Events

### Wishlist

```javascript
document.querySelectorAll('.add-to-wishlist').forEach(function(button) {
  button.addEventListener('click', function() {
    sealmetrics.micro('add_to_wishlist', {
      product_id: this.dataset.productId,
      product_name: this.dataset.productName
    });
  });
});
```

### Product Quick View

```javascript
document.querySelectorAll('.quick-view').forEach(function(button) {
  button.addEventListener('click', function() {
    sealmetrics.micro('quick_view', {
      product_id: this.dataset.productId
    });
  });
});
```

### Remove from Cart

```javascript
document.querySelectorAll('.remove-from-cart').forEach(function(button) {
  button.addEventListener('click', function() {
    sealmetrics.micro('remove_from_cart', {
      product_id: this.dataset.productId
    });
  });
});
```

### Apply Coupon

```javascript
document.querySelector('#apply-coupon').addEventListener('click', function() {
  var couponCode = document.querySelector('#coupon-input').value;
  sealmetrics.micro('apply_coupon', {
    coupon_code: couponCode
  });
});
```

### Search

```javascript
document.querySelector('#search-form').addEventListener('submit', function() {
  var query = document.querySelector('#search-input').value;
  sealmetrics.micro('search', {
    search_term: query
  });
});
```

---

## Complete E-commerce Funnel

```
┌─────────────────────────────────────────────────────────────────┐
│                    E-COMMERCE FUNNEL                             │
├─────────────────────────────────────────────────────────────────┤
│                                                                  │
│   Landing Page ──► Product Page ──► Add to Cart ──► Cart        │
│   (pageview)       (pageview)       (micro)         (micro)     │
│                                                                  │
│        │                                              │          │
│        ▼                                              ▼          │
│   Begin Checkout ──► Shipping Info ──► Payment ──► Purchase     │
│   (micro)            (micro)           (micro)      (CONV)      │
│                                                                  │
└─────────────────────────────────────────────────────────────────┘
```

| Step | Event Type | Function |
|------|------------|----------|
| Landing | Pageview | Automatic |
| Product view | Pageview | Automatic |
| Add to cart | Micro | `sealmetrics.micro('add_to_cart')` |
| View cart | Micro | `sealmetrics.micro('view_cart')` |
| Begin checkout | Micro | `sealmetrics.micro('begin_checkout')` |
| Add shipping | Micro | `sealmetrics.micro('add_shipping_info')` |
| Add payment | Micro | `sealmetrics.micro('add_payment_info')` |
| **Purchase** | **Conversion** | `sealmetrics.conv('purchase', amount)` |

---

## What can you analyze in the dashboard? {#dashboard-analysis}

After implementing, you can analyze:

### Traffic Sources
- Which campaigns drive the most revenue
- ROAS by utm_source/utm_medium
- Best performing ad creatives

### Funnel Drop-off
- Cart abandonment rate
- Checkout step completion rates
- Where users exit the funnel

### Product Performance
- Which products are viewed vs purchased
- Add-to-cart rate by category
- Revenue by product (if passing properties)

### Content Grouping
- Compare conversion rates: home → product → checkout
- Identify high-performing page types

**Note:**
- Three event types cover the store funnel: automatic pageviews, microconversions via `sealmetrics.micro()` (add_to_cart, view_cart, begin_checkout, shipping and payment steps) and the purchase conversion via `sealmetrics.conv('purchase', amount)`.
- Pass `currency`, `payment_method` and an `items` array on the purchase call; the WooCommerce, Shopify, Magento 2 and PrestaShop examples include duplicate-tracking guards.
- Content grouping (home, category, product, cart, checkout) lets you compare conversion rates by page type in the dashboard.

## Related documentation

- [E-commerce Conversion Tracking](/implementation/ecommerce-conversion-tracking) — full reference for the purchase and revenue events used in this guide
- [E-commerce Setup Guide](/implementation/ecommerce-conversion-tracking/ecommerce-setup-guide) — step-by-step store setup with deduplication patterns
- [Installation](/implementation/tracker/installation) — detailed guide for adding the tracking script
- [Conversions Report](/reports/conversions) — analyze purchases and revenue by source once data flows
- [Funnel Report](/reports/funnel) — measure cart abandonment and checkout drop-off