diff --git a/gemlog/tracking-bear-upvotes-from-my-cabin.gmi b/gemlog/tracking-bear-upvotes-from-my-cabin.gmi new file mode 100644 index 0000000..084dea3 --- /dev/null +++ b/gemlog/tracking-bear-upvotes-from-my-cabin.gmi @@ -0,0 +1,47 @@ +Thanks to @mbjones[1] helpful post on sending Bear upvotes to Umami[2], I was able to fumble through implementing the same behavior on my site with Cabin[3]'s event tracking[4]. + +=> https://social.lol/@mbjones 1: @mbjones +=> https://wand3r.net/creating-an-upvote-button-in-umami/ 2: sending Bear upvotes to Umami +=> https://withcabin.com/ 3: Cabin +=> https://docs.withcabin.com/events.html 4: 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! + +Analytics screenshot showing upvote events being tracked for a few blog posts.[1] + +=> https://bear-images.sfo2.cdn.digitaloceanspaces.com/jbowdre-1718942666.png 1: Analytics screenshot showing upvote events being tracked for a few blog posts. + +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 diff --git a/gemlog/tracking-bear-upvotes-from-my-cabin.yaml b/gemlog/tracking-bear-upvotes-from-my-cabin.yaml new file mode 100644 index 0000000..48a73bb --- /dev/null +++ b/gemlog/tracking-bear-upvotes-from-my-cabin.yaml @@ -0,0 +1,4 @@ +id: "urn:uuid:36dfd09a-7e6b-4b7f-88ad-250ef7349e70" +title: "Tracking Bear upvotes from my Cabin" +published: "2024-06-21T04:08:43.542298Z" +updated: "2024-06-21T04:08:43.542298Z" diff --git a/markdown/incoming/tracking-bear-upvotes-from-my-cabin.md b/markdown/incoming/tracking-bear-upvotes-from-my-cabin.md deleted file mode 100644 index a547e8b..0000000 --- a/markdown/incoming/tracking-bear-upvotes-from-my-cabin.md +++ /dev/null @@ -1,46 +0,0 @@ ---- -title: "Tracking Bear upvotes from my Cabin" -published: "2024-06-21T04:08:43.542298Z" -updated: "2024-06-21T04:08:43.542298Z" ---- - -Thanks to [@mbjones](https://social.lol/@mbjones) helpful post on [sending Bear upvotes to Umami](https://wand3r.net/creating-an-upvote-button-in-umami/), I was able to fumble through implementing the same behavior on my site with [Cabin](https://withcabin.com/)'s [event tracking](https://docs.withcabin.com/events.html). - -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! - -![Analytics screenshot showing upvote events being tracked for a few blog posts.](https://bear-images.sfo2.cdn.digitaloceanspaces.com/jbowdre-1718942666.png) - -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 \ No newline at end of file diff --git a/markdown/tracking-bear-upvotes-from-my-cabin.md b/markdown/tracking-bear-upvotes-from-my-cabin.md new file mode 100644 index 0000000..a4a1714 --- /dev/null +++ b/markdown/tracking-bear-upvotes-from-my-cabin.md @@ -0,0 +1,46 @@ +--- +title: "Tracking Bear upvotes from my Cabin" +published: "2024-06-21T04:08:43.542298Z" +updated: "2024-06-21T04:08:43.542298Z" +--- + +Thanks to [@mbjones](https://social.lol/@mbjones) helpful post on [sending Bear upvotes to Umami](https://wand3r.net/creating-an-upvote-button-in-umami/), I was able to fumble through implementing the same behavior on my site with [Cabin](https://withcabin.com/)'s [event tracking](https://docs.withcabin.com/events.html). + +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! + +![Analytics screenshot showing upvote events being tracked for a few blog posts.](https://bear-images.sfo2.cdn.digitaloceanspaces.com/jbowdre-1718942666.png) + +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 \ No newline at end of file