Gatsby Google Analytics Dashboard

Jun 30 ☘️ 2 min read

research

Problem

Total number of views, total link clicks (within article), CTR (Click-through rate), percentage of page read information per URL in gatsby dashboard.

Solution

  1. Set up google tag manager and google analytics in gatsby (both integrations are available in the form of official plugins)
  2. Fetch page tracking and event tracking (for link click tracking) metrics using either rest api, nodejs package, or a gatsby plugin.
  3. CTR for link clicks can be calculated by dividing clicks for a link with total link clicks on that particular page (both metrics are available through analytics api as mentioned in step 2).
  4. Percentage of page read can be tracked in a couple of different ways. (For later discussion.)

Google Analytics API that we are concerned with is distinctively known as Core Reporting API (addressed as Reporting API hereafter). Hence, you can use the term “Google Analytics Reporting API” to land on appropriate resources or solutions. However, this concise guide should be enough for the task at hand i.e. creating a custom dashboard in gatsby by reading data from google analytics.

Reporting API

Reporting API has multiple versions like most APIs. However, there are multiple active API versions - v2, v3 and v4. All are being actively managed. Following is a list of helpful tools and resources for v3 (widely used) and v4 APIs. Migrating to v4 from v3 is simple, the guide contains detailed comparisons and examples of both versions. The solution for the problem at hand can be achieved using either of the versions. So you can go ahead and choose to implement in whatever way you see fit.

Version 3

Version 4

Implementation Overview

There are two possible implementation paths that can be followed.

Simple/Clever

  • Fetch data once when gatsby builds and generate pages
  • Set up gatsby builds at regular intervals to update dashboard (can be optimized for large sites using conditional page builds)
  • Pros: Faster, No Database
  • Cons: No Database (History gets lost)

Standard

  • Introduce a database
  • Create a cloud function that runs at regular interval to populate the database (history can be preserved)
  • Create an API endpoint that fetches data (i.e. client-side request) from the database
  • Pros: One-time wrapper logic, easy to add new features and expand the scope
  • Cons: Slower, Database and API need to be maintained

Alternative Solutions

There are three alternative solutions proposed as follows:

Custom Dimension (Recommended)

  • Use gatsby-ssr to only inject scripts using onRenderBody. No need to be overly clever here, just injection.
  • You will have window.gtag available. So use it to manually send page_view from template files. Author 1 to Author 2 or Author 1 to Home transition will not be a problem here.
  • Fetch data using filter=ga:dimension1==[author-name]
  • Pros: Future-proof
  • Cons: No plugins

Filter by URLs

  • Use any existing plugin to measure data without tinkering with measurement or custom dimensions.
  • Fetch data using filter=ga:pagePath==/url-1,ga:pagePath==/url-2
  • Pros: Simple
  • Cons: Will likely hit URL length limit in future

Filter by URL segment

  • Use any existing plugin to measure data without tinkering with measurement or custom dimensions.
  • Make article slug like this: /author-name/article-title-slug
  • Fetch data using filter=ga:pagePathLevel1==[author-name]
  • Pros: Simple
  • Cons: Existing slug generation needs to change

Further Notes

The Reporting API can be consumed directly from the browser i.e. it has a client-side SDK that can be used to directly call the API (requires auth step). However, this solution didn’t seem appropriate to me for the problem at hand. Following are quickstart examples for studying.

Ronak Baldha
He writes code, cooks food, and ruminates.