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 的想法