Skip to content

Commit b79f1af

Browse files
bryanmikaeliansanscontextsanscontext
authored
AJS Documentation about SPAs (#1051)
* WIP * Documentation about SPAs * Update src/connections/sources/catalog/libraries/website/javascript/spa.md Co-authored-by: LRubin <[email protected]> * Update src/connections/sources/catalog/libraries/website/javascript/spa.md Co-authored-by: LRubin <[email protected]> * Fixes * Fixes * Update src/connections/sources/catalog/libraries/website/javascript/spa.md * quick edit Co-authored-by: LRubin <[email protected]> Co-authored-by: sanscontext <[email protected]>
1 parent d721431 commit b79f1af

File tree

1 file changed

+46
-0
lines changed
  • src/connections/sources/catalog/libraries/website/javascript

1 file changed

+46
-0
lines changed
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
---
2+
title: 'Single Page Apps with Analytics.js'
3+
hidden: true
4+
strat: ajs
5+
---
6+
7+
Analytics.js can work with your single-page applications built with technologies such as React or Vue.
8+
9+
## Integrating with your build tooling
10+
11+
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/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.
12+
13+
First add the package as a dependency:
14+
15+
```sh
16+
$ npm install analytics-node
17+
```
18+
19+
or, if you are using `yarn`:
20+
21+
```sh
22+
$ yarn add analytics-node
23+
```
24+
25+
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:
26+
27+
```js
28+
import Analytics from 'analytics-node'
29+
30+
const analytics = new Analytics("YOUR WRITE KEY")
31+
32+
class ShoppingCartButton {
33+
onPurchase = () => {
34+
analytics.Track("Item Purchased", {
35+
itemId: "abc"
36+
})
37+
}
38+
39+
render() {
40+
return <button onClick={this.onPurchase}>Buy Item</button>
41+
}
42+
43+
}
44+
```
45+
46+
**Note:** Segment's `analytics-node` package does not support [device-mode destinations](/docs/utils/cmodes-compare/) or some browser specific features that Analytics.js supports.

0 commit comments

Comments
 (0)