Archived topic
Embed code in the header
48 replies · Started by Christiano on October 12, 2022
I am staging my site with GeneratePress in order to gain speed. My objective is to "score green" on Google's PageSpeed without the need of WP Rocket plugin or similar.
I run a test on my "about us" page and the results was not as expected. Curiously the main problem seems to be caused by Google itself (see attached Lighthouse Treemap).
I found a solution, delaying the loading of Google Analytics / Google Tag Manager.
I would like to add that code to my header or anywhere is better. How can I do?
Thanks in advance for your invaluable help! 🤗
Hi there,
so the code in that article would need to be loaded in your websites footer.
To do that:
1. In Appearance > Elements, Add New -> Hook element.
2. In the Text Area - add the code provided inside script tags eg.
<script>
Add the code here
</script>2.1 Note in the code provided that this line requires you to update it with your GTM ID:
cript.src = 'https://www.googletagmanager.com/gtm.js?id=YOUR-GTM-ID-HERE';
3. Set the Hook to wp_footer
4. Set the Display Rules to Entire Site
Hi David, I just realized that I never configured tag manager...
My understanding is that it's part of the same Analytics code and, in order to be able to delay all the relativa code loading, I need to activate it.
Do I have undestand well?
I need to install two pieces of code provided by Google one the header and the other in body. If I understand well your procedure I need to create other 2 hook elements one would be set to wp_head and the other in wp_body_open.
Is it right?
THANKS! 😅
Hi Christiano,
Yes, that's correct.
Here's an article you may refer to as well for this: https://docs.generatepress.com/article/implement-google-tag-manager/
Thanks Fernando!
I implemented the three pieces of code but the performance of the page dropped from 77 to 69... 😬
Maybe do I have to choose different priorities?
My choice is:
0 - lazy load
1 - google header
2 - google upper body
THANKS! 🤗
Yes, it's well known that Google Tag Manager/Analytics is very heavy on a site’s performance. I don't think changing the priority will help.
Another thing you can you try using a CDN. This should help in serving your site’s resources. One commonly recommended is Cloudflare.
Sure but if the "lazy load" script would correctly work why I am slower now?
If the result is this perhaps it's better to remove the GTM code and leave all as it was before (Analytics will work anyway).
Do I have some other possibilities before surrendering?
THANKS! 🤗
The script for lazy loading is added instead of the code that you add to the <head> of your site, as that script is injecting that same code.
You will still need to hook in the second GTM Code to the wp_body_open hook as explained here:
https://docs.generatepress.com/article/implement-google-tag-manager/
Oh... 😅
So, if I understand well, I need only two scripts not three. Is it correct?
I need to purge one script to have:
0 – lazy load (in the footer eliminating "google header")
1 – google upper body
Is it correct? 😅
THANKS! 🤗
Correct :)
Hi David, I applied the solution and the page scores as before... 🤷🏼♂️
Perhaps (If I remember well 😅) the total byte of the page is decreased from "900KiB something" to 747KiB but this without an increase of the score.
What is strange also is that the pages scores poorly on the "First Contentful Paint" metrics and there are almost no images...
How can I be sure that my hooks properly works? 😅
THANKS! 🤗
I see two googletagmanager scripts in the head of your site:
https://www.screencast.com/t/kwZp8aW2imrv
The second one is the one being injected by your script. Where did the first one come from ?
Oh my... perhaps it's related to the old version of my site? I had Divi before and I switched to GeneratePress in order to gain speed. I did not started with a fresh WP installation, I simply installed GP over DIVI.
Please David, let me know how I could fix that!
THANKS!!! 🙏🏼🤗
You would need to track down how that code was added to your site.
Its not something we can tell.
The only thing i noted was that first script has this attribute: id="google_gtagjs"
I had a search for that ID and it looks like RankMath uses it:
https://rankmath.com/kb/analytics-issues/#ga4-no-data-received
So perhaps you have Rankmath adding that code ?
Nice found David! 👏🏼👏🏼👏🏼
I was already planning to purge RankMath and come back to Yoast so I've done it! ☺️
Could you please verify that all is fixed now?
THANKS! 🙏🏼
