Creating An Upvote Button in Umami

I’ve been experimenting with Umami as an alternative to BearBlog’s built in analytics and Tinylytics. Not all of the sites I run are on BearBlog and I like the idea of owning my data. Umami is open-source, well maintained and on PikaPods. It’s also super simple to use.

From a collection standpoint, you just need to insert a call to a javascript script (like many analytics options) and the rest is (mostly) taken care of for you. There is one feature of both BearBlog analytics and Tinylytics that I wanted to be able to replicate in Umami and that’s upvoting (called kudos in Tinylytics). That was a bit more complex to get going as it requires separate events for each page/post.

The first way I thought of was to just add a button in the post template that included the necessary event on-click code. If I did it this way though I’d have two upvotes on each page which isn’t ideal. I’m also not too keen on ditching the bearblog upvote entirely because the directory discovery feature is at least somewhat based on upvotes from what I gathered.

Rather, I decided to basically hijack BearBlogs upvote button and add the Umami attribute needed to record an Umami event. Thankfully, it works great! If you run Umami and are interested in replicating this, you just need to add a little javascript in the footer directive in settings:

<script>
        window.onload = function() {
            // Get the button element by its class name
            var button = document.getElementsByClassName('upvote-button')[0];

            // Set a new attribute, for example, 'disabled'
            button.setAttribute('data-umami-event', "<event-name> {{ post_title }}");
        };
</script>

Basically, the getElementsByClassName looks for the element that has the upvote-button class. It then attaches an attribute called ‘data-umami-event and sets the event name (I use “upvote {{ post_title }}” which makes it unique for every post). When the upvote button gets clicked, events are then fired off in both Umami and BearBlog Analytics! My hope is someone can find this useful!

Have a thought? Or comment? Reply on Mastodon!