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).
Figure 1. fathom home page
However, when including fathom's JavaScript file, you also need to include an arbitrary attribute, which you can see in the example below.
1
2
3
4
| <script
src="https://cdn.usefathom.com/script.js"
data-site="ABCDEFG"
defer></script>
|
This is used to identify the account for which the analytics data is being recorded for.
Why?
As they say on their website:
We are the proud inventors of cookieless website analytics and our software is compliant with GDPR, ePrivacy, PECR, CCPA, and COPPA.
— https://usefathom.com/
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 PHP’s Mezzio Framework, it’s built with Mezzio, which uses Laminas components.
Specifically, it uses laminas-view for the, rather simplistic, frontend view layer.
In the relevant view templates, the code uses 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.
1
2
3
4
5
6
7
8
9
10
| <?php
$this->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.
1
2
3
4
| ->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:
1
2
3
4
5
6
7
| ->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 in the HeadScript docs:
Arbitrary Attributes are Disabled by Default
By default, HeadScript only will render <script> attributes that are blessed by the W3C.
These include id, charset, crossorigin, defer, integrity, language, src, and type.
However, some JavaScript frameworks, notably Dojo, utilize custom attributes in order to modify behavior.
To allow such attributes, you can enable them via the setAllowArbitraryAttributes() method:
Given that, I added a call to →setAllowArbitraryAttributes(true)
at the end of the call to appendFile
, and the custom attributes were rendered.
For the sake of completeness, here is a complete example.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| <?php
$this->headScript()
->appendFile(
'https://cdn.jsdelivr.net/npm/vue/dist/vue.js',
'text/javascript'
)
->appendFile(
'https://cdn.usefathom.com/script.js',
'text/javascript',
[
'data-site' => 'YAAAAAAA'
]
)
->setAllowArbitraryAttributes(true);
echo $this->headScript();
?>
|
Join the discussion
comments powered by Disqus