CloudFlare has recently bought Zaraz and I’d like to use this article to explore what I’ve learned so far about the very interesting possibilities here.
Firstly, let’s recap the general landscape of the problem at the moment:
- Our websites are overburdening with third party scripts
- These scripts are a performance headache
- These scripts are a privacy headache
- These scripts can be a security headache
- They probably do a lot of things the same (wasteful repetiton – especially when browser speed counts).
You also need to consider that the landscape that these third party scripts are operating in is changing quickly: with ad blockers, Apple’s ITP etc, the window in which these scripts operate is ever closing. New solutions need to be found.
One solution I’ve been looking at is Server Side Google Tag Manager (refer to Simo Ahava for all things gtm). That is indeed a heavyweight, super flexible solution. However, it is non-trivial to set up and maintain (especially for non-techies). Please allow me to introduce you to a potentially much simpler method that may address similar use cases….
Note: before I go any further, please remember the overarching goal here – we’re looking to streamline our websites, and streamline and organise our processes by which third parties get access to data. We are not looking simply for workarounds that circumvent the increasingly inhospitable browser environment for tracking scripts etc.
Update: the Zaraz interface on Cloudflare now allows you to add events/triggers by tapping into CSS etc directly (i.e. avoiding hardcoded funk discussed later, or even the need for GTM). Well done, Zaraz team!
Fig – attaching an event to CSS etc in Zaraz
As you see from the above Fig, we now have a new first dropdown with extra options: Page Rule (same as before really), Click Listener, Form Submission, and Timer. With Click Listener you also have a ‘Type’ dropdown where you can add in a CSS selector or, interesting, XPath notation. Lots of flexibility here.
Introducing Cloudflare
Hopefully, you know what Cloudflare is: they are very focused on making the internet faster and more secure. What typically happens is that CloudFlare handles all the requests to your website (a proxy) – being in this position means they get to filter and enhance requests before they ever get to your site. This is why their Web Application Firewall is so powerful – filtering out known hack attacks on your site – acting as a defensive outer perimeter.
Now, that’s a simplification of CloudFlare – they actually offer lots of services that may be applicable to your website or business. We’ve already mentioned one (the Web Application Firewall), let’s look next at the one which is the focus of this article: Zaraz.
What is Zaraz?
CloudFlare’s new Zaraz offering means that you can host your previously embedded third scripts such as Google Analytics, Facebook Pixel as part of CloudFlare’s infrastructure. This means they are not embedded on your site directly and are loaded in a much more performant & secure manner. Immediately that’s a win here in terms of performance.
These scripts are also now running in a first-party context – as part of your domain. They no longer look like third party scripts, and they can issue cookies etc in a first-party context (first-party being from your domain rather than the third-party cookies which are essentially being made redundant).
Enabled Zaraz on your site literally takes moments – select (say) Google Analytics, enter your unique ID and it’s up and running.
Zaraz and events
This is where it gets even more interesting….
We can create triggers in the Zaraz control panel, firing certain tags on our website e.g.
For the purposes of temporary testing, notice we have added two ‘third-party tools‘ above; Google Analytics and Facebook Pixel. You can click ‘Add new tool‘ button to select from a growing list of other services you can use (from what I can see these are modified, vetted scripts). Also, support for custom HTML is coming soon (i.e. giving you even more flexibility, especially if your preferred tool is not listed). Custom HTML has now been added.
Triggers are things that you want to track (you’ll be familiar with the idea from Google Tag Manager). In the screenshot, these are purely tests (we don’t actually use Google Analytics or Facebook PIxel on the Glass Mountains site normally, they are temporarily present via Zaraz purely for this article) so please ignore the poor naming conventions etc.
All I want you to focus on here is this:
- Things like PageView will be added by Zaraz automatically (which is why it says ‘System Trigger‘).
- But if you want to track other events, you’ll need to set those triggers up yourself.
- And those triggers can pass on their payload to Google Analytics *and* Facebook Pixel (or whatever tools you want set up), notice the ‘Usage‘ column next to the three triggers.
How do we wire up Zaraz events on our website?
The most basic way of doing it would be as below (I’m sure my devs would laugh at my poor coding here, but it does work for the purposes of a basic test!):
<p><a href="https://www.glassmountains.co.uk/pay-as-you-go-wordpress-support/" class="cta" onclick="javascript:zaraz.track('test_click');">Try our Pay as You Go support option</a></p>Here we have a simple link to our Pay as You Go support page – additionally, you’ll notice it’s actually running some javascript when the onclick event fires. The function that is being called is zaraz.track(), with a parameter imaginatively named ‘test_click‘. This is where Zaraz is being invoked, and can then pass on information to Google Analytics, Facebook Pixel or however we want things set up. This single approach to capturing events etc on the website greatly simplifies and streamlines things.
A New Hope?
Adding onclick javascript attributes to your HTML and changing the code of our website is pretty unwieldy, luckily there is a better way…
If you’ve used Google Tag Manager (GTM) before you may have used their triggers to (say) fire a tag when someone (for example) clicks on a website button, or scrolls down the page. GTM’s interface for setting up these triggers is fantastic – you don’t have to muck around with the code on your page – providing you with a lovely clear separation between the page code and how you want to wire up your events etc.
At first glance, you may be excused for thinking that you should not run GTM and Zaraz and, to a degree, you’re right. You certainly don’t want GTM and Zaraz both embedding/sending data to third parties such as Google Analytics etc – that’s obviously not right. However, there is a middle ground….
If you strip back your GTM set up so that it does not embed third-party scripts like Google Analytics tags, Facebook Pixel tag and, instead, leave that to Zaraz, then we can use what remains of GTM to do the following: easily fire Zaraz events based on GTM triggers. This makes it so much easy to attach website events.
I’ll spare the full details here (unless you want me to go into that on a tutorial) but the key point is this: I already had set up a GTM trigger called ‘Sidebar Clicks‘ previously that helped me work out when people were clicking on our (say) Pay as You Go WordPress support option. Previously this Trigger would have sent data directly to Google analytics.
However, in this new Zaraz centric set up, the tag fires the zaraz.track() function with an event name of gtm_zaraz_click_test.
Zaraz then receives the event and, as in line with how you configure the trigger in Zaraz itself, sends the data to wherever service(s) you want.
So there we have, a nice way to get Zaraz set up and events firing.
Further Steps
This is a brief dive in today, if you want more of a step by step tutorial, or a video let me know.
I’m very interested in the following points:
- Investigating how we wire up ‘consent‘ with Zaraz. It is possible, though you need to do some more heavy lifting with triggers etc in Zaraz*. More to follow.
- Seeing how Zaraz evolves with further out of the box tools, and customisaton etc
- Seeing if Zaraz evolves with a GTM like interface to help with wiring up events (which then would do without the need for GTM) (update: this is coming).
*talking of consent and privacy, I forgot to mention that when adding ‘tools’ to Zaraz, it seems to always give the option to anonymise the IP address of the visitor (see Fig below); helping strip PID from traffic. I’m not saying that alone is enough to avoid consent, but it does it does show how we are easily in the driving seat of moulding this data pipe. I’m sure there is a lot more we can be doing in Zaraz as well in terms of manipulating data before it gets passed on to GA, FB etc.
Facebook Pixel
Also, I’ve not said much about Facebook Pixel but I got that working without too much grief.
Let’s also take a quick look at the events as they appear in Facebook:
A few things to note here:
- You’re seeing the PageView event (which relates to the system generated event in Zaraz when you simply enable the Facebook Pixel integration)
- gtmZazazClickTest(sic) and Test_click are custom events I set up the site. Test_click was using the raw javascript method, and the other (surprisingly) was via the GTM integration described above.
Please note: I found it took a while for data to show in Facebook – which makes debugging and testing a little harder as at first I thought things were not working.
Interested in anyone’s thoughts here on anything I’ve missed, got wrong, or other ideas.
Joel
Related Articles:
Using Fathom Analytics with Zaraz
Zaraz Consent Management
p.s. please notice my classy typo in the blog featured image ;)