Migrate to Netlify Today

Netlify announces the next evolution of Gatsby Cloud. Learn more

ContactSign Up
Community Plugin
View plugin on GitHub

gatsby-plugin-perfume.js

Quickly add Perfume.js (V5) to track the performance metrics.

Build Status Build Cron Renovate enabled
Commitizen friendly FOSSA Status
semantic-release Open Source
Love


Install

npm install --save gatsby-plugin-perfume.js

What this plugin does

How to use

Basic usage

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-plugin-perfume.js",
  }
];

With custom options

// In your gatsby-config.js
plugins: [
  {
    resolve: "gatsby-plugin-perfume.js",
    options: {
      // the options are passed as-are to Perfume.js (except for `analyticsTracker`)
      resourceTiming: false
      maxMeasureTime: 15000,
      // see https://github.com/Zizzamia/perfume.js#perfume-custom-options for all the available options
    }
  }
];

Usage with non-inlined Perfume.js

Perfume.js can also be downloaded from Unpkg setting the inline option to false

// In your gatsby-config.js
{
  resolve: 'gatsby-plugin-perfume.js',
  options: {
    // optional, default to true
    inline: false,
  }
}

Usage with Google Tag Manager

{
  resolve: 'gatsby-plugin-perfume.js',
  options: {
    // optional, if present, a Google Tag Manager event is triggered for every specified performance metric (the event is `performance`)
    googleTagManagerOptions: true
  }
}

You can even customize the GTM event name/dataLayer

{
  resolve: 'gatsby-plugin-perfume.js',
  options: {
    // optional, if present, a Google Tag Manager event is triggered for every specified performance metric
    googleTagManagerOptions: {
      // optional, default to `performance`, `metricName` and `duration` are passed as event data
      eventName: undefined,
      // optional, default to "dataLayer"
      dataLayerName: undefined
    }
  }
}

How to track the events in GTM

  • Add the metricName variable
    ![Add the metricName

variable](https://raw.githubusercontent.com/NoriSte/gatsby-plugin-perfume.js/master/assets/gtm-perfume-var-1.png)

  • Add the duration variable
    Add the duration variable
  • Add the GA event in GTM
    Add the GA event in GTM

Contributing

PR or issues are welcome 👋

Notes

  • if you want to work on the plugin sources, remember that you need to run npm run build on the root then, in every test project, you need to run npm run plugin:link to locally use it

Contributors

Thanks goes to these wonderful people (emoji key):

Stefano Magni
Stefano Magni

💻 📖

This project follows the all-contributors specification. Contributions of any kind welcome!

© 2023 Gatsby, Inc.