ampproject / amphtml

The AMP web component framework.
https://amp.dev
Apache License 2.0
14.89k stars 3.88k forks source link

amp-ad: show fallback when ad blocker present #34291

Open adamsilverstein opened 3 years ago

adamsilverstein commented 3 years ago

Show fallback when ad load blocked

When a user visits a page containing amp-ad elements with an ad blocker enabled, the page should instead show the amp-ad fallback component.

Additional context

Currently the fallback appears to only work when the ad request fails to retrieve an ad unit for some reason, for exampled no ad is available from the ad manager to fill the request. Instead, the fallback should show when the ad request itself is blocked as is the case when the user is running an ad blocker.

I found some previous work by @sebastianbenz on adblockers in https://github.com/ampproject/amphtml/issues/8311. Reading the amp-ad component documentation, it is unclear whether the current fallback is supposed to work with ad blockers already. In our testing/experience it does not.

mangesh commented 2 years ago

To fix this issue, we are thing about adding adblocker detection in amp-ad component. If the adblocker is detected we will simply show the fallback content. Should we go with this approach?

adamsilverstein commented 2 years ago

@mangesh I'm not sure this will work since ad blockers will probably block amp-ad (and it's script load) entirely (ref: https://github.com/ampproject/amphtml/issues/8311#issuecomment-530355373). Any other ideas where we might accomplish the detection?

AnuragVasanwala commented 2 years ago

I am working on Ad-Blocker detection. Unfortunately, amp-ad component script is blocked by AdBlockers so we cannot show fallback. AdBlockers by-default, blocks any script having word ad as script filename. Thus, we cannot resolve this issue for amp-ad component without modifying it's name.

To overcome this issue, I am working on an 🧪experimental non-certified Bento Component for AdBlocker detection which can be used into AMP Environment as well as isolated Bento component.

Will provide an update shortly ⏱

AnuragVasanwala commented 2 years ago

@adamsilverstein

For the Bento amp-adblock-detector component, I am thinking of having it as a parent tag for amp-ad just like we have amp-sticky-ad as a parent tag for sticky ad, so that if adblocker is detected, we can reused whatever is set inside amp-ad's fallback content.

<amp-adblock-detector>
  <amp-ad
    width="120"
    height="600"
    type="doubleclick"
    data-slot="/21730346048/test-skyscraper">
    <div fallback>This is a fallback</div>
  </amp-ad>
</amp-adblock-detector>

If adblocker is not detected it will do nothing and show the ad itself.

What do you think?

adamsilverstein commented 2 years ago

Using as a parent makes sense. I think the fallback is a bit different, that is for when the request fails entirely. If possible we should separate out the fallback for blocked ads, perhaps as part of the amp-adblock-detector component.

raja-anbazhagan commented 2 years ago

Wow, Much awaited feature. I practically had no way to fight AdBlock other than creating weird amp-script workarounds.

raja-anbazhagan commented 2 years ago

Just one thought though. Most adblockers block amp-ad. So what makes the same won't happen for amp-adblock-detector?

AnuragVasanwala commented 2 years ago

Hi @raja-anbazhagan

Just one thought though. Most adblockers block amp-ad. So what makes the same won't happen for amp-adblock-detector?

Usually, AdBlocker relies on the publicly available block-list rules like: EasyList. This list defines a set of rules to detect URL resource that can be: a possible Ad. If a URL resources falls in at least one of these rule, it will be blocked by AdBlocker.

Based on the EasyList Rules, multiple rules are defined for amp-ad. So whenever browser tries to load amp-ad script, it will be blocked!

In context of our Bento AdBlock Detector, our script (or say resource URL) will always ends with amp-adblock-detector-X.X.js or bento-adblock-detector-X.X.js which is not satisfying any of the rules as of now (January 5th, 2022).

We may hope that this component won't be part of any of the public block-list rule set because it does not have to do anything with Ad except just to show fallback when AdBlocker is present.

raja-anbazhagan commented 2 years ago

We may hope that this component won't be part of any of the public block-list ruleset because it does not have to do anything with Ad except just to show fallback when AdBlocker is present.

Hope the Adblockers play fair in this case.

nixcraft commented 2 years ago

@AnuragVasanwala When do you think your patch or extension will become an official part of AMP? For example, I just checked https://cdn.ampproject.org/v0/amp-adblock-detector-1.0.js, and it is returning HTTP/404.

AnuragVasanwala commented 2 years ago

@AnuragVasanwala When do you think your patch or extension will become an official part of AMP? For example, I just checked https://cdn.ampproject.org/v0/amp-adblock-detector-1.0.js, and it is returning HTTP/404.

Hi @nixcraft,

✨ Bento amp-adblock-detector #37255 was presented in Design Review Meeting https://github.com/ampproject/amphtml/issues/37262 and as per the discussion, final conclusion was:

In short, this component is never going to be official part of AMP.

Fortunately, in Design Review Meeting there was a discussion of finding an alternative way of modifying AMP Core to show amp-ad -> fallback when script has error or is blocked. It is not exactly as this component but it will serve the purpose.

I am planning to start working on this alternative feature, soon.

nixcraft commented 2 years ago

Hi @AnuragVasanwala,

I appreciate the quick reply. I understand what you are saying. AMP is fantastic tech, but such limitations make me go crazy. Anyway, all we want is to display a custom message. That is all. I hope alternative features get introduced and accepted officially.

mark-leppa commented 1 year ago

Sounds promising @AnuragVasanwala,

I am planning to start working on this alternative feature, soon.

Please provide any updates if available.