Webflow is a low-code website builder that helps web designers and developers build sites fast and at scale. It's different from more traditional web Content Management Systems (CMS) in that it is SaaS based and takes care of all hosting, code assembly, code deployment, domain management, content delivery networks (CDN), and other processes behind the scenes.
This recipe walks through getting Twilio Segment's Analytics.js wired into a Webflow project so you can capture page views and structured custom events straight from your CMS-backed templates.
What you need
- Twilio Segment
- Webflow paid plan
Getting ready to use this recipe
If you want to try this at home, please make sure you complete the following before starting:
- Sign up for Webflow — you need a paid Webflow account tier, as we will be using custom code.
- Have access to a Twilio Segment workspace.
- Choose a free template for your Webflow project, and make sure it has CMS objects.
Installing and validating Page calls
Once you have access to Webflow, create your Webflow project.
Click on the "W" on the top left of the screen and select "Project Settings."
Click on "Custom Code" in the settings navigation.
On the Custom Code screen you can input code into either the website's header or footer. This is where we will insert our Twilio Segment Analytics.js code. We're putting it in the header to initialize it as high up in the DOM load as possible. Note that any code inserted here at the project level will be present on every page.
Leave the Webflow tab open and open a new tab. Log in to your Twilio Segment workspace. Click on Connections, then Sources. Click "Add Source" and select "Javascript" under the "Website" category.
Copy the Javascript snippet that Segment provides you.
Go back to your Webflow browser tab and paste the snippet into the header custom code box. Click "Save Changes," then click the blue "Publish" button in the top right to publish your site. In Webflow, Save only stores your progress — you have to Publish to see changes live.
Open the site you just published and click around. After a few clicks, go back to Twilio Segment and confirm that Page calls are showing up in the Source debugger.
Additional tip: If you want to pass a friendly name in your Page call to Segment, leverage the document title and trim it to the first string before the dash. This won't suit every site, but the approach can be adapted to how your titles are structured. For the Luna template I used here, the Title tag is the same across all pages, so once you modify the per-page title under Page Settings you'll see the page name come through in the debugger.
<script>
// Get the Page Title
const pageNameFull = document.title.split('-')[0];
// Trim the page title so you only return the first string before a dash
const pageNameTrimmed = pageNameFull.trim();
// Start Segment Analytics.js 2.0 code
!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(e){return function(){var t=Array.prototype.slice.call(arguments);t.unshift(e);analytics.push(t);return analytics}};for(var e=0;e<analytics.methods.length;e++){var key=analytics.methods[e];analytics[key]=analytics.factory(key)}analytics.load=function(key,e){var t=document.createElement("script");t.type="text/javascript";t.async=!0;t.src="https://cdn.segment.com/analytics.js/v1/" + key + "/analytics.min.js";var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(t,n);analytics._loadOptions=e};analytics._writeKey="your write key here";;analytics.SNIPPET_VERSION="4.15.3";
analytics.load('<your write key here>');
// use the variable we created above to pass in a friendly page name
analytics.page(`${pageNameTrimmed}`);
}}();
</script>Once you make that change and update the Page Title in Webflow, your page calls will show a friendlier title in the debugger.
Page calls are now flowing through. Next, let's add some Twilio Segment track calls to capture custom events and activity in Webflow. Before we move on, here are a few features of Webflow that are important context.
Pages in Webflow
Each page in Webflow can be accessed from the left rail of the Designer. Each page has additional settings — hover over the page name and click the gear to access them. You'll see options for SEO, thumbnails, and more. Toward the bottom you can add custom code to either the header or before the closing </body> tag. Any code added here loads only on that specific page, in addition to any project-level code (like our Analytics.js).
CMS Collections in Webflow
Webflow has a feature called CMS Collections. With these you can build objects like Blog Posts or other custom entity types. When you build a Collection, any fields you define are variables you can reference in your track calls via the custom code dialog in Page settings. Think of Collections as the data structure behind a content object — for example: Headline, Category, Author, Body Text, Hero Image, etc.
CMS Templates
CMS Templates pair with Collections — they describe how the data behind the scenes should visually render when the template loads. Instead of building a one-off page, you're defining how an instance of a CMS Collection should display to an end user. You might build templates for an individual blog post, or for a category page that groups posts together.
To access CMS Templates, go to the left rail in the Designer — any links shown in purple are CMS Templates.
For the next section we'll use the "Blog Posts Template."
Create a track call to capture blog post visits
Go to your Blog Posts Template in Webflow.
Click on the gear for the Blog Posts Template to open up the options for that template.
Scroll to the bottom of the options to find the "Before </body> tag" entry. We use this so the site waits until everything is loaded before writing our track call to Analytics.js.
Start writing your track call. You'll notice that you can pull in those CMS variables I mentioned where it says "+ Add Field." Make sure you wrap your name/value pairs in single or double quotes. Below is the basic structure — substitute the variable placeholders with the CMS fields exposed via "+ Add Field."
<script>
analytics.track("Blog post - Viewed", {
'title': '<title variable goes here>',
'slug': '<slug variable goes here>',
'category': '<category variable goes here>'
});
</script>Save your code via the blue Save button at the top of the options window. Then publish your site. Don't forget — Save doesn't auto-publish. If you don't see events firing in the debugger, you probably forgot to Publish.
Go check the debugger again for your Javascript source in Twilio Segment. You should see the "Blog Post - Viewed" event firing. Congrats — Webflow is now sending Segment a custom event every time a blog post is viewed on your site.
Conclusion
This is a great exercise for getting Segment's Analytics.js working with Webflow. From here you can use the same pattern to add additional events for button clicks, element hovers, and any other interactions that help you understand how customers are navigating and consuming your site.