New
Integrate Next.js and Storybook automaticallyAutomate with Chromatic
Star75,441
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
Matomo
Storybook addon for Matomo Analytics
npm install storybook-addon-matomo
Last updated over 1 year ago
6
Downloads per week
Readme View on GitHub

Storybook Addon Matomo

Storybook Addon Matomo can be used to support Matomo Analytics in Storybook.

Getting Started

Install:

yarn add storybook-addon-matomo

within .storybook/main.js:

module.exports = {
  addons: ['storybook-addon-matomo']
}

Then, set an environment variable in .storybook/manager.js:

window.STORYBOOK_MATOMO_OPTIONS = {
  urlBase: 'https://LINK.TO.DOMAIN', // 👈 required
  siteId: 3, // 👈 required
  userId: 'UID76903202', // optional, default value: `undefined`.
  trackerUrl: 'https://LINK.TO.DOMAIN/tracking.php', // optional, default value: `${urlBase}matomo.php`
  srcUrl: 'https://LINK.TO.DOMAIN/tracking.js', // optional, default value: `${urlBase}matomo.js`
  disabled: false, // optional, false by default. Makes all tracking calls no-ops if set to true.
  heartBeat: { // optional, enabled by default
    active: true, // optional, default value: true
    seconds: 10 // optional, default value: `15
  },
  linkTracking: false, // optional, default value: true
  configurations: { // optional, default value: {}
    // any valid matomo configuration, all below are optional
    disableCookies: true,
    setSecureCookie: true,
    setRequestMethod: 'POST'
  }
};

Note: This integration is based on @datapunt/matomo-tracker-js, so all configuration options are available.

If you would like to store your urlBase, siteId, etc. in an environment variable so it is not available in your repo, simply add .env file to the root of your project or set environment variables in your CI and reference that in manager.js

.env:

STORYBOOK_MATOMO_URL = https://LINK.TO.DOMAIN
STORYBOOK_MATOMO_SITE_ID = 3

storybook/manager.js:

window.STORYBOOK_MATOMO_OPTIONS = {
  urlBase: process.env.STORYBOOK_MATOMO_URL,
  siteId: process.env.STORYBOOK_MATOMO_SITE_ID,
  // ...
}
Join the community
5,858 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI