Site hierarchy dashboard

This free tool provides a new way to look at your site analytics – a visualisation showing the most popular areas of the site as concentric circles, sized according to how much traffic each path gets.
screen shot

Clicking on a circle brings up information about the audience which visited that area:

  • how much they impact site goals and revenue,
  • what channels they come from,
  • what type of device they are using, and
  • whether traffic to the area is growing or shrinking.

This answers many questions in a few clicks, which would require a lot of digging around with segments and filters in GA – I’m hoping you find this approach more fun!

How to use

The tool is simple to use – click through to the dashboard and authorise it.

  • Click a circle to see analytics data for sessions that included that URL path.
  • Hover over circles or charts for more information

The direct URL for the tool is

Notes – known issues & limitations

  • The data can take some time (~30 seconds or so) to load from the API, so patience is sometimes required.
  • Only the blue circles are ‘correctly’ sized in proportion to pageviews. (The grey ones – further up the hierarchy – are sized to contain the blues. However, you can still see the pageviews at the level of a grey circle by hovering over it.)
  • You can’t currently drill down into selected circles/URLs. I may add that in future. However, it is not possible to go deeper than 3 levels using GA in this way. (The system depends on the ga:pagePathLevelN dimensions, and for N=4 this is a roll-up of the rest of the path.)
  • If your site does not have trailing slashes in URLs, you may see separate circles – one circle for the landing page, and another for all the pages under that. Where this is the case, the filters should behave accordingly – so if you click on the circle for a landing page (no slash) it will give you traffic to that page only. If you click on the circle representing the sub-pages the table (on the right) will show info for the segment of sessions that hit any sub-page.
  • The tool will work best for sites that have a hierarchical URL structure.
  • There is an issue with the view selector component on some instances of Chrome on android touch screens.

How it works

The tool is entirely client-side code – your analtyics data is not processed, stored, or even passed through peakconversion servers at any time.
The tool uses d3 to generate the packed-circle hierarchy view. It uses custom code originally based on ng-analytics, which is a wrapper for Google Analtyics Embed API. We make use of the API’s ability to query segments on the fly – so when a circle is selected, information characterising sessions which visited that URL is pulled from the Google Analytics API.
The Embed API, D3 and AngularJS make a very flexible technology stack for developing interactive dashboards and data visualisations.

Google Analytics data

After the app is authorized, the list of available accounts and views is pulled into the view selector component.
Once a view is selected, page level analytics data is pulled from the Analytics API – pageviews with a dimension of page path level1. The app drills down through the page path levels for the largest areas of the site.
For the site as a whole, the app fetches session counts, goal completions, revenue, bounce rate and user count. This is fetched by channel and device category (mobile / tablet / desktop). When a URL (circle) is selected, a segment is created for sessions that visited that URL, and the same data is fetched and presented in comparison to the site as a whole. This means the app completes queries and analysis that would take a long time to do any other way!

Privacy and security

  • The app does not store any Google Analtyics data or make it available to anyone else
  • The app does not load any of your Analytics data onto PeakConversion servers
  • The app uses the official Google Analtyics authorisation process and components – at no time is any password information visible to the app
  • Like all other authorised apps, you can revoke authorisation at any time, under ‘Manage apps’
    on Google’s security page.

Feedback and questions

Please post in the comments below, or contact me directly. I will add further information here and FAQs, once I know what they are!

Please share this with anyone who may be interested.

Need something similar, or different?

We specialise in bespoke automated reporting. Please contact us to talk through your requirement or idea.

Leave a Reply

Your email address will not be published. Required fields are marked *