Storybook: Google analytics

Created on 2 Aug 2018  路  12Comments  路  Source: storybookjs/storybook

Bug or support request summary

Hi I am wondering how to add google analytics on storybook?

I have added the google analytics script to manager-head.html so it appears in the head which is good.
But because storybook is a one page app google analytics isn't recording the routed url.

Steps to reproduce

Clicking on sub pages or components in the side bar is not being recorded in google analytics.
This is would be really handy to get some statistics on popular components and track user flows.

Please specify which version of Storybook and optionally any affected addons that you're running

    "@storybook/addon-knobs": "3.4.5",
    "@storybook/addon-options": "3.4.5",
    "@storybook/react": "3.4.5",
    "@storybook/storybook-deployer": "2.3.0",

Affected platforms

  • All platforms

Screenshots / Screencast / Code Snippets (Optional)

Added in manager-head.html

  <!-- Analytics -->
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'ID', 'auto');
    ga('send', 'pageview');
  </script>
compatibility with other tools feature request question / support

Most helpful comment

I would love to. Writing an addon will get me familiar with the client side code of storybook.

All 12 comments

you're correct. since we don't actually change the route, only the route query parameters, the analytics code might not track it

If you're interested in helping refactor the router so that the URLs make more sense, we'd be happy to point you in the right direction and get a PR going. It isn't trivial though.

It also can be achieved as an addon

I'm currently working on routing too, so hit me up if you're interested in collaborating on it @informa.

Not sure if I am going to have time to work on this, but I will hit up my team member who might.
Thank you so much for the comments.

@alexandrebodin is also involved in the routing now, tagging him here too.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Would be nice to actually create an addon for this, Anyone on the @storybooks/team who'd want to do it?

I would love to. Writing an addon will get me familiar with the client side code of storybook.

Can you guys link me to the routing issues we need to fix first before the addon can be worked on?

I think the addon would just push to GA on every story change, and detect story changes via channel / api ?

Made an early PR, #4138.

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

arunoda picture arunoda  路  3Comments

wahengchang picture wahengchang  路  3Comments

tlrobinson picture tlrobinson  路  3Comments

shilman picture shilman  路  3Comments

tirli picture tirli  路  3Comments