New
Storybook’s Visual Tests addon enters betaVisual test with Chromatic
Star82,101
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
dataLayer watcher
Get GTM's dataLayer events in Storybook
npm install storybook-addon-datalayer-watcher
Last updated 16 days ago
2k
Downloads per week
Readme View on GitHub

storybook-addon-datalayer-watcher

Installation

First, install the package.

npm install --save-dev storybook-addon-datalayer-watcher

Then, register it as an addon in .storybook/main.js.

// .storybook/main.ts

// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-vite)
import type { StorybookConfig } from '@storybook/your-framework';

const config: StorybookConfig = {
  // ...rest of config
  addons: [
    '@storybook/addon-essentials'
    'storybook-addon-datalayer-watcher', // 👈 register the addon here
  ],
};

export default config;

Usage

This addon allows you to debug GTM dataLayer events in Storybook.

If your component pushes to the dataLayer array (directly or using a library), you can interact with it in Storybook and see the GTM events it triggers.

Demo image

Credits

Thanks @cmarcchen for the idea

Join the community
6,514 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI