rans>Skip to main content
Community Plugin
View plugin on GitHub
See starters using this

gatsby-plugin-perfume.js

Quickly add Perfume.js to track the performance metrics.

Build Status Build Cron Renovate enabled
Commitizen friendly FOSSA Status Open Source
Love


Install

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

What this plugin does

  • it embeds (Perfume.js)[https://github.com/Zizzamia/perfume.js] with all its available options
  • it allows you to choose whether to embed Perfume.js (suggested) or loading it externally (from Unpkg)
  • (optional) it integrates Perfume.hs with Google Tag Manager too

How to use

Basic usage

// 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: true,
      dataConsumption: true,
      firstContentfulPaint: true,
      firstInputDelay: true,
      maxMeasureTime: 30000
      // see https://github.com/zizzamia/perfume.js#customize--utilities 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: {
    // the options are passed as-are to Perfume.js (except for `analyticsTracker`)
    firstContentfulPaint: true,
    // optional, default to true
    inline: false,
  }
}

Usage with Google Tag Manager

{
  resolve: 'gatsby-plugin-perfume.js',
  options: {
    // the options are passed as-are to Perfume.js (except for `analyticsTracker`)
    firstContentfulPaint: true,
    // 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: {
    // the options are passed as-are to Perfume.js (except for `analyticsTracker`)
    firstContentfulPaint: true,
    // 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
  • 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!

Docs
Tutorials
Plugins
Blog
Showcase