Addon: Added google analytics

addons/google-analytics/README.md

@@ -0,0 +1,25 @@
+# Storybook Addon Google Analytics
+
+Storybook Addon Google Analytics can be used to support google analytics in [Storybook](https://storybook.js.org).
+
+[Framework Support](https://github.com/storybooks/storybook/blob/master/ADDONS_SUPPORT.md)
+
+## Getting Started
+
+Install:
+
+```sh
+npm i -D @storybook/addon-google-analytics
+```
+
+Then, add following content to `.storybook/addons.js`
+
+```js
+import '@storybook/addon-google-analytics/register';
+```
+
+Then, set an environment variable
+
+```
+window.STORYBOOK_GA_ID = UA-000000-01
+```

addons/google-analytics/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@storybook/addon-google-analytics",
+  "version": "4.0.0-alpha.25",
+  "description": "Storybook addon for google analytics",
+  "keywords": [
+    "addon",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybooks/storybook/tree/master/addons/google-analytics",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybooks/storybook.git"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "4.0.0-alpha.25",
+    "global": "^4.3.2",
+    "react-ga": "^2.5.3"
+  }
+}

addons/google-analytics/src/index.js

@@ -0,0 +1 @@
+export default {};

addons/google-analytics/src/register.js

@@ -0,0 +1,17 @@
+import addons from '@storybook/addons';
+import { window } from 'global';
+import ReactGA from 'react-ga';
+
+addons.register('storybook/google-analytics', api => {
+  ReactGA.initialize(window.STORYBOOK_GA_ID);
+
+  api.onStory((kind, story) => {
+    let path = window.location.pathname;
+
+    if (path === '/') {
+      path = '';
+    }
+
+    ReactGA.pageview(`${path}/${kind}/${story}`);
+  });
+});

docs/src/pages/addons/addon-gallery/index.md

@@ -54,6 +54,10 @@ With this addon, you can switch between background colors and background images
 
 Viewport allows your stories to be displayed in different sizes and layouts in [Storybook](https://storybook.js.org).  This helps build responsive components inside of Storybook.
 
+### [Google Analytics](https://github.com/storybooks/storybook/tree/master/addons/google-analytics)
+
+Support google analytics in [Storybook](https://storybook.js.org)
+
 ## Community Addons
 
 You need to install these addons directly from NPM in order to use them.

yarn.lock

@@ -18472,6 +18472,14 @@ react-fuzzy@^0.5.2:
     fuse.js "^3.0.1"
     prop-types "^15.5.9"
 
+react-ga@^2.5.3:
+  version "2.5.3"
+  resolved "https://registry.yarnpkg.com/react-ga/-/react-ga-2.5.3.tgz#0f447c73664c069a5fc341f6f431262e3d4c23c4"
+  integrity sha512-25wvPv1PVLDLhw1gEYP33h0V2sJHahKMfUCAxhq8JPYmNQwx1fcjJAkJk+WmSqGN93lHLhExDkxy3SQizQnx3A==
+  optionalDependencies:
+    prop-types "^15.6.0"
+    react "^15.6.2 || ^16.0"
+
 react-inspector@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.0.tgz#fc9c1d38ab687fc0d190dcaf133ae40158968fc8"
@@ -18761,7 +18769,7 @@ react-treebeard@^3.1.0:
     shallowequal "^1.1.0"
     velocity-react "^1.4.1"
 
-react@^16.5.2:
+"react@^15.6.2 || ^16.0", react@^16.5.2:
   version "16.5.2"
   resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42"
   integrity sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==