storybook-addon-datalayer-watcher

安装

首先，安装该包。

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

然后，在 .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;

使用

此插件允许你在 Storybook 中调试 GTM dataLayer 事件。

如果你的组件推送到了 dataLayer 数组（直接或使用库），你可以在 Storybook 中与它交互，并查看它触发的 GTM 事件。

鸣谢

感谢 @cmarcchen 的想法