https://github.com/coreyward/gatsby-plugin-segment-analytics
https://github.com/coreyward/gatsby-plugin-segment-analytics
gatsby gatsby-plugin segment-analytics segmentio
Last synced: 15 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/coreyward/gatsby-plugin-segment-analytics
- Owner: coreyward
- Created: 2019-02-13T18:09:40.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-06-18T20:48:37.000Z (11 months ago)
- Last Synced: 2025-03-22T15:43:39.901Z (about 1 month ago)
- Topics: gatsby, gatsby-plugin, segment-analytics, segmentio
- Language: JavaScript
- Homepage:
- Size: 285 KB
- Stars: 3
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gatsby-plugin-segment-analytics
A [Gatsby](https://www.gatsbyjs.org) plugin to add
[Segment’s](https://segment.com/) Analytics.js integration.
This is designed to work with Gatsby versions ≥ 2.0.0.
## Installation
Install with yarn...
```sh
yarn add gatsby-plugin-segment-analytics
```
or NPM...
```sh
npm i gatsby-plugin-segment-analytics
```
### Configure
In your `gatsby-config.js`, add the `gatsby-plugin-segment-analytics` plugin and
provide your Segment Analytics.js write key as an option:
```js
module.exports = {
plugins: [
{
resolve: "gatsby-plugin-segment-analytics",
options: {
writeKey: "YOUR WRITE KEY",
// Optional page name to send with page events; not set by default
eventName: "YOUR PAGE EVENT NAME",
},
},
],
}
```
## Usage
The latest version of the Segment tracking snippet will automatically be
generated and injected into the `` of your layout using Gatsby's SSR API
hooks. When a page is loaded, and Gatsby's `onRouteUpdate` API is called,
`analytics.page` will be fired.
In development, `window.analytics` is a shim that simply logs calls to the
console rather than sending noise to Segment.
### Outbound Link Tracking
To make it easy to track clicks on outbound links, this plugin provides an
`OutboundLink` component similar to the one provided by
[gatsby-plugin-google-analytics](https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-google-analytics#outboundlink-component).
To use it, simply import it and use it like you would the `` element e.g.
```js
import React
import { OutboundLink } from "gatsby-plugin-segment-analytics"
export default () => {
Visit the Segment Analytics plugin page!
}
```
You can optionally provide an `eventName` and `categoryName` prop to
OutboundLink. This will change the segment event name (which is defaulted to
"Click"), and the category name (which is a property of the segment event),
respectively. More information on the segment page event can be found
[here](https://segment.com/docs/connections/spec/page/)
```js
Visit the Segment Analytics plugin page!
```
## Special Thanks
This plugin was inspired by
[work from Stephen Mathieson](https://github.com/stephenmathieson/gatsby-plugin-segment).
## License
MIT