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.
