Hey guys, new to Zaraz (but not
Hey guys, new to Zaraz (but not Cloudflare). Can anyone help telling me how or where I would tell Zaraz where to show the Custom HTML?
9 Replies
The custom HTML is typically used for things like tracking scripts that don't have a managed component built. You can think of it like how GTM inserts scripts in the client because rather than the Zaraz native approach of managed components that work serverside (internally within zaraz's sysyem) the custom HTML is delivered to the client.
So if the custom HTML tool is enabled, not blocked by a blocking trigger, and a firing trigger is configured the HTML will be injected into the page. If you want custom contol over when it is injected you should use a custom event as the tool's firing trigger and call that custom event in your client side application's javascript.
Hey, thanks for the response! Yeah, it's not blocked and i initially had it where it was triggering on pageview, but it was injected at the bottom of the body.
I'm looking for how i can tell zaraz where in the body to inject the code. I thought using a CSS selector would work, but it didn't in my implementation.
links and scripts are appended to HEAD
html go to document.body.appendChild()
https://github.com/managed-components/custom-html/blob/main/src/index.ts
GitHub
custom-html/src/index.ts at main · managed-components/custom-html
Contribute to managed-components/custom-html development by creating an account on GitHub.
scripts without src are executed
There's no option to tell where to insert the html
So you tried using a CSS selector to select an element to inject something into? Zaraz doesn't have a way to select where inject things (that's probably out of scope) but I would think that if you created a script that added something to a selected element it would be able to do it since at the end of the day you're just loading javascript. (haven't tried to do this personally)
Can you share more details about what you're looking to do and what you've tried?
A super brief overview: I use Elementor on top of Wordpress. Wordpress by default I can inject custom HTML blocks, but I was using Elementor’s CSS ID field to try to place Zaraz
I believe I also tried a CSS class name inside a div like
<div class=“zarazCSS”></div>
I’ll double check and try that again though. I am still learning so I might have chose the wrong trigger element in the CF portal
I haven’t visited your link, but are you saying <iframe> is loaded in the <head> with a Zaraz implementation? If so, are you sure??
Ah. So there are triggers for when to execute, but currently it’s just dumping whatever wherever it’ll fit?
Basically guys I’m just trying to lazy load a Spotify iframe embed. it’s drastically reducing my contentful paint time.
Removing the iframe is a noticeable page load speed improvement, and I currently have a button and JS to load the iframe onClickZaraz's purpose primarily is a better (imo) alternative to Google Tag Manager. These services are primarily for adding tracking and analytics scripts like pixels, google analytics, etc. These scripts are typically added to the head or body, hence why that's what zaraz does.
You could probably hack a pseudo lazy loading implementation using zaraz, but an HTML native approach would be much better. Here's some reading material on the subject:
You should be able to just add the
loading="lazy" attribute to your iframe to lazy load it without any further configuration: https://web.dev/articles/iframe-lazy-loading
Adding the lazy attribute to iframes is built into WordPress if the iframe has a width and height attribute: https://make.wordpress.org/core/2021/02/19/lazy-loading-iframes-in-5-7/
On the WP sites I administer, I use a performance plugin called perfmatters. It has great support for lazy loading iframes that aren't set to do so explicitly: https://perfmatters.io/docs/lazy-load-wordpress/I swear I’ve tried every basic lazyload attributes, plugins, and I still see the iframe using resources in code coverage 🤷🏾♂️
But ok cool so my next target will probably be the Facebook pixel. Thanks for the detailed responses @Mackenly Jones
scripts and link are appended to HEAD, IFRAME is html and are appended to BODY