Showing most popular posts with Netlify Analytics

If you’re visiting this blog on a window size large enough to see the sidebar on the right side of the this page, you can see there’s a new section: Popular posts (30 days). If you’re on mobile, you have to wait for a while until I figure out a good way to display them on my website.

Inspiration for this project came from Jim Nielsen’s blog post Using Netlify Analytics to Build a List of Popular Posts that I discovered last week. It inspired me to build a similar feature and experiment a bit on how I display my blog post listings.

There are three parts to the current implementation: fetching the most popular posts, storing them on a JSON file and displaying them.

Fetching posts from Netlify Analytics API

Site ID and Personal token

To get started with the Netlify Analytics API, you need two things: your site ID and a personal token.

To find your site ID, you need to go to your Netlify dashboard, open Site configuration and inside Site information, you can see your site ID. Store that with your environment values.

To generate your personal token, follow the instructions from Netlify’s documentation. Once you have it, store it with your environment values.

This is a good moment to also make sure you document to your project how these are found and generated. Down the line when you set up your environment on a new computer, you’ll thank yourself for documenting them!

Script to fetch the data

The analytics API is not documented in Netlify’s docs but thanks to Jim’s blog post and poking around with developer tools, I found the format:

https://app.netlify.com/access-control/analytics-api/v2/${process.env.NETLIFY_SITE_ID}/ranking/pages?from=${from}&to=${to}&timezone=+0300&limit=30

It requires 3 variables: the site ID that I access through environment values and from and to timestamps as milliseconds for the range of data.

// 30 day window
let to = Date.now();
let from = to - 2592000000;

To authenticate your requests, you need to add this to your request headers:

let headers = {
	Authorization: `Bearer ${process.env.NETLIFY_TOKEN}`,
}

Now you’re ready to make a call and the response contains a list of objects (with some dummy data from mine, not actual values) like this:

{
  data: [
    { count: 55555, resource: '/' },
    { count: 44444, resource: '/tabletop/potluck/' },
    {
      count: 33333,
      resource: '/posts/projects-im-proud-of-boost-turku-and-startup-journey/'
    },
    {
      count: 22222,
      resource: '/posts/website-rewrite-and-switching-to-notion-as-cms/'
    }
  ]
}

To find my blog posts, I filter out anything that doesn’t start /posts/ and then take the top 5.

Store in JSON

After this, I find other information about these posts from my files’ frontmatter and store them in a JSON file _data/most_popular.json

I use front-matter package to parse the post’s frontmatter based on its slug and then store the title, description, date and URL to the JSON.

Display the results

This data is then available to my templates so I can iterate over it:

<h2>Popular posts (30 days)</h2>
<ul>
  {% for post in most_popular %}
  <li>
    <a href="{{post.url}}">{{ post.title}}</a>
  </li>
  {% endfor %}
</ul>

Currently my display format is simple but you could show the date or the number of views (like Jim does) or whatever you wish.

Currently mine needs to be run manually to update but I basically make small adjustments, improvements and content updates to my site every day anyway so it will be up to date mostly all the time. And my blog’s favourite posts tend to be quite stable so there’s often no need to have more granular updates than once a day for now.

Other people have done similar things with different analytics services. Robb Knight uses Fathom analytics and shows his most popular posts in his site and Cory Dransfeldt has written about how to do it with Plausible analytics.