📈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:
<script>
!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";
analytics.load("YOUR_KEY");
analytics.page();
}}();
</script>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"
Step 3: Add the magical custom code on your project's <footer> ✨
<script>
$(document).ready(function() {
$('[data-analytics]').on('click', function(e) {
var properties
var event = $(this).attr('data-analytics')
$.each(this.attributes, function(_, attribute) {
if (attribute.name.startsWith('data-property-')) {
if (!properties) properties = {}
var property = attribute.name.split('data-property-')[1]
properties[property] = attribute.value
}
})
analytics.track(event, properties)
})
})
</script>Step 4: Test that the data is coming through
This is what should be received when a button is clicked with the sample attributes:
Last updated
Was this helpful?