Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub


Easily add Iterable tracking to your Gatsby site. Lightweight wrapper for the Iterable JavaScript SDK.


npm install --save gatsby-plugin-iterable


Create a Javascript SDK key in Iterable. Double check that it’s a Javascript SDK key and not a Standard API key.

In your gatsby-config.js file:

module.exports = {
  plugins: [
      resolve: `gatsby-plugin-iterable`,
      options: {
        // Required or the script won't be loaded
        javascriptSdkKey: "YOUR_ITERABLE_JAVASCRIPT_SDK_KEY",
        // If set to true, page views will be automatically tracked
        trackPageViews: true,



Once installed and setup, you can access the _iaq object as a global variable. For full usage details, see Iterable’s JavaScript SDK documentation.

import React from "react";

export default class IterableButton extends React.Component {
  handleClick(e) {
      "Button Clicked",
        eventField: "some value",
  render() {
    return <button onClick={this.handleClick}>Track me!</button>;

Automatic Page View Tracking

When the trackPageViews: true flag is set in your gatsby-config.js file, the plugin will automatically send a track request on route change. However, for it to work you need to have previously called identify for the user during the session. Here is the “Page Viewed” event schema:

// Event Name: "Page Viewed"
  "url": "http://localhost:8000/about/",
  "referrer": "http://localhost:8000/",
  "title": "Pandas Eating Lots",
  "search": "?yummy=true"

Currently, the plugin doesn’t support customizing this payload. If you’d like to change it, your best bet is probably to set trackPageViews: false and implement Gatsby’s onRouteUpdate API in your gatsby-browser.js file:

// gatsby-browser.js
exports.onRouteUpdate = () => {
  window._iaq && window._iaq.push([
    "Page Viewed",
      myTrack: "My rules"
© 2023 Gatsby, Inc.