SftB#1 Recap: Integrating Google Analytics to Storyblok

As a part of our live event Stories from the Blok, Christophe Corblan presented his work on integrating Google Analytics via Storyblok applications. Christophe is a Senior full stack developer and a Storyblok ambassador currently working at togetherdigital.ie.

Christophe’s talk is divided into five sections and walks you through the whole process, while offering an overall perspective at the end. You can read a short summary of each section below:

Storyblok applications

Storyblok applications is a rather new capability which as of now, is exclusively available to Storyblok partners. However, becoming a new partner is quite easy, just take a look at our partner page!

Creating a custom application will allow you to extend Storyblok with your own bits of code and features. These new features will end up in the navigation bar alongside the other ones you already have, allowing you quick access to your unique applications. Additionally, you would have API access within these applications.

Where to get started

First, you have to join the partner program.

Then, you should take a look at Storyblok’s app authentication documentation, just to make sure everything is clear.

The following resources can help you by making your work a little bit easier:

• Take a look at Storyblok’s workflow app on GitHub. You should check out the readme, clone the repository, and just play around with things until you feel you are comfortable with everything.
• Check out Storyblok app auth Express on GitHub. This module is going to help you create an Express server acting as a Storyblok application. This package allows you to directly use Storyblok objects to interact with the API!

Application overview

The Google Analytics application has been created with the aim of making it more user friendly than the original. The idea is to have almost every piece of important information on one single page and offer the information as simple as possible, with the minimum amount of clicks necessary. This minimalist interface offers vital information like the top searched keywords, most used browser, sessions, users, page view, devices, countries, and so on.

Technical overview

By using the Express plugin previously mentioned, it is possible to keep everything lightweight and compact, without requiring considerable processing power.

The Google Analytics app uses a Node.js server on the back-end. It uses the googleapis NPM package to get all the data from Google Analytics and deliver it to the front-end.

When it comes to the charts and the graphics implemented, Vue ApexCharts was chosen because of the level of flexibility, aesthetics, and customization that it offers. Additionally, v-calendar is used for the application’s datepicker.

What’s next?

There is still some fine-tuning and optimization that can be done in the future concerning the code. Moreover, additional capabilities such as getting regular reports by email or being able to download full reports as PDF can be added in the future.