Segment

Your Webflow site generates traffic, form submissions, and content interactions. But there's no built-in system for collecting that behavioral data, unifying it across tools, or routing it to downstream platforms like Google Analytics, HubSpot, or Amplitude. Each new tool typically needs its own tracking script added to custom code in head and body tags, and managing multiple scripts across pages gets difficult to maintain.

Segment is a single data collection layer. One JavaScript snippet on your Webflow site captures page views, clicks, form submissions, and custom events, then routes that data to 700+ destinations through Segment's dashboard. Adding or removing a tool from your analytics stack becomes a toggle in Segment's UI instead of a code change in your site.

Marketing teams can track campaign attribution across tools, SaaS companies can map the full visitor-to-customer journey, agencies can manage analytics across multiple client sites, and growth engineers can keep clean event data flowing into warehouses like Redshift or BigQuery.

How to integrate Segment with Webflow

What is Segment? Segment is a customer data platform (CDP) that collects first-party data from websites, apps, and servers, then routes it to analytics, marketing, advertising, and data warehouse destinations. It follows a collect, unify, and activate model across three product layers: Connections for data pipelines, Unify for identity resolution, and Engage for audience building and campaign management.

Pair Segment with your Webflow site when you need to send behavioral data from your marketing site to multiple tools simultaneously. Instead of adding separate tracking scripts for each analytics or marketing platform, you get a single point of collection. Content teams tracking blog engagement, demand generation teams attributing leads to campaigns, and e-commerce teams measuring purchase funnels all benefit from this centralized approach.

You can connect Segment to your Webflow site in 3 ways:

• Analytics.js via custom code is the site-wide method for page view tracking and custom event collection without a marketplace app.
• Zapier and n8n connect form submissions and orders to Segment through automation workflows.
• The Data API v2 and Segment APIs support server-side event tracking, webhook-driven data flows, and bidirectional CMS syncing, but require server-side development.

Most implementations combine two or more of these methods depending on how involved the setup gets.

Add Segment Analytics.js with custom code

Connect Segment by pasting Segment's Analytics.js snippet into your site's custom code settings. This loads Segment on every page, automatically tracks page views, and lets you add custom event tracking with small JavaScript additions. Both the Webflow integrations page and Segment officially document this approach. You need a paid site plan because free plans don't include access to custom code settings.

Analytics.js loads asynchronously. The inline bootstrap snippet adds approximately 1.1 KB to the page, while the downloaded Analytics.js library itself is larger and varies depending on your setup. It doesn't block page rendering and uses first-party cookies only. Once you install it, you can add or remove downstream analytics tools entirely from Segment's dashboard without going back to your code settings.

[image placeholder]

To set up the integration:

1. In the Segment app, go to Connections > Sources and click Add Source. Select JavaScript (Website) and name it (for example, "Webflow Production"). Segment generates a Write Key unique to that source.
2. Open the Overview tab of your new source and copy the full Analytics.js snippet. Confirm the Write Key is correct under the Settings tab.
3. Go to Site Settings > Custom Code and paste the snippet into the Head Code section.
4. Click Save Changes, then Publish your site. Custom code doesn't go live until you publish.

Once you publish, Segment's analytics.page() call fires automatically on every page load. Standard sites perform full page reloads on navigation, so page view tracking works without any single-page application routing logic.

Verify events are flowing by checking the Source Debugger in Segment's app. If events aren't appearing, the most common cause is saving without publishing. The Segment delivery overview covers additional debugging tools for tracing events from source to destination.

Track form submissions

Forms submit via AJAX without a full page reload. Segment's built-in analytics.trackForm() method can conflict with this behavior, and submit handlers that prevent the default form action can interfere with the AJAX submission flow. A safer pattern is to fire a track call from a submission listener without blocking the form, then test the behavior on your published site.

To track form submissions:

1. Confirm the Analytics.js snippet is already in your Head Code (from the setup steps above).
2. Add JavaScript to Site Settings > Custom Code > Footer Code (the before-</body> section) that listens for form submission and sends a Segment event without preventing the submission.
3. Publish your site and test by submitting a form, then check the Source Debugger in Segment.

