Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/travis-r6s/gridsome-plugin-segment-js
Add the Segment JS snippet to your Gridsome site.
https://github.com/travis-r6s/gridsome-plugin-segment-js
Last synced: 16 days ago
JSON representation
Add the Segment JS snippet to your Gridsome site.
- Host: GitHub
- URL: https://github.com/travis-r6s/gridsome-plugin-segment-js
- Owner: travis-r6s
- Created: 2019-11-14T22:23:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-04-08T18:58:09.000Z (almost 5 years ago)
- Last Synced: 2024-04-29T16:08:33.791Z (9 months ago)
- Language: JavaScript
- Size: 50.8 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gridsome-plugin-segment-js
> Add the Segment JS snippet to your Gridsome site.
## Installation
`yarn add gridsome-plugin-segment-js`
## Usage
`gridsome.config.js`
```js
module.exports = {
plugins: [
{
use: 'gridsome-plugin-segment-js',
options: {
prodKey: '',
devKey: '',
trackPage: true, // Defaults to false - will automatically send page views,
pageCategory: 'some-category' // Optional category value
}
}
]
}
```
You can also use `this.$segment` methods, for example `this.$segment.identify('user-id')` in a mounted hook.
## Configuration
This plugin can hook into Vue router to automatically track pages - you can enable this by setting the `trackPage` option to true.
Bear in mind that Gridsome does not add any page meta info to the router config, so it will use `document.title` etc in the track page options.
```js
...
options: {
trackPage: true
}
...
```
If you want to manually track pages, you can use methods such as the below to track pages in the mounted hook:
```js
mounted () {
this.$segment.page(this.$page.post.category, this.$page.post.title, {
title: this.$metaInfo.title
})
}
```
**Note**: Due to the way Gridsome navigates, `document.title` may show the title of the _previous_ page if you just use `this.$segment.page()`. Therefore it is suggested you either use a data property (i.e. `this.$page.post.title`), the `metaInfo` title (if specified: `this.$metaInfo.title`) or set a timeout to allow the page title time to change (`setTimeout(() => this.$segment.page(), 1500)`).