According to their web site, "Plausible Analytics, is a simple, open-source, lightweight (< 1 KB) and privacy-friendly web analytics alternative to Google Analytics"
And Hugo is The world’s fastest framework for building websites.
This Hugo theme component & module is a dead simple integration between plausible.io and gohugo.io
- Add this
plausible-hugocomponent as a theme in your theme section inconfig.toml. - Add a
[params.plausible]section in yourconfig.tomlfile. - Call the partial
plausible_head.htmlin your own<head>section.
You also can use it as a versioned Hugo Module if you prefer and know how to do it.
theme = ["plausible-hugo"] # Add this theme to your already existing other themes
[params.plausible]
enable = true # Whether to enable plausible tracking
domain = "example.com" # Plausible "domain" name/id in your dashboard<head>
...
{{ partial "plausible_head.html" . }}
...
</head>If you want to use some custom goals, for each goal, you just have to add a snipplet in a partial named plausible_js.html that you have to create in your site /partials directory
Then, add a straightforward call to those plausible function/goal where you need it in your gohugo code.
This is an example, if you want a plausible custom goal named ClickOnTelephoneNumber.
function ClickOnTelephoneNumber() {
plausible('ClickOnTelephoneNumber');
}<a href="tel:+331234567890"
onclick="ClickOnTelephoneNumber()">
+331234567890
</a>You can have a use case where you want a custom goal setup when you enter a certain page. So you can have more granularity than the classic "page goals".
Just add a front matter parameter plausible_custom_goal in this page.
Each time you enter the page, your custom goal is reached.
---
plausible_custom_goal : "MySpecialCustomGoal"
---For more flexibility, do not forget that you can use any {{ $variable }} or {{ .variable }} for your Goal name.
For example, generate your goals using /data/about.yml or similar frontmatter, you get the idea.
Then you’ll get 2 goals : telephoneMobileAbout & telephoneHomeAbout
about:
enable : true
title : My title
about_item :
- title : An other item title
plausible : Mobile
phone : "+33 1 23 45 67 89"
content : lorem ipsum is better than nothing.
- title : An other item title 2
plausible : Home
phone : "+33 9 87 65 43 21"
content : lorem ipsum is better than nothing 2{{- $data := index .Site.Data .Site.Language.Lang }}
{{- if $data.about.about.enable }}
{{- range $data.about.about.about_item }}
<!-- sanitize phone number for tel: function -->
{{ $phone_ok := (replaceRE "(\\s)" "" .phone ) }}
<a href="tel:{{ .phone_ok }}"
onclick="telephone{{ .plausible | safeJS }}About()">
{{ .phone }}
</a>
{{- end }}
{{- end }}{{- $data := index .Site.Data .Site.Language.Lang }}
{{- if $data.about.about.enable }}
{{- range $data.about.about.about_item }}
function telephone{{ .plausible | safeJS }}About() {
plausible('telephone{{ .plausible | safeJS }}About');
}
{{- end }}
{{- end }}If you want to use the Outbound Link custom goal,
just add the parameter outbound_link to your params.plausible section.
[params.plausible]
outbound_link = trueYou can prevent certain pages from being tracked by adding plausible_do_not_track: true in the page Front Matter
---
plausible_do_not_track: true
---If you use your own subdomain for plausible.io, you just have to give the url in custom_js_domain parameter. This is optional.
[params.plausible]
custom_js_domain = "stats.example.com"If you made your dashboard public, you may want to write this url in your web page source, so people can find it more easily.
Just add public_dashboard = true in your config.toml plausible section. By default this option is set to false, so nothing is written by default.
[params.plausible]
public_dashboard = trueAnd this will be written in your HTML source code. It also works for self hosting.
<!-- Plausible Analytics public dashboard URL : https://plausible.io/example.com -->You can define your self hosted domain address in config.toml.
This is optional, and plausible.io is used if this parameter is unset.
[params.plausible]
selfhosted_domain = "myplausible.example.com" # Self-hosted plausible domainBe careful if you have some CSP in your headers, do not forget to allow plausible domains you use.
You can add directly the requested domain(s) to your existing Content-Security-Policy.
Or use this plausible_csp.html partial in your /layouts/index.headersto generate for you the correct _headers, used by Netlify:
Content-Security-Policy: [... existing stuff ...] {{ partial "plausible_csp.html" . }}
In any case, in the HTML source code, you'll find a comment with the correct domain to add to your CSP.
When you're in hugo mode server, the call to plausible.io javascript is disable, so you can dev without bloating your statistics.
When in mode server you could really need to test your code in real situation.
In this case, just add debug = true in your [params.plausible].
The call to plausible.io javascript will be enable, so you can have everything working like in production.
[params.plausible]
debug = true # debug modeWe perform an automatic check if the right mandatory variables are fitting the right version.
If we found a problem, we abort your build with a clear message.
So it helps you updating your config.toml in case we introduced some breaking changes in variables names between versions. It is rare, but it happened already.
- Hugo : www.gohugo.io
- Plausible : www.plausible.io
- Plausible documentation : docs.plausible.io
- Plausible community forum : plausible.discourse.group