A minimal pattern looks like:

document.querySelectorAll("form").forEach((form) => {
  form.addEventListener("submit", () => {
    analytics.track("Form Submitted", {
      form_name: form.getAttribute("data-name") || form.id
    });
  });
});

Placing the tracking code in the Footer Code section means page content loads before the JavaScript executes. For more targeted tracking, you can also add this script to individual page settings or a Code Embed element instead of site-wide.

Track CMS content interactions

CMS template pages support variable injection in their page-level custom code fields. This lets you fire Segment events that include the specific CMS item's title, slug, and category at render time.

To track CMS content views:

1. Open the CMS template page (for example, the Blog Posts Template).
2. Click the page settings icon and scroll to the Before </body> tag custom code field.
3. Use the + Add Field link to insert CMS field values, then add a script like:

<script>
analytics.track("Blog Post Viewed", {
  title: '<title variable goes here>',
  slug: '<slug variable goes here>',
  category: '<category variable goes here>'
});
</script>

4. Replace the placeholder text with actual CMS field bindings using the + Add Field selector. Publish to activate.

CMS variable injection via + Add Field only works in template-level custom code fields. It doesn't work in the site-wide custom code settings. The official Segment recipe walks through this pattern using a blog post template.

Route through Google Tag Manager

If your team already manages tracking scripts through Google Tag Manager (GTM), you can load Segment's Analytics.js through a GTM container instead of pasting it directly into your site.

To set up Segment through GTM:

1. Install GTM on your site. Use the Google Site Tools app from the Marketplace for a no-code GTM deployment, or paste the GTM snippets manually into Site Settings > Custom Code (head and footer sections).
2. In GTM, create a new Custom HTML Tag and paste the full Segment Analytics.js snippet.
3. Set the trigger to All Pages and publish the GTM container.

This approach puts all tracking script management in GTM. Future changes to Segment or other tools happen in GTM without going back to your code settings. Segment also offers a Google Tag Manager destination that loads GTM automatically on pages where Analytics.js is initialized, populating the GTM dataLayer with Segment track events.

Connect with Zapier or n8n

You can send data to Segment without writing custom JavaScript by using Zapier and n8n. These automation platforms let you map triggers to Segment actions through visual workflow builders.

Zapier supports these workflows:

• New form submission triggers a Segment Send Event action
• New order triggers a Segment Send Event action
• Updated order triggers a Segment Send Event action
• Segment new event triggers a Create or Update CMS Item action

n8n supports these workflows:

• Form submission webhook → Segment Identify
• Page event → Segment Page
• Order or form event → Segment Track
• Membership event → Segment Group
• Segment event → Item Create or Update

To connect through Zapier:

1. In Zapier, create a new Zap and select Webflow as the trigger app. Choose a trigger type, such as New Form Submission.
2. Select Segment as the action app and choose Send Event (or another action like Create Source).
3. Map the form fields to Segment event properties and activate the Zap.

Once you activate it, test a submission and check Segment to confirm the event appears in your workspace.

The Segment "New Event" trigger in Zapier requires a Zapier Actions destination configured inside Segment first. This is useful for bidirectional flows, such as creating CMS items when Segment receives specific events from other sources.

Build with the Webflow and Segment APIs

For server-side tracking, bidirectional data flows, or bypassing browser-based ad blockers, connect through the APIs. This approach requires server-side development using an external service like AWS Lambda, Cloudflare Workers, or Vercel serverless functions. Published sites are static HTML, CSS, and JavaScript with no native server-side execution environment.

Use these APIs:

• Segment's HTTP Tracking API supports server-side Identify, Track, Page, Group, Alias, and Batch calls via POST requests to https://api.segment.io/v1/
• The Data API v2 covers CMS collections, form submissions, and site data
• Webhooks send real-time events like form_submission, collection_item_created, and ecomm_new_order that your server can forward to Segment

