Is it possible to add elements to HTML/CSS tags without editing theme files?

I know Ghost has its own built-in analytics/tracking, but I’m using a self-hosted application called Umami to also provide various metrics/analytics for my blog.

According to its docs, properties can be added to various CSS page elements to track events on any given page (button clicks, link clicks, etc.):

In the example in their docs, they show something like this:

<button id="signup-button" data-umami-event="Signup button">Sign up</button>

Using the editor or code injection, is there any way to tag individual elements with the data-umami-event=“Signup button” portion for external tracking?

You definitely can do it within an HTML card. I would play with some HTML code and insert the elements to see what happens.

You can’t do it with some of the built-in cards, though. There is not a place to edit their underlying code.

You MIGHT be able to inspect the resulting code to find something you could attach to via code injection. Would take some experimenting.

Thanks for suggestion! Based on it, I discovered that I can build my post as usual, and then preview it and inspect the source for the section with elements I’d like to tag. I can then replace that section of the post with the HTML from the page source and inject my tags that way. (Trying my hardest to avoid building anything in HTML from scratch…)

It isn’t pretty, but it works. Thanks!

1 Like