1

I googled this, and the suggestions that came back were JS solutions. Preferring a simpler life, I've gone with this:

.advert-holder {
    width: 728px;
    height: 90px;
}

.adblock-message {
    position: absolute;
    padding: 1.5em 1em;
    text-align: center;
    animation: fadeinwithdelay 2000ms
}

@keyframes fadeinwithdelay {
    0%   { opacity: 0 }
    80%  { opacity: 0 }
    100% { opacity: 1 }
}

And then

<div class="advert-holder">
    <span class="adblock-message">It looks like you're using an advert blocker, yada yada</span>
    ## google advert code here ##
</div>

The google advert overlays the text once it's loaded, and the text doesn't show for the first 1600ms, so there's not a flash of it before the google advert has loaded.

I like the simplicity (no JS), and it seems to work fine for me. Are there edge cases I might not have considered though? Any other cons of this approach?

Improve this question
1
  • Sometimes Google may not have an ad to display on the slot. In such cases, this message will be shown to genuine users.
    – Raja Anbazhagan
    Jun 24, 2021 at 10:30

0

Reset to default

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.