New
Automatic visual tests in Storybook, plus 2.2x faster build times for React+TSVisual test with Chromatic
Star80,426
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-matomo
Storybook addon for Matomo Analytics
npm install storybook-matomo
Last updated over 2 years ago
0
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
6,316 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI