Contribution: `<my-site-counter>` custom element

[nfreear]

Hi @arp242 and anyone who may be interested,

Martin, thank you for the work on GoatCounter — I'm finding it very useful!

I've written a Web component / custom element built on GoatCounter — released under an MIT license. You can find ...

• Source code — GitHub: nfreear/elements - ../MySiteCounterElement.js,
• Example usage — CodePen,
• It will be in use on my re-developed blog soon - https://github.com/nfreear/nfreear-blog/issues/75,

I'm happy to receive any feedback!

Best wishes,

Nick

[arp242]

Thanks Nick.

What's the concrete advantage of using your code over the standard count.js? Or to put it in another way: what did you find lacking in the existing count.js? Is there any way it could be improved?

One downside of your code is that e.g. classes are "only" supported by ~96% of browsers people use. While this is a very high number, this is a global average that may be higher in some locations. I tried very hard to make the count.js script as compatible as possible because "are people still using old browsers?" is an important use case; it should even work on old versions of IE. This is also why it still uses var instead of let and such.

[Danny-Engelman]

(I have done a fair share of Web Components)

Only benefit would be HTML slingers without JavaScript knowledge could add the counter to the page.
Indeed doesn't work in IE11-

And if a Web Component is required, Nick his solution isn't the best one (with his own MyElement.js dependency; and shadowDOM not required since there is no styling involved).
It can be done in one very small JS file.

But then a non- Web Component approach might be even easier, load just one script file with parameters:

<script src="//goatcounter.load/it.js?PAR1&PAR2">

And that creates all JS in the page