Tracking Page Views with Google Analytics on Jekyll

Hello! 🌟#

While researching how to display page views on your static websites, I learned that we can use the Super Proxy library through Google Analytics to expose data externally. I found an old video from the Google team about this topic: Google Analytics Super Proxy. I found my solution by following this video. 🥰

Ingredients 🥗#

• Google Analytics Account
• Google Console Account

First Step#

After opening your Google Analytics account, don't forget to make this setting when adding your site: Open "Create a Universal Analytics property" and check as shown in the image.

Google App Engine Setup#

1. Go to Appengine site.
2. Click "Create Project" option.
3. Give your project a name and continue.
4. Choose Python as language and "standard" as environment.
5. Enable your billing account. You'll need to link your credit card, but you won't be charged as long as you don't exceed the free quota. This quota is more than sufficient for a simple blog.
6. From the left menu, select APIs and Services and then click Enable APIs and Services.

• Select Google Analytics API and enable the API.
• In APIs & Services menu, click OAuth consent Screen and in the popup window, check External option and continue.

• Publish your project.

• Activate OAuth 2.0 Client IDs from Credentials section.

• Note down the codes created as Client ID and Client Secret.
• Click again on Client ID and fill the following fields:
• Enter the URL given after creating your project in Authorized JavaScript origins section.
• Include only /admin/auth extension in Authorized redirect URIs section.

Cloud SDK#

1. First, go to Google Cloud CLI and download the software suitable for your operating system.
2. Then open the terminal and enter the following command:

gcloud init

Your browser will open, after the approval process you'll successfully log in. Then you can check your project information with the following command:

gcloud info

Your selected project information should be displayed here.

1. Now go to google-analytics-super-proxy repository and download the files.
2. Open src/app.yaml file with an editor and delete the following two lines at the beginning:

application: your-application-id
version: 1

Save the file.

1. Open src/config.py file. Fill OAUTH_CLIENT_ID and OAUTH_CLIENT_SECRET sections with the Client ID and Secret you created above.

1. Write a random strong password in the XSRF_KEY section.
2. Open terminal in the src folder and run the following command:

gcloud app deploy

After the process is completed, you can follow logs with the following command:

gcloud app logs tail -s default

To open your project in your browser:

gcloud app browse

Add /admin to the end of the opened link and log in to your connected Analytics account. If everything went well, you should encounter the following screen:

Google Analytics Query#

1. Click Create Query button and wait there.
2. Open UA Query Explorer. If you're using ad blocker extensions, don't forget to turn them off while working on this site.
3. Start Date => Enter the date of your oldest post.
4. End Date => Select "Today" option.
5. Metrics => Select "Pageviews".
6. Dimensions => Select "PagePath".
7. Filters => Fill as ga:pagePath=~^.\*/$;ga:pagePath!@=.

1. Click Run Query button and note down the generated URL.
2. Fill Create Query section as below.

1. Then click Manage option from project section, press Enable Endpoint and Start Scheduling buttons. Process complete! 🎉

2. Finally, after all this process is finished, the view should be as follows:

1. Open your _config.yml file and add the following codes:

google_analytics:
  id: "G-V6XXXXXXX" # Enter your Google Analytics ID
  pv:
    proxy_endpoint: "https://YOUR_PROJECT_ID.appspot.com/query?id=<YOUR SUPER PROXY ID>"
    cache_path: # Can be left empty due to being regional.

Filtering#

You can examine filtering variables from Core Reporting API Filters page.

Example Files#

• My _Config.yml File
• My Script.html File
• My Post.html File

Conclusion#

I'm using this solution on my blog. Google Console service doesn't try to charge from your card at the end of the month like Amazon which says it's free, I've been using it problem-free for seven months. Still, you can set up a payment alarm for precaution. You can go to alarms from payments section and set alarm when it exceeds 1 TL to warn me. 😉