# Tracking Analytics in Segment

Savvy has a built-in Segment integration to easily track events and send them straight to Segment.

Follow the steps below to get set up.

### Step 1: (Outside Savvy) Install Segment on the page

{% hint style="info" %}
This step happens outside Savvy, in whatever software you use for hosting your website or web app that contains the Savvy Flow. For example, it might be in Webflow, Wix, Squarespace, Wordpress or your own self-hosted React app.
{% endhint %}

* Follow Segment's instructions for how to install Segment on the website or webpage where the Savvy Flow is included.

### Step 2 (Optional): Add an identify event

* Savvy doesn't automatically include identify events, but you can include one by setting up a Data Output
* Set the Data Output to type `Custom` and `Manual Trigger Only`
* Add the following code to the Data Output, replacing the fields with the user properties you want to store

```
function output(userData) {
    if (!window.analytics) return
    
    window.analytics.identify({
        email: userData.email,
        name: userData.name,
        age_range: userData.age_range,
    })
}
```

* Trigger the Data Output at whatever point you want to identify the user - usually after the key data (e.g. email) is collected
  * Alternatively you could use a Computed Field here so that it triggers every time the relevant User Data fields are updated

### Step 3: Add a Segment Conversion event in Savvy

* Select the page or component to that should trigger the event
* Open the **Triggers** sidebar and find the **Conversions** section
* Add a Conversion and choose Segment
* Choose an event name (e.g. `Signed up` or `Reached Checkout`)

### Step 4 (Optional): Add data to send with the event

{% hint style="info" %}
This step involves writing javascript. If you're not comfortable writing javascript, feel free to ask a Savvy Expert for help and advice.
{% endhint %}

* In certain cases you might want to send extra "payload" data along with the event, e.g. the age range of the user that just signed up
* If so, include a function in the code box with the name `customPayload`
* The function must return a JSON object with the data you want to return. For example:

```
function customPayload(userData) {
    return {
        age_range: userData.age_range,
    }
}
```
