Deferred loading of AMP advertising with AMP-GEO check is impacting CWV score

aeroplanejane commented 3 years ago

Description

We currently display ads to users on WS pages outside of the UK only. e.g. https://www.bbc.com/afrique We use amp-geo to determine the location of the use, before we display advertising.

On AMP pages for WS we have to wait for the amp-geo script to load in which removes the amp-geo-loading class, which in turn stops hiding the ad component
We can’t make the amp-geo script blocking as it doesn’t determine geolocation itself, but calls another script.
Unless we have a different way to determine whether we can show ads on amp, I don’t think we can improve the CLS for pages served from amp cache
Our current option to improve this score is to reserve white space across any service that has been enabled for ads both within the UK and outside the UK on AMP

Write up of investigation is here https://github.com/bbc/simorgh/issues/9161 Issue to reserve whitespace for WS languages is here: https://github.com/bbc/simorgh/issues/9204

Reproduction Steps

Go to https://www.bbc.com/afrique using a VPN outside the UK Accept consent Note ads load Notice impact to CLS and LCP scores

Relevant Logs

No response

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

No response

erwinmombay commented 3 years ago

cc @ampproject/wg-monetization for visibility

erwinmombay commented 3 years ago

met with the ads team briefly to discuss this. had a few questions @aeroplanejane, are y'all generally OK with doing the reserve spacing? ~~and 2nd, while tracing we saw the ad render twice and it collapsing briefly while rendering the 2nd time (we're looking into this)~~ . This doesn't seem to be the desired behavior so we're looking if this is a bug on our end or if this triggered by something on the page explicitly.

edit: stand corrected on the 2nd point, i think it was an artifact of how i tested it. not able to repro locally or remotely anymore

aeroplanejane commented 3 years ago

@erwinmombay we're looking at reserved spacing as temporary solution. About 1.4% of our total amp traffic to WS is in the UK (1.5m visits in the last 30 days) An empty space where we could be showing our content is not ideal We do also want to look at a solution for our News and Sport AMP pages e.g. https://www.bbc.com/sport/football/56671015.amp The volume of traffic is significant and UK account for 65% of all traffic so we won't use the placeholder workaround for these pages.

jridgewell commented 3 years ago

Hi @aeroplanejane, thanks for the report!

On the BBC's Origin, amp-geo can be SSR'd to allow perfect CLS: https://amp.dev/documentation/components/amp-geo/#pre-rendering

By inserting a amp-iso-country-${CC} class name into the <body> element, BBC could use a bit of CSS to ensure the ads are hidden for UK users and visible for everyone else. This should still be paired with @erwinmombay's suggestion of reserving the ad size, so that non-UK users won't suffer a shift. Additionally, ads that are hidden in this way will stop the network request for the ad (amp-ad will still download, but it won't request an ad for hidden elements), so this should acceptable for user privacy.

.amp-iso-country-uk amp-ad {
  display: none;
}

amp-geo will scan for this class name when it loads, and if it's found will trust that you have correctly geolocated the user, and reuse the same country code. Additionally, you can insert amp-geo-group-${GROUP} class names to add groups according to your ISOCountryGroups.

I'm investigating a way for us to perform the same when serving from AMP Cache, but it looks like it's possible for us to do without sacrificing too much.

aeroplanejane commented 3 years ago

Great @jridgewell Thanks for this! I think the majority of our pages (roughly 83% over the last 30 days) are being served from google's cache, so let us know if the fix above may be possible... We can implement from bbc origin, but will wait to see if there's anything else you might think of. In the interim we're going to reserve space for WS amp pages.

erwinmombay commented 2 years ago

@aeroplanejane , just an update we've made good progress in the server side experiment last week. we'll be shooting to start the experiment this august

erwinmombay commented 2 years ago

@aeroplanejane we've been running the experiment of server side rendering the amp-geo classes on the Google AMP Cache for the past few weeks now. We'll decide shortly if its safe enough to fully deploy on the AMP cache side, then we'll proceed with allowing Server side rendering on origin pages by unflagging our experiment flags.

erwinmombay commented 2 years ago

following up on this @aeroplanejane if y'all apply the recommendation @jridgewell previously suggested (see below) we should be seeing an improvement on CLS scores for both origin and pages that go through our experiment on the cache

On the BBC's Origin, amp-geo can be SSR'd to allow perfect CLS: https://amp.dev/documentation/components/amp-geo/#pre-rendering

By inserting a amp-iso-country-${CC} class name into the <body> element, BBC could use a bit of CSS to ensure the ads are hidden for UK users and visible for everyone else. This should still be paired with @erwinmombay's suggestion of reserving the ad size, so that non-UK users won't suffer a shift. Additionally, ads that are hidden in this way will stop the network request for the ad (amp-ad will still download, but it won't request an ad for hidden elements), so this should acceptable for user privacy.
.amp-iso-country-uk amp-ad {
  display: none;
}
amp-geo will scan for this class name when it loads, and if it's found will trust that you have correctly geolocated the user, and reuse the same country code. Additionally, you can insert amp-geo-group-${GROUP} class names to add groups according to your ISOCountryGroups.

I'm investigating a way for us to perform the same when serving from AMP Cache, but it looks like it's possible for us to do without sacrificing too much.

stale[bot] commented 1 year ago

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 7 days if no further activity occurs. Thank you for your contributions.

ampproject / amphtml