# 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:

```javascript
<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>
```

{% hint style="warning" %}
&#x20;Don't forget to replace "YOUR\_KEY" with your account's key.
{% endhint %}

### 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> ✨

```bash
<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:

![](https://1421794749-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MaGcfSakhqdHaWyb0T_%2F-Mf3nlQOUohwsBQbX-Dq%2F-Mf3rtDfTQBckwaiL9Yo%2FCapture.PNG?alt=media\&token=bdc34cb0-70b1-4a4e-9b8a-1d6cd92dbd28)
