Include Google Analytics into Hugo

Bissetii recognizes metric capturing is one of the important component for the web development and therefore facilitated a seamless way to include Google Analytics. This page guides you on how to do it with Hugo.

Based on the specification, Bissetii complies to its requirements by including its Javascript in the <head> section.

Adding Google Analytics ID

To enable Google Analytics, simply add your Google Analytics ID into docs/.data/bissetii/vendors/Google.toml data file inside your data/ directory.

The field you’re looking for is called [Analytics].ID. Here is an example:

1
2
3
4


# All Google Related Configurations

[Analytics]
ID = "UA-1234565789"  # GA-ID

Setting this field as blank results with not including Google Analytics into your website.

Google Analytics for AMP

Due to the fact that Javascript is not available in AMP pages and only certain AMP Javscript module is allowed, you need to add the triggers manually. Only you know where to add the trigger.

There is no easy way to do that except using the renderHTML shortcodes in each Markdown page. Bissetii recommends adding it in front of the page title. Here is an example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


...
+++

{{< renderHTML "amp" >}}
<amp-analytics type="gtag" data-credentials="include">
        <script type="application/json">
                {
                        "vars": {
                        "gtag_id": "<GA_MEASUREMENT_ID>",
                        "config": {
                                "<GA_MEASUREMENT_ID>": { "groups": "default" }
                                }
                        },
                        "triggers": {
                                "button": {
                                        "selector": "#the-button",
                                        "on": "click",
                                        "vars": {
                                                "event_name": "login",
                                                "method": "Google"
                                        }
                                }
                        }
                }
        </script>
</amp-analytics>
{{< /renderHTML >}}

Wrapping Up

That is all for including Google Analytics with Bissetii into Hugo. If you have any question to ask us directly, please feel free to raise it at our GitLab Issues Section. We will be happy to assist you.