We've all heard of Cloudflare; they're the company that offer a great free CDN, proxy, WAF, lots of security features and optimisations such as RocketLoader and minification. Over recent years Cloudflare have increased their product offering by including products around ZeroTrust networking, email and various other enterprise infrastructure. Back in 2021 Cloudflare purchased Zaraz, and has integrated it into its services to offer it for free.
What is Cloudflare Zaraz?
Zaraz is a third-party scripts loader/container. The most common of these tools is Google Tag Manager (GTM). In essence, it allows site owners to add third party scripts to a website without needing to use a developer every time. More than that though, these tools offer a suite of tools such as triggers, tags and variables to make passing data around easier.
GTM vs Zaraz
OK, so why bother? GTM has been around for years, and is used by a gigantic number of websites, so why is Zaraz so important?
Speed
In one word: speed. GTM itself is bloated and slow. Google have said that Pagespeed is one of the most key ranking factors in relation to both SEO and quality scores for AdWords/PPC, so it's something we need to respect. The amount of times that a website is created and achieves a Pagespeed score of 100/100, then GTM is added and it's dragged down to sub 50/100 is all too common, and something that Zaraz is here to address.
How is Zaraz faster? Let's start by understanding what GTM does. When a script is added to GTM, let's say Google Analytics (GA), GTM simply injects that script on every page load. Now imagine you have 5 third parties being loaded, such as HubSpot, Bing, Google Ads, TikTok and Facebook pixels - that's quite an overhead on each page load, especially when you consider that some third parties like HubSpot inject their own scripts. Using GTM in this case is very similar to just including all of these scripts on the page itself, except the added hop of GTM itself slows things down further.
Zaraz on the other hand works differently. Zaraz utilises Cloudflare's edge network to run scripts in Cloudflare Workers. On page load Zaraz is loaded in the browser, it then spawns a number of Cloudflare Workers which do all of the heavy lifting away from the visitors browser. Various bits of information that are required for Zaraz to work are piped from the browser to Zaraz and off to the CF edge network for processing. This keeps the visitors experience extremely lean and fast.
This leads to a barely degraded speed experience for users, even with 10+ third parties being loaded. This in turn leads to very high Pagespeed scores and Core Web Vitals being way more likely to be passed.
Features
Zaraz is a relatively new product. It does what it does well, but it is not as established as GTM. Because of this the number of features available in Zaraz are much lower when compared to GTM.
However, in our experience, most users of GTM utilise a very small percentage of the features available to them.
Zaraz supports the main features of GTM, namely:
- Triggers
- Actions
- Variables
Ease of use
GTM is not a simple tool. It does a lot and the interface can be quite daunting for new users.
Zaraz does a lot less, but because of that the interface is much simpler. A wizard tool walks you through set up, and it clearly displays what tools are being loaded when.
Simply add a tool, select when it should be triggered, and link it to consent.
Consent management
A feature that has been added to GTM recently is consent management. Consent management allows you to mark each script has having a purpose, such as being used for Analytics, Marketing, Customer Service, etc. These consent flags can then be linked to a consent management tool (a cookie pop-up) that allow users to select what they are happy for you to load.
This should, in theory, be straightforward. Unfortunately, although GTM ships with the management tools within GTM itself it doesn't offer a consent management tool for websites themselves - in other words, you need to implement your own cookie pop-up with the ability to select individual consent for each category. There are off-the-shelf solutions available, but most of them come with a cost, and nearly all of them load third party scripts of their own, which slow things down even further. You can build your own, which appears fairly straightforward at first, but there are a number of undocumented caveats with it, for example, if you follow GTM's instructions for implementing your own consent pop-up when someone approves consent it won't fire any scripts until the next page load. This leads to a lot of lost data and on a SPA could lead to huge data loss.
Zaraz offers very similar consent management tools, where you categorise all scripts and then load them appropriately. However, Zaraz also offer a consent management pop-up. Because Cloudflare is loaded onto the site already, Zaraz can offer their cookie pop-up without any code changes required on the page. The consent pop-up can be customised with text and styled using CSS. In our testing though, the UX of the pop-up is lacking somewhat - for example, clicking 'Accept All' checks all checkboxes, but requires a further click to confirm. This leads to a lower click through rate to the site itself. It also doesn't use long-life cookies, it simply sets it as part of the current session, so your visitors will need to re-accept on every page visit.
We actually addressed these issues directly with Cloudflare and got a response from one of their engineers. They're aware of the UX problems and the lack of flexibility on the pop-up. There is a new API being released soon, which will give way more control over all of this.
Documentation and support
Cloudflare have documentation for Zaraz and Google have it for GTM. Neither documentation is as thorough as we'd like though.
GTM has been around for a very long time, and because of its popularity you'll probably find someone else having a similar issue online. There are tons of videos and tutorials online on blogs and on YouTube, so if you're unsure on how to do something you'll likely be able to self-serve a solution. Beyond that though, you're on your own.
Zaraz is a new product. They have their docs, but they're quite lean. There isn't a huge amount of information online, there aren't lots of tutorials, and there aren't many YouTube guides. The only saving grace here is that Cloudflare do have support channels; their forum is very active, you can chat to support directly, and there is a Discord channel specifically for Zaraz, where the product managers and engineers for the product hang out so you can chat to them directly.
Summary
The key takeaways from all of this is that Zaraz is a new product which, at time of writing, is still in Beta. It's going to change, probably for the better, but the parts of the puzzle that it does now are done very well. When considering Zaraz you should weigh up the pros and cons of both options; Zaraz adds a massive boost to speed and core web vitals, at the expense of flexibility.
GTM has the reliability of Google products, with the community of tutorials and guides behind it. It's a more difficult product to use, and it doesn't have the speed benefits of Zaraz, but it's still a well established and heavily utilised product.
Related articles
Tutorials PHP Database Design Tooling
When and how to squash migrations
Learn about squashing migrations in Laravel, a pivotal technique for optimizing your application's efficiency and maintainability. This guide covers the why behind migration squashing and provides a tutorial on implementing it.
