I am getting errors in the Google lighthouse regarding cookies... how can I fix them?

[Elindo586]

In one page I am for example sharing a google map ... and in other pages I am sharing YouTube videos... I am getting erros in both pages, but how can I share the videos and map without getting a cookie error?

I was also using a Google ad script, but that one was always giving errors anyway, and I think I might just delete it.

Here is an example of the video pages getting cookie errors.

The full code is here:
https://github.com/Elindo586/nextprojectb/blob/main/pages/blog/castellano/motores-hidraulicos-de-paletas.js

Here is the component code:
https://github.com/Elindo586/nextprojectb/blob/main/components/blog-post-spanish.js

I think... it has to do with the iframe? But how can I use it without getting errors?

<iframe
              width="560"
              height="315"
              src={`${props.body}`}
              title={`${props.iTitle}`}
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            ></iframe>{" "}

To fill the information in the iframe I am importing a json document... for this specific page the object looks like this below... the src for the iframe would be the body key value pair from the json object.

 {
    "id": "68",
    "metaTitle": "TU | Motores Hidráulicos de Paletas.",
    "metaDescription": "Catálgo para la selección correcta de motores hidráulicos de paletas.",
    "metaKeywords": "tu, motores, paletas",
    "ogTitle": "Motores Hidráulicos de Paletas.",
    "ogDescription": "Catálgo para la selección correcta de motores hidráulicos de paletas.",
    "ogURL": "https://www.tu.biz/blog/castellano/motores-hidraulicos-de-paletas",
    "ogImage": "https://www.tu.biz//blog-images-spanish/motores-hidraulicos-de-paletas.png",
    "twitterTitle": "Motores Hidráulicos de Paletas.",
    "twitterDescription": "Catálgo para la selección correcta de motores hidráulicos de paletas.",
    "twitterImage": "https://www.tu.biz/blog-images-spanish/motores-hidraulicos-de-paletas.png",
    "title": "Motores Hidráulicos de Paletas.",
    "body": "https://www.youtube.com/embed/NXUvvjyh6JY",
    "iTitle": "Motores Hidráulicos de Paletas.",
    "picture": "/blog-images-spanish/motores-hidraulicos-de-paletas.png",
    "alt": "Motores Hidráulicos de Paletas.",
    "description": "Catálgo para la selección correcta de motores hidráulicos de paletas. Ver <a href = 'https://www.tu.biz/pdf/hydraulic-vane-motor-catalog.pdf' > catálogo de motores de paletas </a>. </br> </br> <p> Los motores hidráulicos de paletas son una parte fundamental de muchos sistemas hidráulicos, proporcionando energía mecánica a través de un proceso eficiente y versátil. En este artículo, exploraremos en profundidad el funcionamiento de los motores hidráulicos de paletas y sus diversas aplicaciones en la industria.</p> </br? </br> ",
    "verMas": "ver más de este blog",
    "link": "/blog/castellano/motores-hidraulicos-de-paletas",
    "next": "/blog/castellano/circuito-hidraulico-para-ahorrar-caballos-de-fuerza",
    "previous": "/blog/castellano/"
  },

[Elindo586]

Any feedback would be awesome.

This has me a bit concern because seems like I won't be able to share videos and/or the Google Map iframes any longer.

[adamraine]

Please see the linked documentation on the 3P cookie phaseout: https://developers.google.com/privacy-sandbox/3pcd

[Elindo586]

So..

Apparently Youtube has a new src address for imbedding videos without cookies. I need to get the new source code and change it, and take takes care of YouTube.

I did read the link above.. doesn't tell me how to fix it the cookie error for the cases I have presented.

I still need to figure out how to fix the other cookie error for the google maps, and likely I am just going to delete the Google Ad code.

[Elindo586]

Google maps cookie errors?

If you want to keep using the Google maps (unless go to a different source), you will need to use the Google Maps API instead of the iframe from the the Google Maps website. The API doesn't use cookies as the website iframe does, and that will solve the error..

Now I got the cookie problems solved for the maps and YouTube.

I still have one more cookie problem showing up, but I haven't detected the source of it, and I will post about it later on..

Took me a while figuring out "how" to solve each cookie problem from the lighthouse... the solutions for each case were different and I had to go ask on other google forums to get a feedback, and/or do some Google searches..

The Google Lighthouse doesn't tell you "use the google maps API" or "use the nocookie imbedded link src showing in the YouTube options now"... really gotta dig deeper to find a solution.