capsule/markdown/tracking-bear-upvotes-from-my-cabin.md

title	published	updated
Tracking Bear upvotes from my Cabin	2024-06-21T04:08:43.542298Z	2024-06-21T04:08:43.542298Z

Thanks to @mbjones helpful post on sending Bear upvotes to Umami, I was able to fumble through implementing the same behavior on my site with Cabin's event tracking.

Brandon's approach was to use this script added to the site's footer directives to add an event attribute to the upvote button:

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', " {{ post_title }}");
        };
script>

That did successfully set the attribute on my site, but clicks weren't showing up in the Cabin dashboard for some reason. So I switched tactics and opted to use the cabin.event() function instead:

script>
  window.onload = function() {
    var button = document.querySelector('.upvote-button');
    if (button) {
      button.addEventListener('click', function(event) {
        cabin.event("upvote {{ post_title }}");
      });
    }
  };
script>

And that did the trick!

Neat! Now that I have this knowledge I should be able to set up something similar on my other sites as well.

Big thanks to Brandon for getting me pointed in the right direction!

=> https://blog.jbowdre.lol/tracking-bear-upvotes-from-my-cabin/ 📡 Originally posted on jbowdre's weblog