mirror of
https://github.com/jbowdre/capsule.git
synced 2024-11-09 16:32:18 +00:00
convert Markdown post to Gempost
This commit is contained in:
jbowdre
github-actions[bot]
parent
50a20b3f47
commit
f068e40da1
4 changed files with 97 additions and 46 deletions
47
gemlog/tracking-bear-upvotes-from-my-cabin.gmi
Normal file
47
gemlog/tracking-bear-upvotes-from-my-cabin.gmi
Normal file
|
|
@ -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
|
||||
4
gemlog/tracking-bear-upvotes-from-my-cabin.yaml
Normal file
4
gemlog/tracking-bear-upvotes-from-my-cabin.yaml
Normal file
|
|
@ -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"
|
||||
|
|
@ -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:
|
||||
|
||||
<div class="highlight">```
|
||||
<span></span><span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
||||
<span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="c1">// Get the button element by its class name</span>
|
||||
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementsByClassName</span><span class="p">(</span><span class="s1">'upvote-button'</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
|
||||
<span class="w"> </span>
|
||||
<span class="w"> </span><span class="c1">// Set a new attribute, for example, 'disabled'</span>
|
||||
<span class="w"> </span><span class="nx">button</span><span class="p">.</span><span class="nx">setAttribute</span><span class="p">(</span><span class="s1">'data-umami-event'</span><span class="p">,</span><span class="w"> </span><span class="s2">"<event-name> {{ post_title }}"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
||||
```
|
||||
|
||||
</div>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:
|
||||
|
||||
<div class="highlight">```
|
||||
<span></span><span class="p"><</span><span class="nt">script</span><span class="p">></span>
|
||||
<span class="w"> </span><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="kd">function</span><span class="p">()</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="kd">var</span><span class="w"> </span><span class="nx">button</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">'.upvote-button'</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">button</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">button</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">'click'</span><span class="p">,</span><span class="w"> </span><span class="kd">function</span><span class="p">(</span><span class="nx">event</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
|
||||
<span class="w"> </span><span class="nx">cabin</span><span class="p">.</span><span class="nx">event</span><span class="p">(</span><span class="s2">"upvote {{ post_title }}"</span><span class="p">);</span>
|
||||
<span class="w"> </span><span class="p">});</span>
|
||||
<span class="w"> </span><span class="p">}</span>
|
||||
<span class="w"> </span><span class="p">};</span>
|
||||
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
|
||||
```
|
||||
|
||||
</div>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
|
||||
46
markdown/tracking-bear-upvotes-from-my-cabin.md
Normal file
46
markdown/tracking-bear-upvotes-from-my-cabin.md
Normal file
|
|
@ -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!
|
||||
|
||||
|
||||
|
||||
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
|
||||
Loading…
Reference in a new issue