Embed code in the header – GeneratePress

This topic has 48 replies, 3 voices, and was last updated 1 year, 5 months ago by Christiano.

Viewing 15 posts - 1 through 15 (of 49 total)

1 2 3 4 →

Author

Posts
October 12, 2022 at 3:04 am #2370798

Christiano

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! 🤗

October 12, 2022 at 6:09 am #2370947
David
Staff
Customer Support
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
October 13, 2022 at 12:58 am #2371968

Christiano

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! 😅

October 13, 2022 at 1:01 am #2371972

Fernando
Customer Support

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/

October 13, 2022 at 1:16 am #2371987

Christiano

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! 🤗

October 13, 2022 at 1:35 am #2372005

Fernando
Customer Support

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.

October 13, 2022 at 3:03 am #2372094

Christiano

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! 🤗

October 13, 2022 at 5:29 am #2372212

David
Staff
Customer Support

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/

October 14, 2022 at 12:07 am #2373047

Christiano

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! 🤗

October 14, 2022 at 3:55 am #2373249

David
Staff
Customer Support

Correct 🙂

October 14, 2022 at 7:23 am #2373420

Christiano

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! 🤗

October 14, 2022 at 8:02 am #2373614

David
Staff
Customer Support

I see two googletagmanager scripts in the head of your site:

The second one is the one being injected by your script. Where did the first one come from ?

October 17, 2022 at 4:14 am #2376088

Christiano

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!!! 🙏🏼🤗

October 17, 2022 at 4:21 am #2376097

David
Staff
Customer Support

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 ?

October 17, 2022 at 7:54 am #2376456

Christiano

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! 🙏🏼
Author

Posts

Viewing 15 posts - 1 through 15 (of 49 total)

1 2 3 4 →

You must be logged in to reply to this topic.

[Resolved] Embed code in the header

Popular Articles

Start building better websites today.