Skip to content
Gatsby plugin for's analytic.js snippet
JavaScript CSS
Branch: master
Clone or download
Pull request Compare This branch is 6 commits ahead of benjaminhoffman:master.
Latest commit 970e428 Aug 29, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
example Updates example Feb 15, 2019
.gitignore Fixes issue where gatsby-ssr.js wasnt being published May 8, 2018
LICENSE Initial commit Nov 25, 2017 implement customisable delay time, requestIdleCallback and only delay… Aug 29, 2019
package.json Updates example Feb 15, 2019


A lightweight & feature-rich Gatsby plugin to easily add Segment JS snippet to your site.


Packed with features:

  • use multiple write keys (one for prod env, another optional one for dev)
  • disable page view tracking (just in case you want to add it later manually)
  • up to date (Segment snippet 4.1.0)


  • NPM: $ npm install --save gatsby-plugin-segment-js
  • YARN: $ yarn add gatsby-plugin-segment-js

How to use


In your gatsby-config.js file:

plugins: [
        resolve: `gatsby-plugin-segment-js`,
        options: {
            // your segment write key for your production environment
            // when process.env.NODE_ENV === 'production'
            // required; non-empty string
            prodKey: `SEGMENT_PRODUCTION_WRITE_KEY`,

            // if you have a development env for your segment account, paste that key here
            // when process.env.NODE_ENV === 'development'
            // optional; non-empty string
            devKey: `SEGMENT_DEV_WRITE_KEY`,

            // boolean (defaults to false) on whether you want
            // to include automatically
            // if false, see below on how to track pageviews manually
            trackPage: false,

            // boolean (defaults to false) on whether to load segment
            // after a user action (scroll or route change) + delay
            // this will bring down your TTI but you might miss 1 second of data.
            // see here for more info on TTI:
            delayLoad: false,

            // time to wait after scroll action in ms. Defaults to 1000ms
            delayLoadTime: 1000

Track Events

If you want to track events, you simply invoke Segment as normal in your React components — ('Event Name', {...}) — and you should see the events within your Segment debugger! For example, if you wanted to track events on a click, it may look something like this:

class IndexPage extends React.Component {
    _handleClick() {"Track Event Fired", {
            gender: 'male',
            age: 33,
    render() {
        return (
                <Link onClick={this._handleClick} to="/">
                    Click here
                </Link>{" "}
                to see a track event

Track Pageviews

If you want to track pageviews automatically, set trackPage to true in your gatsby-config.js file. What we mean by "automatically" is that whenever there is a route change, we leverage Gatsby's onRouteUpdate API in the gatsby-browser.js file (link) to invoke on each route change. But if you want to pass in properties along with the pageview call (ie, it's common to see folks pass in some user or account data with each page call), then you'll have to set trackPage: false and call it yourself in your gatsby-browser.js file, like this:

// gatsby-browser.js
exports.onRouteUpdate = () => { &&;
You can’t perform that action at this time.