Hey Bro, I have 3 quick questions! For this method, is it enough to just put the code you gave on footer or do we also need to install the GTAG and follow their instruction to copy paste their code and opening? (Asking because I see that your Webflow project code area is empty). 2. I tested without installing the GTAG code on and although it did work as intended in which my script only run after I interacted, but I 'm still seeing the addressed problems on CWV. (Is it because I didn't install question no.1?) 3. I tested the project with this method on my iPhone with Private mode on, and it can't work? I tested with setting a timeout to for script to run even if no interaction after 5s. It worked on non private tabs, but on private it just couldn't. Is this just me? Thank you so much!
Matias, it applies to frameworks that do use external scripts/code. If your code is bundled, chances are this won't work. I've made the video mainly for simple website hosting platforms like Webflow, WordPress, or any out there that allows to control the custom scripts you add on site. Does this answer your question, my man?
Would those page load anims help with conversions? You asked a great question, but I do disregard page load animations as I don't see it a valid point for boosting SEO or conversions. If you still wanna have page load anims, I recommend not lazy loading gsap (put it straight to the footer code). I also recommend avoiding page load animations as these increase the first input delay, FCP, and overall UX. Indeed, it looks sexy, but hey...we're not here to make sexy sites. We're here to turn sites into salesmen. Right?
Nope. The solution in this video lazy load GTM. This works also good with any cookie cookie you have. If you put your GA4, and other tracking scripts as a tag inside tag manager - these scripts will only fire up when someone interacts with the page. But, if you still need some tools to load in the head like VWO for split-testing - I would then add these scripts in the head, without lazy loading them through GTM. Let me know if this make sense.
I"m pretty sure you're wrong when saying that Webflow doesn't minimize the code since there is an option to turn on and off minimizing CSS and Javascript within Webflow
Thanks for the help! Is there a chance you just clarify this part on 05:04 where you take the script and then paste it in the minifier tool? How can we find the script using Chrome insights and which one should we use? I'm new to web vitals (non-developer) and haven't really done this js optimization before.. Everything from here is a bit puzzling.. This would help a ton!
for wp it's easier as you have full control over the server (unless you use a wp subscription). There are a few plugins that auto-minify and fix the critical CSS. One of my favs are WP rocket.
@@randolphnovino3750 yep, I'm using this lazy-load thing on all my client's sites. And gtag works perfectly. Some might argue with me saying you need gtag to immediately fire up, but you know what? I tend to disagree here. Especially after Google Consent V2 which now gives us even mixed and inaccurate data. I should have a video soon on how I integrate gtag, GTM, and GA all combined.
Yep, you can easily have adsense codes. And actually I'd highly recommend using this bc it will help you with the CLS. AS for the jquery, just make sure the code uses ES5 syntax. GTM does not allow ES6. They are plenty of converters online, but I usually just ask chatGPT to convert it for me. Let me know if this helps.
@@lumiousmedia thank you for your quick respond, have up to 3(ads) adsense codes in each page and they are placed manually at different section of the page, please how can this work with tag manager then?
@@lumiousmedia just so I'm understanding correctly, if I need GSAP to animate items in at the time of page load then it won't work but anywhere else is fine?
@@akilorosky yep. If you animate initially (especially text), you will have issues with accessibility. I made the plugin to work after the DOM is ready so browsers and crawl bots could the text. I will probably build a data attribute that makes animation play on page load, but for now - I highly recommend you animate items below the fold, or at least add a page loader wrapper. Let me know if this make sense.
