feat: Add support for umami, matamo and plausible analytics in status page

[hadestructhor]

⚠️⚠️⚠️ Since we do not accept all types of pull requests and do not want to waste your time. Please be sure that you have read pull request rules:
https://github.com/louislam/uptime-kuma/blob/master/CONTRIBUTING.md#can-i-create-a-pull-request-for-uptime-kuma

Tick the checkbox if you understand [x]:

• I have read and understand the pull request rules.

Description

Fixes #5607
Fixes #5690
Fixes #2938

Type of change

Please delete any options that are not relevant.

• User interface (UI)
• New feature (non-breaking change which adds functionality)
• This change requires a documentation update

Checklist

• My code follows the style guidelines of this project
• I ran ESLint and other linters for modified files
• I have performed a self-review of my own code and tested it
• I have commented my code, particularly in hard-to-understand areas (including JSDoc for methods)
• My changes generates no new warnings
• My code needed automated testing. I have added them (this is optional task)

Screenshots (if any)

Please do not use any external image service. Instead, just paste in or drag and drop the image here, and it will be uploaded automatically.

[hadestructhor]

@louislam I just read the contributing and I'm tagging you as written in there.
This is a pull request where I intend to add support for umami analytics in status pages.
You can read the issue I've opened 5607.

[NotAShelf]

It would be very neat if you could make the implementation a bit more generic, so that other analytics software can be used as well. Plausible, for example, uses an almost identical format for injecting your "tracker" inside a script tag.

https://github.com/louislam/uptime-kuma/pull/5608/files#diff-abaf9512ad93e05dbe972cee7baafec4eedeed70fb3144655f55a4d54ac8cf62R206-R207

could easily be made generic imo.

[hadestructhor]

@NotAShelf Very nice idea, for now, I've tested my code and it fits my need to add umami tracking. I will probably open another issue and make another pr to make it more generic as the code truly is very similar to the google analytics pr I had seen.
I haven't used Plausible, but I know there are other analytics tools, I just happened to find Umami easier to run and setup.
For now, I've found the following analytics platforms:

• Google Analytics (already implemented)
• Umami Analytics (which should be covered with this pr)
• Matomo (to be added)
• Plausible (to be added)

I've found many more but these are the main ones I've found being used online. If there are any more, I invite anyone who uses them to list them in a comment so we can discuss adding them.

[CommanderStorm]

Pretty good.

I have left a comment about the migration/db-design and one how we could declutter this part of the UI.

[hadestructhor]

Hey, just saw your comments @CommanderStorm, I will take them into account this week hopefully, can't promise anything.
I've never used vue so I'll need to check how to make a list of options to select the type, and I might as well add support for plausible while I'm at it if I'm generalizing the database.
Didn't know about knex either, so I need some time to use it, but I looked at how it's used and it should be easy.

[hadestructhor]

@CommanderStorm I finished taking into account your remarks. I have honestly never used vue and it took me a while to get the select working, but it is tested and works as intended (automated tests and I tested it manually by connecting it to my own umami instance).
I don't have the time to add the Plausible support, but I will try to do it tomorrow if I have the time for @NotAShelf.
Don't hesitate to tell me if I did something that could be done better (I know I added a script tag before the template one on the status page when there's already another one at the bottom, but I couldn't get my options to load otherwise, I'm guessing the order counts in vue).

[hadestructhor]

@CommanderStorm I finished making it generic and refactoring the code, the tests all pass, I will let you validate it whenever you feel like it.
@NotAShelf I've also added support for Plausible, it should be pretty easy to add any other analytics software support in the future, I tried making one entry point and have specific implementations for each analytics platform.

[CommanderStorm]

Here is my review. Took a bit longer, but hey exams..
We can merge it into V2.1, once these are adressed

[CommanderStorm]

to see if someone could help to test this pull request.

