Fathom analytics – new event dialog<\/p><\/div>\n
<\/p>\n
Copy the ‘Javascript code<\/strong>‘ bit (as we’ll need that over in Zaraz-land).<\/p>\nSetting up the event in Zaraz<\/h3>\n
If you’ve not added your basic Fathom tracking script (the GTM version, remember!), then do that now:<\/p>\n
Click ‘add new tool’<\/em> in Cloudflare.<\/p>\nZaraz – add new custom HTML tool<\/p><\/div>\n
<\/p>\n
\u2026.click ‘continue<\/em>‘<\/p>\nZaraz – add new custom html tool (step 2)<\/p><\/div>\n
\u2026and click [save].<\/p>\n
You’ll now see something that looks like this:<\/p>\n
Zaraz – empty custom HTML<\/p><\/div>\n
Now there may be a few ways to skin this cat but this is what I would do next\u2026.<\/p>\n
\u2026.go back to the main Zaraz homepage (we’ll return to our newly created custom tool later), and click ‘Create Trigger<\/strong>‘\u2026<\/p>\nZaraz Create Trigger<\/p><\/div>\n
Zaraz – create trigger dialog<\/p><\/div>\n
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<\/em> interested in Click Listener<\/strong> as this is very GTM like in the way you can attach triggers to CSS etc (notice also you can use Form Submission<\/strong>). Either way, decide what your triggering criteria are and go with that – here is mine for the banner:<\/p>\nZaraz – event trigger CSS<\/p><\/div>\n
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<\/strong> attribute of our pay as you go support page (otherwise this would fire on any<\/em> link). Note: I’m ignoring ‘wait for tags’ until something doesn’t work and I then need to explore it!<\/em><\/p>\nWith your trigger now freshly created you need to head back to the Custom HTML tool you added earlier.<\/p>\n
Click ‘edit<\/em>‘ next to it, and then ‘create event<\/em>‘ on the screen that follows. You’ll then see something like this:<\/p>\nZaraz – new event<\/p><\/div>\n
‘Event name<\/strong>‘ 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.<\/p>\n‘Firing Triggers<\/strong>‘ – select your newly created trigger from this dropdown.<\/p>\nHTML Code<\/strong> – 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<\/em> <script><\/strong> tag and a closing<\/em> <\/script><\/strong> 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).<\/p>\nWhat to do if things don’t work?<\/h2>\n
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\u2026.<\/p>\n
Firstly, make sure your base Fathom is working in Zaraz as without that, all bets are off.<\/p>\n
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):<\/p>\n