Skip to main content

Webflow Integration

Privacy-first, cookieless analytics for Webflow sites with automatic event tracking.

Installation​

  1. Go to Project Settings > Custom Code
  2. In the Head Code section, paste the tracking script
  3. Replace YOUR_ACCOUNT_ID with your Account ID
  4. Publish your site

Method 2: Specific Pages​

  1. Open the page in the Designer
  2. Go to Page Settings > Custom Code
  3. Add the script to Inside <head> tag
  4. Publish

Configuration​

<script>
// Required: Your SealMetrics Account ID
var SEALMETRICS_ACCOUNT_ID = 'YOUR_ACCOUNT_ID';

// Optional: Track contact forms as lead conversions (default: false)
var SEALMETRICS_CONTACT_AS_LEAD = false;
</script>
<script src="https://cdn.sealmetrics.com/webflow/sealmetrics-webflow.js" async></script>

Automatic Events​

The script automatically tracks these events without any additional configuration:

EventDescription
pageviewAll page views with content grouping
form_submitForm submissions (non-newsletter)
newsletter_signupNewsletter form submissions
cta_clickCTA button clicks
outbound_clickExternal link clicks
file_downloadPDF, ZIP, DOC, XLS, PPT downloads
scroll_depth25%, 50%, 75%, 100% scroll
video_playVideo starts playing
video_progressVideo 25%, 50%, 75% progress
video_completeVideo finishes
tab_clickWebflow tab interactions
slider_interactionSlider arrow clicks
lightbox_openLightbox opens

Webflow E-commerce Events​

If using Webflow E-commerce, these events are tracked automatically:

EventDescription
view_itemProduct page views
add_to_cartAdd to cart clicks
begin_checkoutCheckout button clicks
purchaseOrder confirmation (conversion)

Content Groups​

The script automatically detects page types:

URL PatternGroup
/ or /homehome
/blog/*blog
/blogblog-index
/products/*product
/services/*service
/portfolio/*, /work/*, /projects/*portfolio
/about*, /team*, /about-us*about
/contact*contact
/pricing*, /plans*pricing
/faq*, /help*faq
/case-stud*, /success-stor*case-study
/thank*thankyou
/cartcart
/checkoutcheckout
/legal*, /privacy*, /terms*legal
/careers*, /jobs*careers
CMS collection items{collection_name}

Form Detection​

Newsletter Forms​

Automatically detected and tracked as newsletter_signup:

  • Form name/ID/class contains: newsletter, subscribe, mailchimp, convertkit, klaviyo, optin, etc.
  • Forms with only an email field

Contact Forms​

Tracked as form_submit or lead (if SEALMETRICS_CONTACT_AS_LEAD = true)

CTA Button Tracking​

Add data-track attribute or use specific CSS classes:

<!-- Option 1: data-track attribute -->
<a href="/signup" data-track="hero-signup">Get Started</a>

<!-- Option 2: CSS classes -->
<a href="/signup" class="cta-button">Get Started</a>
<button class="primary-button">Learn More</button>

This tracks a cta_click event with:

  • button_text: Button text content
  • button_id: Button ID (if set)
  • track_name: Value of data-track attribute
  • button_location: Parent section ID or class

Video Tracking​

Native HTML5 Videos​

Automatically tracked:

  • video_play: When video starts
  • video_progress: At 25%, 50%, 75%
  • video_complete: When video ends

YouTube/Vimeo Embeds​

Basic click-to-play tracking (click triggers video_play)

Custom Events​

Track custom events anywhere on your site:

<script>
// Wait for SealMetrics to load
function trackEvent() {
  if (typeof sealmetrics !== 'undefined') {
    sealmetrics.micro('custom_event', {
      property: 'value'
    });
  } else {
    setTimeout(trackEvent, 100);
  }
}
trackEvent();
</script>

Conversions​

For lead generation or purchases:

// Lead conversion (contact form, quote request)
sealmetrics.conv('lead', 0, {
  source: 'contact_form'
});

// Purchase (if not using Webflow Ecommerce auto-tracking)
sealmetrics.conv('purchase', 99.99, {
  currency: 'USD'
});

// Signup
sealmetrics.conv('signup', 0, {
  plan: 'free'
});

Privacy​

  • No cookies used
  • No personal data collected
  • GDPR compliant by design
  • No consent banner needed