HowTo — Thinking 🤔 2022.12.26 2023.01.01

Setting Up Analytics With TelemetryDeck

A how-to guide to see that people visit. No personal info tracked

First I needed to separate development config from production config in Hugo. You will probably want to do this, as not to put analytics from you testing stuff in your site data.

I tested out TelemetryDeck because I came across it in a list. It doesn’t use cookies, tracks no personally identifiable information, and has a pretty high (for me) free limit while still hosted in the cloud. There might be better; this is what I found first that fit my criteria.

It does seem to be targeted at tracking user interaction in apps instead of visitors on a website. But it will do for now. I might change analytics provider later.

Steps to get TelemetryDeck set up in a Hugo site

  1. Go to TelemetryDeck and click Get stated for free.
  2. Register.
  3. Create a new app.
  4. You should come into the dashboard. First, copy Your App ID and paste that into your production/config.toml file under [params]. Call it telemetryDeck or something: telemetryDeck = "ABCDEFGH-1234-WHATEVER"
  5. Click the JavaScript -> tile to find info about what to include in your webpage.
  6. Scroll down to Usage via Script tag.
  7. Open your theme’s layouts/partials/head.html file and add the script bits.

Changes to config.toml

Just below the [params] header, add your key = "value":

[params]
    name = "Your Name"
    telemetryDeck = "YOUR-K3Y-H3R3"

Changes to head.html

Just after the <head> tag, add the following:

{{ with .Site.Params.TelemetryDeck }}
  <script src="https://unpkg.com/@telemetrydeck/sdk/dist/telemetrydeck.min.js" defer></script>
  <script>
      window.td = window.td || [];
      td.push(['app', {{ . }}], ['user', 'anonymous'], ['signal']);
  </script>{{ end }}

Optionally enabling test mode for local tracking

If you are doing something locally that you should want to test, for example testing that your site sends data, consider making the following changes instead of the above to head.html:

{{ with .Site.Params.TelemetryDeck }}
  <script src="https://unpkg.com/@telemetrydeck/sdk/dist/telemetrydeck.min.js" defer</script>
  <script>
      window.td = window.td || [];
      td.push(['app', {{ . }}], ['user', 'anonymous'], ['signal'{{ with site.IsServer }}, { isTestMode: '{{ . }}' }{{ end }}]);
  </script>{{ end }}

You will also need to put the telemetryDeck = "YOUR-K3Y-H3R3" in the _default config file instead of, or development config file in addition to, config/production/config.toml.

This will send signals flagged isTestMode when running with hugo server or hugo server -D for showing drafts.

Troubleshooting

Q: Signals not showing up in the TelemetryDeck dashboard

A: At some times I had to forcibly reload TelemetryDeck’s dashboard by pressing CTRL+R in the browser to get new data. Even after toggling “Test Mode”.