Community Plugin

gatsby-plugin-perfume.js

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

Install

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

What this plugin does

it embeds Perfume.js (V5) 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",
  }
];

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 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}
💻 📖

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