---
"@context": https://schema.org
"@type": TechArticle
"@id": https://www.twilio.com/docs/segment/connections/sources/catalog/libraries/website/javascript/spa#article
headline: Single Page Apps with Analytics.js
description: Use Analytics.js or the analytics-node package to track events in single-page applications built with frameworks like React or Vue.
url: https://www.twilio.com/docs/segment/connections/sources/catalog/libraries/website/javascript/spa
inLanguage: en
dateModified: 2026-06-25T22:35:15.000Z
author:
  "@type": Organization
  name: Twilio Developer Education Team
publisher:
  "@type": Organization
  name: Twilio
---

# Single Page Apps with Analytics.js

Analytics.js can work with your single-page applications built with technologies such as React or Vue.

## Integrating with your build tooling

If you have a single-page application and plan to use Segment a lot, you might need to add [a Segment server analytics library](/docs/segment/connections/sources/catalog/#server) to your build system. You can do this using Segment's `analytics-node` package instead of using the Analytics.js javascript code snippet. The Analytics-Node package works like any standard node-js dependency.

First add the package as a dependency:

```sh
$ npm install analytics-node
```

or, if you are using `yarn`:

```sh
$ yarn add analytics-node
```

Once installed, you can import `analytics-node` and instrument your events the same way you would with Analytics.js. The example implementation below is in React:

```js
import Analytics from 'analytics-node'

const analytics = new Analytics("YOUR WRITE KEY")

class ShoppingCartButton {
    onPurchase = () => {
        analytics.track("Item Purchased", {
            itemId: "abc"
        })
    }

    render() {
        return <button onClick={this.onPurchase}>Buy Item</button>
    }

}
```