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,
// ...
}