Using Fathom with Zaraz

Zaraz and Fathom

Using Fathom analytics with Zaraz is pretty straightforward (especially now that Zaraz have rolled out attaching events to CSS selectors ala Google Tag Manager – thank you!).

Note: read my previous article for a deeper introduction to Zaraz.

Gotcha

As of today, the bog-standard Fathom embed code does not work on Zaraz – because Zaraz is accidentally clobbering the supplied data-site attribute. The workaround is to use Fathom’s method for working with Google Tag Manager (no, you don’t need GTM installed, we’re just after the new code format here).

After you do that, Fathom should start showing data for you.

Events

One reason I am playing with Fathom is that, unlike Plausible*, Fathom seems to make it easy to define events and then get your website to track those.

(*am I wrong? If so, please do shout out).

Update: yep, I was wrong. Plausible easily allows custom events – not sure how I missed that!

On our site, we have this banner for ‘pay as you go WordPress support‘ dotted around over the place:

Pay-as-you-go WordPress support

Pay-as-you-go WordPress support

And I’d quite like to track the clicks to that (to be honest, this is not something that would keep me awake at night but I am keen on wiring up events for clients’ websites, so these techniques are essential for that).

To get all this to work is a two-step process:

  1. Set up the event in Fathom
  2. Set up the event in Zaraz

Setting up the event in Fathom

This is pretty easy: just click ‘add event‘ and you’ll see this dialog where you need to name your new events:

Fathom analytics - new event

Fathom analytics – new event

….give it a name and then you’ll see something like this:

Fathom analytics - new event dialog

Fathom analytics – new event dialog

 

Copy the ‘Javascript code‘ bit (as we’ll need that over in Zaraz-land).

Setting up the event in Zaraz

If you’ve not added your basic Fathom tracking script (the GTM version, remember!), then do that now:

Click ‘add new tool’ in Cloudflare.

Zaraz - add new custom HTML tool

Zaraz – add new custom HTML tool

 

….click ‘continue

Zaraz - add new custom html tool (step 2)

Zaraz – add new custom html tool (step 2)

…and click [save].

You’ll now see something that looks like this:

Zaraz - empty custom HTML

Zaraz – empty custom HTML

Now there may be a few ways to skin this cat but this is what I would do next….

….go back to the main Zaraz homepage (we’ll return to our newly created custom tool later), and click ‘Create Trigger‘…

Zaraz Create Trigger

Zaraz Create Trigger

Zaraz - create trigger dialog

Zaraz – create trigger dialog

Give the trigger a name that makes sense to you and then work out how you want the trigger to fire, as per my previous article on this, I’m really interested in Click Listener as this is very GTM like in the way you can attach triggers to CSS etc (notice also you can use Form Submission). Either way, decide what your triggering criteria are and go with that – here is mine for the banner:

Zaraz - event trigger CSS

Zaraz – event trigger CSS

Here I am saying the click listener is a CSS type (you can do XPath as well) and the selector is an A link with the href attribute of our pay as you go support page (otherwise this would fire on any link). Note: I’m ignoring ‘wait for tags’ until something doesn’t work and I then need to explore it!

With your trigger now freshly created you need to head back to the Custom HTML tool you added earlier.

Click ‘edit‘ next to it, and then ‘create event‘ on the screen that follows. You’ll then see something like this:

Zaraz - new event

Zaraz – new event

Event name‘ is just a label within Zaraz itself, so don’t get too hung up on this – just use something sensible that makes sense to you.

‘Firing Triggers‘ – select your newly created trigger from this dropdown.

HTML Code – this is where you want to paste in your javascript code from Fathom. BUT, don’t forget to wrap what you paste in between an opening <script> tag and a closing </script> one. If you forget that, I think it’ll all go Pete Tong (in fairness, I think the Zaraz interface could be smarter here to stop you dropping an obvious bollock at this point).

What to do if things don’t work?

Ok, admittedly I’ve brushed over this quite quickly – mainly because I want to save debugging for a future post. However, let’s cover some obvious points….

Firstly, make sure your base Fathom is working in Zaraz as without that, all bets are off.

If the issue you have now is that your event is not showing (and in my experience, events show up immediately in Fathom reporting interface), then check you’ve created the trigger correctly. If you’ve ever done this in GTM, you’ll know this is fiddly. Google Chrome inspector is a lifesaver here and I found some really good shortcuts in it to copy a CSS selector (I’ll go into this more in a future post):

Google Chrome Inspector - copy selector

Google Chrome Inspector – copy selector

The other killer feature you can use is to turn debugging on in Zaraz – again, I’ll go into detail in that in a future post but it’s pretty straightforward (as you can see on that link).

Hope that helps

 

Joel

 

Tags:
No Comments

Leave a Reply