๐Ÿ“ˆ
Adding Segment to Webflow

How to add Segment to a Webflow site to track button clicks

Once you have added a Source and a Destination on your Segment account, follow the next steps:

Step 1: Add custom code on the <head> of the project

Go to Connections > Sources and select your Source, here you will find your snippet. Copy and paste it on the head of your project.
Sample snippet:
1
<script>
2
!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_KEY";analytics.SNIPPET_VERSION="4.13.2";
3
analytics.load("YOUR_KEY");
4
analytics.page();
5
}}();
6
</script>
Copied!
Don't forget to replace "YOUR_KEY" with your account's key.

Step 2: Add attributes to your buttons

Add custom attributes to the buttons you want to track for the data you want to receive (e.g. action, position, page, etc.)
Sample custom attributes:
  • data-analytics = "Clicked Book Demo"
  • data-property-position = "Top"
  • data-property-pageName = "Home"
1
<script>
2
$(document).ready(function() {
3
$('[data-analytics]').on('click', function(e) {
4
var properties
5
var event = $(this).attr('data-analytics')
6
$.each(this.attributes, function(_, attribute) {
7
if (attribute.name.startsWith('data-property-')) {
8
if (!properties) properties = {}
9
var property = attribute.name.split('data-property-')[1]
10
properties[property] = attribute.value
11
}
12
})
13
analytics.track(event, properties)
14
})
15
})
16
โ€‹
17
</script>
Copied!

Step 4: Test that the data is coming through

This is what should be received when a button is clicked with the sample attributes: