We’re working to implement Zaraz and we have the following issue: We have several zaraz.set(…) commands in the HTML of our page, but they get executed before Zaraz has loaded. As a result, these commands throw errors.
Essentially, we want to set some custom dimensions before the Pageview system event is triggered for Google Analytics. If we include zaraz.set(…) in the HTML code of the page, it executed before Zaraz is loaded. If we put it into a custom HTML block inside Zaraz, it doesn’t appear to have access to all the data on the page.
How can we delay the execution of zaraz.set(…) until Zaraz has loaded?
Hey @whencyclopedia, thanks for bringing this to our attention. We have fixed it and the things you track using zaraz.set() commands should now be available to use with the Pageview trigger as well. You can use zaraz.set() anytime, and it should be fine. Please let me know if you are still facing issues with this!
We needed to custom-code though, because some of the data we want to send to Zaraz is not available immediately after page load yet. So this is the solution we came up with:
We set up a custom pageview trigger and disabled the default pageview trigger. We then use zaraz.track() to send the custom trigger once our code has all the data. We do double-check that zaraz is already loaded, though, just in case:
Another update on this… Our code solution above actually does not work.
There is a short period of time between zaraz.track() being a valid function and when zaraz.track() actually executes something. In the code above, sometimes zaraz.track() gets executed, other times it does not. We’ve checked it using Zaraz debug, where we sometimes see the default PageView event being triggered (too early for our purposes) but the zaraz.track(“customPageview”) does not get executed.
Hey @whencyclopedia , can you show us an example page where you’re having the issue? We intentionally not adding a “Zaraz loaded” event because we these things to Just Work. so if they don’t, we rather fix it and not just provide workarounds.
The test page already sets the debug cookie, so you can see debug output straight away. On the live page, you’ll have to set it manually: document.cookie = 'debug=c7icqqh303fbvgsofasg';
The Zaraz code is found on lines 332-371 in the HTML and on lines 354-392 on the normal page. As you can see, we’re triggering zaraz.track('customPageview',zarazData) once both the page DOM and our core JS libraries are loaded (that’s our pageReady() event). Both pages are essentially the same, the difference is that the live page has a 500ms delay before triggering the Zaraz code.
Now if you refresh the test page a few times, you’ll see that the events triggered are not always the same, and in particular our customPageview event rarely gets triggered. On the live page, with the 500ms delay, all the events always get triggered.
We did try this in our live environment, as we’re running two GA properties in parallel to make sure everything is the same before switching to Zaraz. We did notice that without the 500ms delay, we were seeing about 40% of the pageviews missing.
I hope that helps. Feel free to ask for more information if needed.
Thanks for this info @whencyclopedia ! It seems like the script tags that are calling zaraz.track are part of the <head> and not of the <body>. Zaraz is inject at the end of the <head> tag, which means sometimes your script will run earlier. Can you try moving your script to the <body> of the HTML?