From 5c0e75cbb4b4afe8c16fc1bfafbc144f909aa58b Mon Sep 17 00:00:00 2001 From: Dhenain Ambroise Date: Tue, 12 Jan 2021 10:47:16 +0100 Subject: [PATCH] Add Google Analytics tracking for SB --- .storybook/main.js | 17 ++++--- .storybook/manager.js | 20 ++++++++ .storybook/preview.js | 6 ++- package.json | 1 + yarn.lock | 111 ++++++++++++++++++++++++++++++++++++++++++ 5 files changed, 146 insertions(+), 9 deletions(-) create mode 100644 .storybook/manager.js diff --git a/.storybook/main.js b/.storybook/main.js index 26dfeaf66..659ee2c54 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,10 +1,11 @@ module.exports = { - "stories": [ - "../src/**/*.stories.mdx", - "../src/**/*.stories.@(js|jsx|ts|tsx)" + 'stories': [ + '../src/**/*.stories.mdx', + '../src/**/*.stories.@(js|jsx|ts|tsx)', ], - "addons": [ - "@storybook/addon-links", - "@storybook/addon-essentials" - ] -} \ No newline at end of file + 'addons': [ + '@storybook/addon-links', + '@storybook/addon-essentials', + '@storybook/addon-google-analytics', + ], +}; diff --git a/.storybook/manager.js b/.storybook/manager.js new file mode 100644 index 000000000..b11dfb5ef --- /dev/null +++ b/.storybook/manager.js @@ -0,0 +1,20 @@ +/** + * Your Google Analytics tracking ID. + * + * If you're creating a dedicated Google Analytics property for this (you should), + * Then make sure to create a "Universal Analytics property", not a Google Analytics 4 property (default since 2021). + * + * @see https://support.google.com/analytics/answer/10269537 + * @see https://github.com/storybookjs/storybook/tree/master/addons/google-analytics Google Analytic addon for Storybook + */ +window.STORYBOOK_GA_ID = 'UA-89785688-10'; // Replace by your own "UA-XXXXXXX-XX" + +/** + * React-ga options object + * + * @example { debug: true, gaOptions: { userId: 123 }} + * @see https://github.com/react-ga/react-ga#api + * @see https://github.com/storybookjs/storybook/blob/4f5ab9fe9e590da7b841ec37cb1bed8d6327ea4b/addons/google-analytics/src/register.ts#L8 + * @see https://github.com/storybookjs/storybook/tree/master/addons/google-analytics Google Analytic addon for Storybook + */ +window.STORYBOOK_REACT_GA_OPTIONS = {}; diff --git a/.storybook/preview.js b/.storybook/preview.js index 7519160a6..16ddc3402 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -29,7 +29,11 @@ import dataset from './mock/sb-dataset'; * - We don't want to track analytics using Amplitude. * - All analytics is disabled when running a component through Storybook preview. * - * XXX We will consider using Google Analytics for this, using a specific storybook plugin instead. (will be much easier to implement/use) + * About Google analytics: + * - We use Google Analytics for tracking analytics usage. + * - It's much easier to setup than Amplitude, because there is an official dedicated plugin for this. + * - See ".storybook/manager.js" for GA configuration. + * - See https://github.com/storybookjs/storybook/tree/master/addons/google-analytics */ const customer = find(dataset, { __typename: 'Customer' }); const customerTheme = initCustomerTheme(customer); diff --git a/package.json b/package.json index 12da0c2c5..a1692d128 100644 --- a/package.json +++ b/package.json @@ -169,6 +169,7 @@ "@next/bundle-analyzer": "10.0.5", "@storybook/addon-actions": "6.1.11", "@storybook/addon-essentials": "6.1.11", + "@storybook/addon-google-analytics": "6.1.12", "@storybook/addon-links": "6.1.11", "@storybook/react": "6.1.11", "@svgr/cli": "5.5.0", diff --git a/yarn.lock b/yarn.lock index ea15f71e8..dffd7587b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2665,6 +2665,18 @@ regenerator-runtime "^0.13.7" ts-dedent "^2.0.0" +"@storybook/addon-google-analytics@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/addon-google-analytics/-/addon-google-analytics-6.1.12.tgz#37b5080659c3079a3526410dbc63a8e0f6cf2818" + integrity sha512-8mX1sNE9qY1brd1wWywOuWnJbLpL7nfR6pm4RoD/RCcj2g/zS8YKee6NkHwe+kIeC5RMX/W2a1EGcpA8yZ5YNw== + dependencies: + "@storybook/addons" "6.1.12" + "@storybook/core-events" "6.1.12" + core-js "^3.0.1" + global "^4.3.2" + react-ga "^2.5.7" + regenerator-runtime "^0.13.7" + "@storybook/addon-links@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.1.11.tgz#84b20b0c13bbfc8270cdf52389ce52f98c415b6a" @@ -2726,6 +2738,21 @@ global "^4.3.2" regenerator-runtime "^0.13.7" +"@storybook/addons@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.1.12.tgz#e784c1481eaaa3aaf2c819b512a55c1f232cf6be" + integrity sha512-4GKiHare9Hgg14quGk0fAYqx4e5iZYc4Pp8t+5tbrG8EQ9YEIrjV8FA/gEERwyzu0j3H/7Q82ll0/xy7bt4Btw== + dependencies: + "@storybook/api" "6.1.12" + "@storybook/channels" "6.1.12" + "@storybook/client-logger" "6.1.12" + "@storybook/core-events" "6.1.12" + "@storybook/router" "6.1.12" + "@storybook/theming" "6.1.12" + core-js "^3.0.1" + global "^4.3.2" + regenerator-runtime "^0.13.7" + "@storybook/api@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.11.tgz#1e0b798203df823ac21184386258cf8b5f17f440" @@ -2751,6 +2778,31 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/api@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.12.tgz#395a99e0934af08cb387b61ed9a40155b7fdf530" + integrity sha512-pH/bMYiBiLkALiQUow22mNx7bc63XFOw8xv9kwgrv9Db2oCjP7wZLy3JxJFjtBq5pAe3E0k9doxPAONQ28/gig== + dependencies: + "@reach/router" "^1.3.3" + "@storybook/channels" "6.1.12" + "@storybook/client-logger" "6.1.12" + "@storybook/core-events" "6.1.12" + "@storybook/csf" "0.0.1" + "@storybook/router" "6.1.12" + "@storybook/semver" "^7.3.2" + "@storybook/theming" "6.1.12" + "@types/reach__router" "^1.3.5" + core-js "^3.0.1" + fast-deep-equal "^3.1.1" + global "^4.3.2" + lodash "^4.17.15" + memoizerific "^1.11.3" + regenerator-runtime "^0.13.7" + store2 "^2.7.1" + telejson "^5.0.2" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/channel-postmessage@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.1.11.tgz#62c1079f04870dd27925bd538a2020e7380daa2e" @@ -2773,6 +2825,15 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" +"@storybook/channels@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.1.12.tgz#80dfa013e4faf002569eae46053daea9a136f595" + integrity sha512-LToGe8iRLCcOIkOaCO17ntfUJ+RAmDWGi+PefUrG7WMI2CdjADpxu08x5QX9aLBoh3Yh1sJRbiqU2B1t/0NnOQ== + dependencies: + core-js "^3.0.1" + ts-dedent "^2.0.0" + util-deprecate "^1.0.2" + "@storybook/client-api@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.1.11.tgz#d25aac484ca84a1acb01d450e756a62408f00c1a" @@ -2805,6 +2866,14 @@ core-js "^3.0.1" global "^4.3.2" +"@storybook/client-logger@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.12.tgz#30976f923488b10f4aa29099b471b3c2c0157f71" + integrity sha512-mkhGL9mTwIp4G/HrZYdtb/Ho49gr5a1dDYNOveQ/XYiWmx4DV22fDwIl8EB0tY0SCgpkHGeBYCMp75I7CbaLrQ== + dependencies: + core-js "^3.0.1" + global "^4.3.2" + "@storybook/components@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.1.11.tgz#edd5db7fe43f47b5a7ab515840795a89d931512e" @@ -2838,6 +2907,13 @@ dependencies: core-js "^3.0.1" +"@storybook/core-events@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.1.12.tgz#2e605f7a466a74f94d539739350d3796f4652b6e" + integrity sha512-qsUwM/UsYhgSLhuMlDgTmq0+sHFSF6OgzzmFdLWl+k/xjj6JuPqWQcqXslXOlM8ThJZoGjrlgSAZFxXWpaKyTA== + dependencies: + core-js "^3.0.1" + "@storybook/core@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.1.11.tgz#ed9d3b513794c604ab11180f6a014924b871179e" @@ -3009,6 +3085,18 @@ memoizerific "^1.11.3" qs "^6.6.0" +"@storybook/router@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.1.12.tgz#9d552feb0bf63f063c309762c5ead01650a10d22" + integrity sha512-Y0NoGbjQQ8uxIkOfdeCZvAZ1sfVgTVVeDUp4roR8HLmfvx9JxzXIlvTRAVBK6BcCy2e1AJTu3YhjJ2xCDN4jng== + dependencies: + "@reach/router" "^1.3.3" + "@types/reach__router" "^1.3.5" + core-js "^3.0.1" + global "^4.3.2" + memoizerific "^1.11.3" + qs "^6.6.0" + "@storybook/semver@^7.3.2": version "7.3.2" resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0" @@ -3052,6 +3140,24 @@ resolve-from "^5.0.0" ts-dedent "^2.0.0" +"@storybook/theming@6.1.12": + version "6.1.12" + resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.1.12.tgz#14ac1153b4ea1b72221e17990b8c99ba394c524c" + integrity sha512-vlqIV9GQmcpQQ2Sdv2nT9t97g8fBwaIrPP09VcWrNVj7aINBdfbn/38JB1gvc29K+7S2fDP0ZW/+Hemc4/GrvA== + dependencies: + "@emotion/core" "^10.1.1" + "@emotion/is-prop-valid" "^0.8.6" + "@emotion/styled" "^10.0.23" + "@storybook/client-logger" "6.1.12" + core-js "^3.0.1" + deep-object-diff "^1.1.0" + emotion-theming "^10.0.19" + global "^4.3.2" + memoizerific "^1.11.3" + polished "^3.4.4" + resolve-from "^5.0.0" + ts-dedent "^2.0.0" + "@storybook/ui@6.1.11": version "6.1.11" resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.1.11.tgz#2e5a5df010f2bb75a09a0fd0439fc8e62f8c89e5" @@ -14543,6 +14649,11 @@ react-fast-compare@^3.0.1, react-fast-compare@^3.2.0: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb" integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA== +react-ga@^2.5.7: + version "2.7.0" + resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.7.0.tgz#24328f157f31e8cffbf4de74a3396536679d8d7c" + integrity sha512-AjC7UOZMvygrWTc2hKxTDvlMXEtbmA0IgJjmkhgmQQ3RkXrWR11xEagLGFGaNyaPnmg24oaIiaNPnEoftUhfXA== + react-helmet-async@^1.0.2: version "1.0.7" resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.7.tgz#b988fbc3abdc4b704982bb74b9cb4a08fcf062c1"