@amirparsadd
Have you given the feature a test run and report back?
https://github.com/louislam/uptime-kuma/wiki/Test-Pull-Requests

It would be really valuable to have tested this once as I don't currently have the time to setup these tools myself and test that the integration works.
It should, but just to be sure.

[amirparsadd]

to see if someone could help to test this pull request.

@amirparsadd Have you given the feature a test run and report back? https://github.com/louislam/uptime-kuma/wiki/Test-Pull-Requests

It would be really valuable to have tested this once as I don't currently have the time to setup these tools myself and test that the integration works. It should, but just to be sure.

Im currently not at home but I will run a test after i get home.

Could you provide a list of things i have to test?

[CommanderStorm]

Just the regular "works as expected" regarding running UK; the analytics platform you use and that they can communicate together.

[RoyvanEmpel]

Hey 👋🏻, I'm testing out the Plausible integration and after a lot of trial and error I finally got it working.

The terms "Analytics ID" and "Analytics Script URL" are very confusing and it took me a very long time to finally find what I actually needed to insert.
In the Plausible setup they only show the following. They also give you the "Script ID" (which is the same as the ID in the <script> that they show).

After searching through their documentation I stumbled upon the Shopify docs which showed the use of data-domain just like the current Implementation below.

uptime-kuma/server/analytics/plausible-analytics.js

Lines 29 to 31 in a69566d

	return `
	<script defer src="${escapedScriptUrlHTMLAttribute}" data-domain="${escapedWebsiteIdHTMLAttribute}"></script>
	`;

In uptime kuma I added the following data

Checking in the <head> of the status page I can see it successfully adds the plausible script.

And it finally worked 😄. Plausible is showing analytics!

I think a few tweaks are needed to make the Plausible integration clearer. I understand that the URL configuration is necessary to support self-hosted instances, but requiring the full URL made it confusing with how the plausible (cloud) setup works.
Maybe it would be better to change this field to just the Host domain?

• Cloud users could simply enter plausible.io.
• Self-hosted users could enter their domain (e.g., analytics.example.com).

And the "Analytics ID" should always be the status page domain that the user is currently visiting. Maybe this field should be hidden?

[CommanderStorm]

I think I am going to pull this into 2.1 and let another PR deal with the UX issues that @RoyvanEmpel raised.

@RoyvanEmpel Would it be possible for you to create an issue for this?

[CommanderStorm]

@hadestructhor

Hey! Thanks again for the work on this PR 🙏

We’ve noticed that some of the tests introduced here are a bit brittle and occasionally fail on CI (example run linked above). Since everything else looks good, would you mind taking a look when you have a moment to see if they can be made a bit more robust?

No rush - just want to avoid future flakes for contributors and reviewers 🙂

Thanks!

https://github.com/louislam/uptime-kuma/actions/runs/20696224735/job/59411826948?pr=6577

[hadestructhor]

@CommanderStorm Hey there, it's been quite a while, I just saw that it was merged.
I will try to make another pull request over the weekend and update the tests at the very least.

@RoyvanEmpel, we could probably redo it to show the terms used by each analytics platform, ie show data-domain for plausible, and maybe add either a toggle for self hosted, and if not the default script url, but we originally thought it would be better to have just one term as all the analytics tools have the same concept, an identifier for your site and a url for the analytics script if that makes sense.

[RoyvanEmpel]

Hi 👋🏻, A issue has been created for the non-intuitive plausible inputs!

@RoyvanEmpel Would it be possible for you to create an issue for this?

I suggested two possible solutions in the issue #6744, maybe there are some other solutions for the same issue? Like a small alert / tooltip with a question mark icon next to the label name could also work.

@RoyvanEmpel, we could probably redo it to show the terms used by each analytics platform, ie show data-domain for plausible, and maybe add either a toggle for self hosted, and if not the default script url, but we originally thought it would be better to have just one term as all the analytics tools have the same concept, an identifier for your site and a url for the analytics script if that makes sense.