Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thomascarvalho/gatsby-plugin-mixpanel
Plugin gatsby to integrate mixpanel
https://github.com/thomascarvalho/gatsby-plugin-mixpanel
gatsby gatsbyjs mixpanel plugin
Last synced: 6 days ago
JSON representation
Plugin gatsby to integrate mixpanel
- Host: GitHub
- URL: https://github.com/thomascarvalho/gatsby-plugin-mixpanel
- Owner: thomascarvalho
- Created: 2017-12-16T23:35:37.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2023-12-01T06:14:40.000Z (10 months ago)
- Last Synced: 2024-09-21T12:32:55.801Z (12 days ago)
- Topics: gatsby, gatsbyjs, mixpanel, plugin
- Language: JavaScript
- Homepage:
- Size: 1.71 MB
- Stars: 21
- Watchers: 2
- Forks: 12
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://www.npmjs.org/package/gatsby-plugin-mixpanel)
[](https://travis-ci.org/thomascarvalho/gatsby-plugin-mixpanel)
[](https://codecov.io/gh/thomascarvalho/gatsby-plugin-mixpanel)
# gatsby-plugin-mixpanel
For Gatsby v5
(see previous releases for Gatsby v2, v3 & v4)
Integrate [mixpanel](https://www.mixpanel.com) on your [gatsby](https://github.com/gatsbyjs/gatsby) project
## Install
`npm install --save gatsby-plugin-mixpanel` or `yarn add gatsby-plugin-mixpanel`
## How to use
### Declare plugin
Add the plugin in your gatsby-config.js and set your mixpanel api token
```javascript
plugins: [
{
resolve: 'gatsby-plugin-mixpanel',
options: {
apiToken: 'YOUR_MIXPANEL_API_TOKEN', // required
},
},
];
```
### Using mixpanel by passing props
You can access to mixpanel library in the props of your component by using the function ```withMixpanel``` available in the plugin
```javascript
import { withMixpanel } from 'gatsby-plugin-mixpanel'
class HelloWorld extends Component {
componentDidMount() {
const { mixpanel } = this.props
mixpanel.track('Hello'); // send event 'Hello' to mixpanel
}
render() {/*...*/}
}
export default withMixpanel()(HelloWorld)
// or with decorators if your project supports
@withMixpanel()
class HelloWorld extends Component {
/*...*/
}
```
### Using mixpanel with react hooks
**Your project must have a version of react that supports react-hooks.**
Import the ```useMixpanel``` hook.
```javascript
import { useMixpanel } from 'gatsby-plugin-mixpanel'
function HelloWorld() {
const mixpanel = useMixpanel()
mixpanel.track('Hello');
return (
mixpanel.track('Hello button') }>Hello
)
}
```
### Configuration
The plugin is configurable, here are the configs by default.
```javascript
plugins: [
{
resolve: 'gatsby-plugin-mixpanel',
options: {
apiToken: 'YOUR_MIXPANEL_API_TOKEN', // required
// optional fields, default values
enableOnDevMode: true, // if false mixpanel will be activated on NODE_ENV=production only
mixpanelConfig: null, // override specific config for mixpanel initialization https://github.com/mixpanel/mixpanel-js/blob/8b2e1f7b/src/mixpanel-core.js#L87-L110
pageViews: null, // see below
// set pageViews to 'all' and use this option to set the same event name for all page view events
trackPageViewsAs: null, // optionally: set an Event Name to use for all page views, eg: trackPageViewsAs: 'Page view'
getPageViewTransformerFn: null, // optionally: function body as a string to customize the event sent to mixpanel. Receives one parameter: location. Example 'return () => ({url: location.pathname})'
},
},
];
```
The pageViews param is null by default, if you want to autotrack some page you can declare an object url path and events that will be send on mixpanel.
Or if you want to track every route changes set pageViews to 'all'.
example:
```javascript
plugins: [
{
resolve: 'gatsby-plugin-mixpanel',
options: {
apiToken: 'YOUR_MIXPANEL_API_TOKEN',
pageViews: {
'/blog': 'Page blog view', // an event 'Page blog view' will be send to mixpanel on every visit on the /blog page
'/404': 'Page 404 view',
},
mixpanelConfig: null, // you can override default config for mixpanel library https://github.com/mixpanel/mixpanel-js/blob/8b2e1f7b/src/mixpanel-core.js#L87-L110
/*
pageViews: 'all' // to track every route changes
*/
},
},
];
```
Enjoy this little plugin and feel free to contribute :smiley: