Amphtml: amp-story-consent: Accept button stuck

[AutadeJS]

While accepting amp-story-consent, the Accept button is getting stuck. User is not able to view the story at all.

Error in console in:
"AMP-CONSENT.accept is not whitelisted"
Here's a snapshot:

This problem occurs randomly. It's probably associated with either internet connection or because lot of animations are used in the AMP Stories.

[newmuis]

@gmajoulet do we dynamically add the action to the whitelist lazily? Can we hardcode it into the initial amp-story JS?

[gmajoulet]

The actions are added to the whitelist right when the consent element is appended in the DOM, so that should work...

Could you please send us the code you're using so we can help debugging? Thanks!

[AutadeJS]

Thank you for taking this up. Here's an example:
https://animalsake.com/interesting-facts-about-dolphins

The cookie consent is restricted to EU countries only.

[AutadeJS]

When the error occurs the visitor cannot move beyond the consent screen at all.

The error doesn't always occur. It seems related to Internet connection speed. It may also be related to our heavy use of animations and/or CSS gradients.

If you need to see more of our AMP Stories, please visit any of below sites. All links on these homepages are to AMP Stories.

https://quotabulary.com/
https://gardenerdy.com/
https://vacayholics.com/
https://animalsake.com/
https://hobbyzeal.com/
https://decordezine.com/
https://craftcue.com/
https://helpsavenature.com/
https://historyplex.com/
https://sciencestruck.com/
https://plentifun.com/
https://fashionhance.com/
https://hairglamourista.com/
https://tastessence.com/
https://penlighten.com/

Please let me know if you have any questions.

[AutadeJS]

Here's one more snapshot

[gmajoulet]

Thanks for the info, I'll investigate. Please let us know if you find a way to consistently reproduce it

[gmajoulet]

Are you still experiencing this bug?

[AutadeJS]

Yes the bug is still there

[gmajoulet]

I do reproduce a bug where the page is not responsive, but I can't reproduce the specific one you have.

For this URL: https://animalsake.com/raising-goats#amp-geo=FR
I sometimes get this broken page

Have you seen this one too?

[AutadeJS]

amp-geo doesn't work. It doesn't trigger the amp-consent component. We were aware of this. Are the 2 bugs related?

[AutadeJS]

Sometimes see broken page: Yes it does happen sometimes.

[AutadeJS]

As #amp-geo doesn't work on these AMP Stories, to make testing easier, here are 4 URLs that show amp-consent in non-EU countries as well:
https://animalsake.com/interesting-facts-about-dolphins
https://plentifun.com/outdoor-fall-activities
https://celebrationjoy.com/halloween-face-painting-for-kids
https://gardenerdy.com/autumn-blaze-maple-tree

You can see the "Accept" button doesn't work on them most times.

[gmajoulet]

That's cool, thanks for the links!

I'm confused by the #amp-geo not working on some pages, I'll try to have a look into this, but it's not related to the issue you're having!

I just filed two bugs I found by looking at your issue, and will fix them asap: #18841 and #18842

I still couldn't repro the very issue you originally filed though, I'll try again today (sorry I completely spammed your analytics though haha).

[AutadeJS]

Thanks for filing the bugs.
Analytics: Not an issue :)
You can understand how important it is for us to see this bug gets resolved. All our stories are stuck for visitors from EU!

[gmajoulet]

I still could not repro directly from your link, but I have a theory.
From your screenshot, the actions whitelist is empty, even though they're added at the same time the consent UI is built. So if the UI is visible, the actions were added.

The following could happen:

1. amp-story-consent gets built and adds its actions to the whitelist
2. amp-story gets built and clears the whitelist (link)
3. "AMP-CONSENT.accept is not whiteliste []"

If I add a setTimeout(..., 20) on the line where amp-story clears the whitelist I repro the bug.

[AutadeJS]

Looks like you nailed it

[gmajoulet]

This fix will probably be available in production starting from mid next week. Please let us know and feel free to reopen if you still see it happening after that!

[AutadeJS]

Great! Thank you so much

[AutadeJS]

It's not solve yet

[gmajoulet]

Could you please look into if the page that reproduced the issue has the amp-version="1810261559300" attribute on the HTML tag?
We expect this version (and only this one - it's the most recent one) to have the fix.

[AutadeJS]

amp version is set automatically to "1810270220450" and the bug is still there.

[gmajoulet]

Sorry, my comment was confusing. AMP automatically adds this attribute, it just tells you which version of the software (release) it is using.
The release containing the fix will be sent to production later this week, and the bug should go away.

[AutadeJS]

Thank you so much

[AutadeJS]

The issue is solved. Thank you.