---
title: "Step-by-Step Implementation Guide"
description: "Complete visual guide to implement Sealmetrics tracking on your website, from basic pageviews to conversions and funnels."
canonical_url: "https://docs.sealmetrics.com/implementation/tracker/step-by-step-guide"
lang: "en"
date_generated: "2026-08-12T08:27:36.924Z"
source_hash: "a87b8ae3381aea5934f275930f7c5d4d22901d82dcdaf0741a76e063bd99801a"
content_type: "implementation"
owner: "engineering"
llm_priority: "critical"
source_file: "implementation/tracker/step-by-step-guide.mdx"
publisher: "Sealmetrics"
---
# Step-by-Step Implementation Guide
Canonical page: https://docs.sealmetrics.com/implementation/tracker/step-by-step-guide
This guide walks you through implementing Sealmetrics tracking on your website. By the end, you'll have:
- ✅ Basic pageview tracking
- ✅ Conversion tracking (purchases, leads, signups)
- ✅ Microconversion tracking (add to cart, funnel steps)
- ✅ Verified data flowing to your dashboard
---
## Before You Start
### What You Need
| Requirement | Where to Find It |
|-------------|------------------|
| Sealmetrics Site ID | Settings → Sites → [your site] → General tab |
| Access to your website's HTML | Theme editor, CMS, or code repository |
| 15 minutes | That's all it takes! |
### Find Your Site ID
1. Log in to [my.sealmetrics.com](https://my.sealmetrics.com)
2. Go to **Settings → Sites**
3. Click on your site
4. Copy the **Site ID** from the General tab (use the copy button next to it)
---
## Step 1: Install the Tracking Pixel
### 1.1 Add the Script Tag
Add this single line to your website's `` section:
```html
```
Replace `YOUR_SITE_ID` with your actual Site ID.
### 1.2 Where to Add It
```html
My Website
```
### 1.3 Platform-Specific Instructions
If you can't edit the HTML directly, follow the guide for your platform — each one shows exactly where the snippet goes:
- [WordPress](/integrations/cms/wordpress)
- [WooCommerce](/integrations/ecommerce/woocommerce)
- [Shopify](/integrations/ecommerce/shopify)
- [Wix](/integrations/website-builders/wix)
- [Squarespace](/integrations/website-builders/squarespace)
- [Webflow](/integrations/website-builders/webflow)
- [Next.js](/integrations/frameworks/nextjs)
- [Nuxt 3](/integrations/frameworks/nuxt)
- [React](/integrations/frameworks/react)
- [Google Tag Manager](/integrations/google-tag-manager)
Using something else? See [all integrations](/integrations), or the [Installation guide](/implementation/tracker/installation) for the manual snippet and its parameters.
---
## Step 2: Verify Installation
### 2.1 Open Browser DevTools
1. Visit your website
2. Press `F12` (or right-click → Inspect)
3. Go to **Console** tab
### 2.2 Check the Tracker Loaded
Type in console:
```javascript
typeof sealmetrics
```
Expected result:
```
"function"
```
If you see `"undefined"`, the script hasn't loaded yet. Check:
- Script URL is correct
- Site ID is valid
- No adblocker interference
### 2.3 Check Network Requests
1. Go to **Network** tab in DevTools
2. Filter by `event`
3. Reload the page
4. Look for a POST request to `/event`
```
┌─────────────────────────────────────────────────────────┐
│ Network Filter: event│
├─────────────────────────────────────────────────────────┤
│ Name Status Type Size Time │
│ ───────────────────────────────────────────────────── │
│ event 204 fetch 0 B 45 ms ✓ │
│ │
└─────────────────────────────────────────────────────────┘
```
**Status 204** = Success! The event was received.
### 2.4 Inspect the Request Payload
To confirm what is being sent, click the `/event` request in the Network tab and look at the request payload. It is a form-encoded body with a single field `d` containing the JSON (account ID `a`, session ID `s`, current URL `u`, timezone `z`, etc.). For a pageview there is no `e`/`m`/`v` field; those only appear on conversions and microconversions.
You can also read the tracker's own state from the console:
```javascript
sealmetrics.sessionId; // current session ID
sealmetrics.autoMode; // "1" (auto-pageview on) or "0" (manual)
```
---
## Step 3: Add Content Grouping (Optional)
Content grouping helps you analyze performance by section (blog, products, checkout).
### 3.1 Add Group Parameter
Modify your script tag to include a `group`:
```html
```
### 3.2 Dynamic Grouping (Advanced)
For CMS/dynamic sites, generate the group server-side:
```php
```
---
## Step 4: Track Conversions
Conversions are goal completions with monetary value: purchases, leads, signups.
### 4.1 Basic Conversion
```javascript
sealmetrics.conv('purchase', 99.99);
```
| Parameter | Type | Description |
|-----------|------|-------------|
| Type | string | `'purchase'`, `'lead'`, `'signup'`, etc. |
| Amount | number | Monetary value (use `0` for non-monetary) |
### 4.2 Conversion with Properties
```javascript
sealmetrics.conv('purchase', 149.99, {
currency: 'EUR',
payment_method: 'credit_card',
coupon: 'SAVE10'
});
```
### 4.3 Implementation: Thank You Page
The most common pattern is tracking on your order confirmation page.
**Static HTML:**
```html
```
**PHP (WooCommerce, custom):**
```php
```
**Shopify:**
In **Settings → Checkout → Additional scripts**:
```html
```
### 4.4 Common Conversion Types
| Type | Amount | When to Use |
|------|--------|-------------|
| `purchase` | Order total | E-commerce checkout complete |
| `lead` | `0` | Contact form submitted |
| `signup` | `0` | Account created |
| `subscription` | Monthly price | SaaS subscription started |
| `booking` | Booking value | Reservation confirmed |
| `download` | `0` | Lead magnet downloaded |
### 4.5 Prevent Duplicate Conversions
Users might refresh the thank-you page. Prevent duplicates:
**Option A: Server-side flag (recommended)**
```php
is_tracked()) {
echo '';
$order->mark_as_tracked();
}
?>
```
**Option B: Client-side localStorage**
```javascript
var orderId = 'ORD-12345';
if (!localStorage.getItem('tracked_' + orderId)) {
sealmetrics.conv('purchase', 99.99);
localStorage.setItem('tracked_' + orderId, 'true');
}
```
---
## Step 5: Track Microconversions
Microconversions are user interactions that indicate progress toward a conversion.
### 5.1 Basic Microconversion
```javascript
sealmetrics.micro('add_to_cart');
```
### 5.2 Microconversion with Properties
```javascript
sealmetrics.micro('add_to_cart', {
product_id: 'SKU-123',
product_name: 'Blue Sneakers',
price: '89.99'
});
```
### 5.3 E-commerce Funnel Example
Track the complete customer journey:
```javascript
// Step 1: Product viewed (automatic pageview)
// Step 2: Added to cart
document.querySelector('.add-to-cart').addEventListener('click', function() {
sealmetrics.micro('add_to_cart', {
product_id: this.dataset.productId,
price: this.dataset.price
});
});
// Step 3: View cart
// On cart page load:
sealmetrics.micro('view_cart', {
items_count: '3',
cart_value: '267.99'
});
// Step 4: Begin checkout
document.querySelector('.checkout-button').addEventListener('click', function() {
sealmetrics.micro('begin_checkout');
});
// Step 5: Add shipping info
// On shipping form submit:
sealmetrics.micro('add_shipping_info', {
shipping_method: 'express'
});
// Step 6: Add payment info
// On payment form submit:
sealmetrics.micro('add_payment_info', {
payment_method: 'credit_card'
});
// Step 7: Purchase (CONVERSION, not microconversion)
// On thank-you page:
sealmetrics.conv('purchase', 267.99, {
currency: 'EUR'
});
```
### 5.4 SaaS Funnel Example
```javascript
// Pricing page: Toggle billing cycle
document.querySelector('.billing-toggle').addEventListener('click', function() {
sealmetrics.micro('toggle_billing', {
selected: this.dataset.cycle // 'monthly' or 'yearly'
});
});
// Pricing page: Click "Start Trial"
document.querySelector('.start-trial').addEventListener('click', function() {
sealmetrics.micro('click_start_trial', {
plan: this.dataset.plan
});
});
// Signup form submitted
document.querySelector('#signup-form').addEventListener('submit', function() {
sealmetrics.micro('signup_started');
});
// Trial started (CONVERSION)
sealmetrics.conv('signup', 0, {
plan: 'pro',
trial: 'true'
});
// Later: Trial converted to paid (CONVERSION)
sealmetrics.conv('subscription', 49, {
plan: 'pro',
billing_cycle: 'monthly'
});
```
### 5.5 Content Engagement
```javascript
// Scroll depth tracking
var tracked = {};
window.addEventListener('scroll', function() {
var scrollPercent = Math.round((window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) * 100);
[25, 50, 75, 100].forEach(function(milestone) {
if (scrollPercent >= milestone && !tracked[milestone]) {
tracked[milestone] = true;
sealmetrics.micro('scroll_' + milestone);
}
});
});
// Video engagement
var video = document.querySelector('video');
video.addEventListener('play', function() {
sealmetrics.micro('video_play', {
video_id: this.dataset.videoId
});
});
video.addEventListener('ended', function() {
sealmetrics.micro('video_complete', {
video_id: this.dataset.videoId
});
});
// Newsletter signup
document.querySelector('#newsletter').addEventListener('submit', function() {
sealmetrics.micro('newsletter_signup', {
position: 'footer'
});
});
```
---
## Step 6: Verify in Dashboard
### 6.1 Check Data Is Arriving
1. Go to [my.sealmetrics.com](https://my.sealmetrics.com)
2. Open your site's **Overview** report
3. Visit your website in another tab
4. Within seconds, the **Last hit** timestamp at the top right of the Overview updates and your visit is reflected in the Entrances and Pageviews numbers
### 6.2 Check Conversions
1. Trigger a test conversion on your site
2. Go to **Conversions** report
3. Set date range to **Today**
4. Verify your conversion appears
### 6.3 Check Funnel
1. Go to **Funnel** report
2. View microconversions by step
3. Analyze drop-off between steps
---
## Complete Implementation Checklist
### Basic Setup
- [ ] Script added to all pages
- [ ] Correct Site ID in script URL
- [ ] Verified `typeof sealmetrics === 'function'` in console
- [ ] Verified 204 response in Network tab
- [ ] "Last hit" updating on the Overview report
### Conversions
- [ ] Conversion tracking on thank-you/confirmation page
- [ ] Correct amount passed to `sealmetrics.conv()`
- [ ] Deduplication in place (no double-counting)
- [ ] Properties include currency if applicable
### Microconversions (if applicable)
- [ ] Add to cart tracked
- [ ] Checkout funnel steps tracked
- [ ] Key engagement events tracked (scroll, video, etc.)
### Content Grouping (optional)
- [ ] Different groups for different page types
- [ ] Groups appearing in dashboard reports
---
## Troubleshooting
### Script not loading
| Symptom | Solution |
|---------|----------|
| `typeof sealmetrics` returns `undefined` | Check script URL, Site ID, no typos |
| 404 error in Network | Verify script URL is exactly correct |
| Script blocked | Check adblocker, CSP headers |
### Events not appearing in dashboard
| Symptom | Solution |
|---------|----------|
| 204 response but no data | Check the **Last hit** timestamp on the Overview report — if it doesn't move within seconds of a test visit, nothing is arriving ([Data Delay](/troubleshooting/data-delay)). If it does move, check you're looking at the correct account, date range and timezone |
| Non-204 response | Check Site ID, domain authorization |
| Data in wrong account | Verify Site ID in script matches dashboard |
### Conversions not tracking
| Symptom | Solution |
|---------|----------|
| Conversion fires but not in dashboard | Check `window.addEventListener('load')` wrapper |
| Double conversions | Implement deduplication (Step 4.5) |
| Amount is 0 | Ensure amount is a number, not string |
### No request appears in the Network tab
If you do not see a POST to `/event`:
1. Clear browser cache and reload
2. Disable browser extensions (ad/tracker blockers)
3. Try an incognito window
4. Confirm `typeof sealmetrics === 'function'` in the console
---
## Next Steps
Now that tracking is set up:
1. **[Set up content grouping](/implementation/tracker/installation#with-content-grouping)** to analyze by page type
2. **[Configure alerts](/lens/anomaly-detection)** for traffic anomalies
3. **[Use LENS AI](/lens/ai-assistant)** to ask questions about your data
4. **[Export data](/api/exports)** for external analysis
---
## Need Help?
- **Documentation**: [docs.sealmetrics.com](https://docs.sealmetrics.com)
- **API Reference**: [Tracker API Reference](/implementation/tracker/api-reference)
- **Support**: support@sealmetrics.com