What is the process for adding Segment to Webflow?

To add Segment tracking to Webflow, you need to install the Segment analytics.js snippet in your project. Follow these steps to integrate Segment with Webflow.

1. Get Your Segment Analytics.js Code

• Log into Segment and go to your Workspace.
• Click on Settings > Source and select your Webflow project.
• Under Connection Settings, find the JavaScript snippet.
• Copy the entire analytics.js code snippet.

2. Add the Segment Code to Webflow

• Open Webflow and go to your project.
• Click on Project Settings > Custom Code.
• In the Header Code section, paste your copied analytics.js snippet.
• Click Save Changes and Publish your site.

3. Verify Segment is Tracking

• Open your published Webflow site.
• Use Segment’s Debugger:
• Go to Segment > Sources and select your Webflow project.
• Click Debugger to check if your site is sending tracking events.
• Optionally, open your browser’s Developer Console and type analytics.page();. If Segment is installed correctly, this should trigger a page event.

4. Add Event Tracking (Optional)

• Inside Webflow, go to Pages > Page Settings for any page where you need event tracking.
• Add custom JavaScript in the Before section:
• Example:
  • analytics.track("Button Clicked", { label: "Signup Button" });
• Publish and test in Segment Debugger.

Summary

Paste the Segment analytics.js snippet into Webflow’s Custom Code > Header section, publish, and confirm event tracking using the Segment Debugger. Optionally, add event tracking inside Webflow’s Before section for custom interactions.