N.B. USING GA IS ILLEGAL IN SOME EUROPEAN COUNTRIES.
There are efforts made to create stripped down versions of Google Analytics version 4. This helps to speed up your site instead of loading the GA4 official library script.
However, the stripped down versions support the basic or essential tracking functions, and thus, if you require more advanced tracking (like Adwords), just use the official GA4 library instead.
Currently, I have found two implementations of the minimal GA4 script:
-
jahilldev / minimal-analytics/ga4 - this version tracks page views, engagement time, scroll, file download and click tracking events… It weighs in at 2kb (gzipped).
-
idarek / minimal-analytics-4-min.js - this version tracks pageviews, scroll and site search and weighs slightly over 1kb (gzipped).
This tutorial uses the code from the first implementation (the CDN section). Ensure you have the latest Hugo version (from version 0.100.0
and up).
N.B. 1 I recommend using methods 1 and 3.
N.B. 2 You might need to add https://www.google-analytics.com
to your connect-src
directive in Content Security Policy to make this code work (method 1 also requires using hash or nonce if you disable inline scripts in your CSP).
Method 1
- Create an
analytics.html
file insidelayouts/partials
and paste the code below
Summary
{{- with site.Params.google.analytics.id }}
{{- $script := resources.GetRemote "https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }}
<script >
window.minimalAnalytics = {
trackingId: '{{ . }}',
autoTrack: true, // <-- init tracking
};
</script>
<script src="{{ $script.RelPermalink }}" async></script>
{{- end }}
- Add the code below to your configuration file (this example assumes
config.toml
is in use) and replaceG-XXXXX
with your GA4 measurement ID.
[params.google.analytics]
id = "G-XXXXX"
- Then add the partial wherever you want it to appear in your site (e.g. inside
<head></head>
or just before the closing</body>
tag)
{{- partial "analytics.html" . }}
- Check your source code (
ctrl+U
) to ensure your code appears correctly.
If your site is live, or even if using a test site, check the “real time” section of your GA4 property. If you implemented everything correctly, you should start seeing some live stats being recorded after a few minutes.
Method 2
- Copy-paste the code below in a JS file (like
track.js
) inassets/js
folder of your base layout or your theme.
Summary
window.minimalAnalytics = {
trackingId: '{{ . }}',
autoTrack: true, // <-- init tracking
};
- Add this code to the
analytics.html
partial.
Summary
{{- with site.Params.google.analytics.id }}
{{- $script := resources.GetRemote "https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }}
{{ $track := resources.Get "js/track.js" | resources.ExecuteAsTemplate "js/track.js" . }}
{{- $analytics := slice $track $script | resources.Concat "js/analytics.js" | minify | fingerprint }}
<script src="{{ $analytics.RelPermalink }}" integrity="{{ $analytics.Data.Integrity }}" async></script>
{{- end }}
-
Include the tracking code in the configuration file as in method 1.
-
Add the partial in your template as in method 1.
Method 3
track.js
Summary
import params from "@params";
window.minimalAnalytics = {
trackingId: params.trackingId,
autoTrack: true, // <-- init tracking
};
analytics.html
Summary
{{- with site.Params.google.analytics.id }}
{{- $js := resources.GetRemote "https://cdn.jsdelivr.net/npm/@minimal-analytics/ga4/dist/index.js" }}
{{- $track := resources.Get "track.js" -}}
{{- $opts := dict
"params" (dict "trackingId" site.Params.google.analytics.id)
-}}
{{- $track = $js | js.Build $opts -}}
{{- $analytics := slice $track $script | resources.Concat "js/analytics.js" | minify | fingerprint }}
<script src="{{ $analytics.RelPermalink }}" integrity="{{ $analytics.Data.Integrity }}" async></script>
{{- end }}
-
Include the tracking code in the configuration file as in method 1.
-
Add the partial in your template as in method 1.
(Credit)
Side note
If you want this code to only work in production, wrap the <script>
part in hugo.IsProduction
, e.g
Summary
{{ if hugo.IsProduction }}
<script src="{{ $analytics.RelPermalink }}" integrity="{{ $analytics.Data.Integrity }}" async></script>
{{ end }}