Blog Jekyll: Google Analytics (GA4) i modyfikacja stopki bloga

Podłączenie Google Analytics 4 (GA4) w blogu Jekyll z motywem Chirpy: konfiguracja _config.yml, strona polityki prywatności oraz rozszerzenie stopki bloga.

Opublikowano Zaktualizowano
Autor Marcin Szewczyk
3 min czytania
Blog Jekyll: Google Analytics (GA4) i modyfikacja stopki bloga

Na koniec warto podpiąć Google Analytics (GA4), żeby wiedzieć, czy ten blog czyta też ktoś inny niż autor.

W Jekyllu z motywem Chirpy robi się to w trzech krokach:

  1. konfiguracja Google Analytics (GA4)
  2. powiązanie GA4 z Jekyllem przez plik _config.yml
  3. dodanie informacji w stopce (_includes/footer.html, link do polityki prywatności)

Konfiguracja GA4 w panelu Google

Kroki w panelu Google:

  • wchodzę na stronę https://analytics.google.com/ i loguję się kontem Google
  • tworzę nowe Property, o nazwie np. blog.marcinszewczyk.net, strefa czasowa Polska, waluta PLN
  • jako platformę wybieram Web, URL strony: https://blog.marcinszewczyk.net
  • nadaję nazwę strumieniowi danych, np. Blog PL
  • kopiuję Measurement ID, w formacie: G-XXXXXXXXXX

Identyfikator G-XXXXXXXXXX jest jedyną informacją z Google Analytics 4 wymaganą przez motyw Chirpy.

Konfiguracja GA4 w Jekyll + Chirpy

Konfiguracja pliku _config.yml

W pliku _config.yml dodaję:

1
2
3
4

# Web Analytics Settings
analytics:
  google: 
    id: "G-XXXXXXXXXX" # fill in your Google Analytics ID

Po zmianie _config.yml należy przebudować stronę lokalnie (bundle exec jekyll serve) lub wypchnąć zmiany do repozytorium (GitHub Pages uruchomi automatyczny build). Następnie warto wykonać twarde odświeżenie przeglądarki (Ctrl+F5), aby wykluczyć problem z cache.

To wszystko. Motyw Chirpy sam generuje odpowiedni kod dla GA4.

Strona z polityką prywatności

Po podpięciu Google Analytics do Jekylla dodaję stronę z informacją o przetwarzaniu danych.

Tworzę stronę _pages/privacy.md o przykładowej treści:

1
2
3
4
5
6
7
8
9
10
11
12
13

---
title: Polityka prywatności
layout: page
permalink: /privacy/
---

Strona wykorzystuje Google Analytics (GA4) w celu statystycznym
(zliczanie odsłon i ogólne informacje o korzystaniu).

Dane zbierane przez Google Analytics są przetwarzane zgodnie z polityką
Google: [https://policies.google.com/privacy](https://policies.google.com/privacy).

Strona nie wykorzystuje danych do profilowania ani celów marketingowych.

Dodaję ją do pliku _config.yml, dopisując poniżej sekcji tabs:

1
2
3
4
5
6
7
8

# tabs and pages collections (Chirpy)
collections:
  tabs:
    output: true
    sort_by: order
  pages:
    output: true
    permalink: /:path/

Konfiguracja plików _data/locales/pl.yml i _data/locales/en.yml

Potrzebna jest konfiguracja plików językowych _data/locales/pl.yml i _data/locales/en.yml w celu umieszczenia w nich danych które zostaną użyte w stopcje.

W pliku _data/locales/pl.yml zmieniam pole meta:

1

meta: "Generator: :PLATFORM · Motyw: :THEME · Licencja: :COPYRIGHT · Analityka: :PRIVACY"

W pliku _data/locales/en.yml zmieniam pole meta:

1

meta: "Generator: :PLATFORM · Theme: :THEME · License: :COPYRIGHT · Analytics: :PRIVACY"

Konfiguracja stopki _includes/footer.html

Chirpy pozwala dostosować stopkę poprzez skopiowanie pliku footer.html z motywu do lokalnego projektu.

Nadpisanie pliku w projekcie powoduje, że Jekyll używa lokalnej wersji zamiast tej z gema.

Najpierw sprawdzam lokalną ścieżkę do motywu Chirpy:

1

bundle info jekyll-theme-chirpy

Ścieżka zależy od zainstalowanej wersji motywu.

Następnie kopiuję plik stopki _includes/footer.html z motywu do projektu:

1
2
3

copy ^
"E:\Ruby34-x64\lib\ruby\gems\3.4.0\gems\jekyll-theme-chirpy-7.4.1\_includes\footer.html" ^
"_includes\footer.html"

W pliku _includes/footer.html zakomentowuję (<!-- ... -->) linię:

1
2
3
4

{{ site.data.locales[include.lang].meta
  | replace: ':PLATFORM', _platform
  | replace: ':THEME', _theme
}}

i zastępuję ją wersją rozszerzoną:

1
2
3
4
5
6

{{ site.data.locales[include.lang].meta
  | replace: ':PLATFORM', _platform
  | replace: ':THEME', _theme
  | replace: ':COPYRIGHT', _license
  | replace: ':PRIVACY', _privacy
}}

Powyżej tego kodu dodaję definicję zmiennych _privacy i _license:

1
2
3
4
5
6
7

{%- capture _privacy -%}
  <a href="{{ '/privacy/' | relative_url }}">GA4</a>
{%- endcapture -%}

{%- capture _license -%}
  <a href="{{ '/legal/' | relative_url }}">Copyright</a>
{%- endcapture -%}

Efektem jest zmodyfikowana stopka bloga, generowana zgodnie z aktualnym językiem (Rys. 1 i Rys. 2).

Stopka bloga w języku polskim Rys. 1. Stopka bloga w języku polskim.

Stopka bloga w języku angielskim Rys. 2. Stopka bloga w języku angielskim.

Test zbierania danych

Na koniec testuję w panelu Google Analytics (Reports → Realtime).

Podsumowanie

Na tym etapie blog:

  • zbiera statystyki (GA4)
  • udostępnia feed RSS (skonfigurowany wcześniej)
  • pozostaje w pełni statyczny

Czyli jest fajnie.

Blog Jekyll
blog jekyll google-analytics rss setup
© Marcin Szewczyk. Wszelkie prawa zastrzeżone.