Use server-side tracking for revenue events and identify calls where data loss from ad blockers is unacceptable. Segment's guidance on client vs. server tracking recommends server-side for any event that directly affects user profiles or revenue attribution.

Forward webhooks to Segment

Webhooks send real-time HTTP POST requests to your server whenever specific events occur. Your server then transforms the payload and forwards it to Segment's HTTP Tracking API.

To implement webhook-to-Segment forwarding:

1. Generate a Site API token under Site Settings > Apps & integrations > API access. Select the forms:read and sites:read scopes.
2. Register a webhook by sending a POST request to https://api.webflow.com/v2/sites/{site_id}/webhooks with the triggerType set to form_submission and the url pointing to your server endpoint. Filter by form name using the filter object.
3. On your server, parse the incoming payload and forward it to Segment. Authenticate with Segment using HTTP Basic Auth, with your Write Key as the username and an empty password (include the trailing colon before Base64 encoding).

A request to Segment's Track endpoint looks like:

POST https://api.segment.io/v1/track
Authorization: Basic base64(writeKey:)
Content-Type: application/json

{
  "type": "track",
  "userId": "zaphod@heartofgold.ai",
  "event": "Form Submitted",
  "properties": {
    "formName": "Contact Us",
    "siteId": "65427cf400e02b306eaa049c"
  }
}

Webhooks are available for form_submission, collection_item_created, collection_item_changed, collection_item_deleted, collection_item_unpublished, ecomm_new_order, ecomm_order_changed, and ecomm_inventory_changed. Each webhook registration counts toward a limit of 75 per trigger type per site.

These webhook types cover the most common real-time events you may want to forward into Segment.

Use Segment Source Functions

Segment Source Functions provide an HTTP endpoint that webhooks can POST to directly, so you don't need to run your own server infrastructure.

To set up a Source Function:

1. In Segment, create a new Source Function. Segment generates a unique HTTP endpoint URL.
2. Write a function that parses the webhook payload and emits Segment calls:

async function onRequest(request, settings) {
  const body = request.json();

  if (body.triggerType === 'form_submission') {
    Segment.identify({
      userId: body.payload.data.email,
      traits: {
        email: body.payload.data.email,
        firstName: body.payload.data['First Name'],
        lastName: body.payload.data['Last Name']
      }
    });
    Segment.track({
      event: 'Form Submitted',
      userId: body.payload.data.email,
      properties: {
        formName: body.payload.name,
        siteId: body.payload.siteId
      }
    });
  }
}

3. Register a webhook pointing to the Source Function's production endpoint URL (the production URL differs from the test URL).

This setup gives you a direct server-side path for forwarding webhook data into Segment without running your own server infrastructure.

What can you build with the Segment Webflow integration?

Integrating Segment lets you collect and route behavioral data from your marketing site to any combination of analytics, marketing, and warehouse tools without managing multiple tracking scripts.

• Multi-tool analytics from a single script: Install Analytics.js once on your site and route page views, form submissions, and custom events to Google Analytics, Amplitude, Mixpanel, and your data warehouse simultaneously. Add or remove destinations in Segment's UI without touching your code settings.
• Full-funnel visitor journey mapping: Track anonymous visitors with analytics.page() on every page load, fire analytics.track() on key interactions like pricing page views or feature comparisons, and stitch anonymous sessions to identified users with analytics.identify() when they submit a form. Segment's identity resolution connects the path between a first visit and conversion.
• CMS content performance attribution: Fire named events on CMS template pages that capture blog post titles, categories, and slugs at render time. Route that data to your analytics tool to measure which content drives pipeline, not just page views.
• Form-to-CRM lead routing with attribution data: Capture form submissions as Segment events, attach UTM parameters and session context automatically, and route the enriched lead data to Salesforce, HubSpot, or any CRM destination. Server-side forwarding via webhooks and Source Functions captures this data even when visitors use ad blockers.

If you need more control over server-side event processing or bidirectional CMS syncing, the API integration path covers those cases.