Best way to add Amplitude analytics to Hugo site

support
1

I’ve got a few Hugo sites up and running, and they seem to be doing great! However, I’d like to quantify how they’re performing using an analytics platform such as Amplitude. I’m primarily a mobile dev, so please forgive the noob questions. Amplitude has a new Typescript SDK that I can import with npm. This seems like a great option, but I’m not sure how to do this with Hugo. They also have a javascript SDK, which may be the way to go.

My questions are:

  1. Which SDK (Typescript via npm or JS) would work best with Hugo?
  2. If Typescript via npm, how do I actually import and use it? I found info on the hugo docs about hugo mod npm pack but haven’t found any examples. I know it’s asking a lot, but a tiny sample where the hugo site sends an Amplitude event on a button press would be super helpful.
  3. If JS, is there an easy way to capture the onclick for button presses and route it to the a JS function? Is there any Hugo magic that I could utilize in this situation?

Thanks a ton in advance. This is a bit over my head but I’d love to learn how to put all this together.

2

In Hugo’s “JavaScript Building” documentation, it shows how to add a JS file for Hugo to use in building pages. If you use the TypeScript Browser SDK option you mentioned, you’d write an appropriate script invoking the npm package and put that script somewhere in the Hugo project’s appropriate folder for Hugo Pipes to process it. As for the capturing of button presses — and I presume you mean as shown in the SDK’s “Tracking an Event” script example — no, Hugo provides no way to do that, since it only generates static pages up-front and serves no client-side function; so you’d have to write JS (or TS) to do that. Hugo itself works fine with TypeScript.

2 Likes