:idseparator: - :idprefix: :experimental: :source-highlighter: rouge :rouge-style: pastie :imagesdir: /images :source-linenums-option: on :tip-caption: đź’ˇ
== Let’s Get Started
Recently, I decided to try out the privacy-focused https://usefathom.com/[_fathom_], as an alternative to Google Analytics, https://mezzioessentials.com[on the website for one of my books (Mezzio Essentials)].
Given that the integration, at its most basic, only requires including fathom’s JavaScript to be included on the site, I expected that I’d be a finished in about 5 minutes (including commit and redeploy).
.fathom home page image::posts/fathomanalytics.png[fathom]
However, when including fathom’s JavaScript file, you also need to include an arbitrary attribute, which you can see in the example below.
[source,html,linenums,highlight=3..3]
This is used to identify the account for which the analytics data is being recorded for. Why? As they say https://usefathom.com/[on their website]:
[quote,https://usefathom.com/] We are the proud inventors of cookieless website analytics and our software is compliant with GDPR, ePrivacy, PECR, CCPA, and COPPA.
TIP: Check out the details of https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script[the Script element] on MDN for more details.
No, this is not a cheap plug for them, though I am really happy with the experience so far!
So what does this all have to do with the Mezzio Essentials site? Well, as you might expect from being a landing page for a book about https://docs.mezzio.dev/mezzio/[PHP's Mezzio Framework], it’s built with Mezzio, which uses https://getlaminas.org/[Laminas components]. Specifically, it uses https://docs.laminas.dev/laminas-view/[laminas-view] for the, rather simplistic, frontend view layer.
In the relevant view templates, the code uses https://docs.laminas.dev/laminas-view/helpers/head-script/[the HeadScript helper] to include the required JavaScript files, such as for using Vue.js, and MailChimp. I’ve included a small example here below.
[source,php]
headScript() ->appendFile( 'https://cdn.jsdelivr.net/npm/vue/dist/vue.js', 'text/javascript' ); echo $this->headScript(); ?>Given that, at first, I thought that all I’d need to do to get fathom analytics running was to add another call to appendFile and change the first parameter to fathom’s URI, such as in the example below.
[source,php]
->appendFile( ‘https://cdn.usefathom.com/script.js', ’text/javascript’, )
However, that won’t include the custom attribute.
At this point, I had a look at appendFile’s definition and noticed that the method supports a third parameter, an array of attributes.
So I changed the call to appendFile to the example below:
[source,php,linenums,highlight=4..6]
->appendFile( ‘https://cdn.usefathom.com/script.js', ’text/javascript’, [ ‘data-site’ => ‘ABCDEFG’ ] )
However, after reloading the page, the custom attribute still wasn’t rendered. That’s when I noticed this, small, paragraph https://docs.laminas.dev/laminas-view/helpers/head-script/[in the HeadScript docs]:
[quote] Arbitrary Attributes are Disabled by Default + By default, HeadScript only will render comments powered by Disqus