In the web development ecosystem, Cloudflare users have found an invaluable partner in Zaraz when it comes to turbocharging the loading of their third-party JavaScript tools. Whether you're dealing with analytics, conversion pixels, widgets, or similar tools, Zaraz offers an accelerated and secure loading experience.
Zaraz is similar to GTM (Google Tag Manager), but offloads processing to the edge/cloud using Workers. If you're interested, check out our article on the differences between Cloudflare Zaraz and Google Tag Manager (GTM).
Imagine setting up your tool on Zaraz, where you're given the freedom to detail the payload to be included while dispatching data to the tool. This empowers you to send across intricate data. Let's say you're recording the "Button Clicked" event on Google Analytics; Zaraz permits you to attach additional data like the unique ID of the button pressed and the content of the user_id cookie active at that moment. Not to mention, you can configure the action with as many fields as you want, thanks to Zaraz's flexible approach.
Under normal circumstances, Zaraz gets the information through the execution of zaraz.track("event name", { properties }) in the website's code. The properties object can be a treasure trove of details sent to third-party tools, much like the button ID in our previous instance. But there could be times when you want to massage the data before forwarding it to your third-party tools.
Responding to this need, Zaraz recently rolled out Worker Variables, enabling users to dispatch data to a Cloudflare Worker, perform data manipulations, and return an altered value. This opens up a universe of opportunities and flexibility. For instance, you can interact with your backend server to pull data and leverage JavaScript to execute necessary calculations. It's like having a fully-fledged Worker at your fingertips.
Having said all of that, Cloudflare have implemented an easier solution for small data changes where you might find adding a Cloudflare Worker to the mix a little overkill. Introducing Zaraz's integration of JSONata.
So, what's JSONata? JSONata brands itself as a JSON query and transformation language. If you're a developer acquainted with jq - the command-line JSON processor, JSONata brings similar functionalities but with a syntax that's more intuitive and easy to comprehend. The cherry on the top is that JSONata, being a JavaScript library, integrated seamlessly into Cloudflare Zaraz.
To give you a taste of JSONata's power, consider the following JSON document (taken straight from Cloudflare's docs):
{
"name": "Jane Smith",
"address": {
"street": "123 High St",
"city": "London"
},
"pets": [
{ "type": "hamster", "name": "Rex" },
{ "type": "parrot", "name": "Milo" },
{ "type": "parrot", "name": "Alfie" }
]
}
With JSONata, you can perform intriguing queries on this document:
$count(pets) // 3
address.city // London
pets[type="parrot"].name // ["Alfie", "Milo"]
The JSONata documentation provides an ocean of examples, and there's also a sandbox where you can experiment with your JSONata queries live.
As you embrace Zaraz and JSONata in your web development journey, you're setting the stage for an impressive performance from your JavaScript tools.
Interested in proving your knowledge of this topic? Take the JavaScript Fundamentals certification.
JavaScript Fundamentals
Showcase your knowledge of JavaScript in this exam, featuring questions on the language, syntax and features.
$99
