Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Define a standard height for ads #41

Open
ericholscher opened this issue Dec 11, 2020 · 3 comments
Open

Define a standard height for ads #41

ericholscher opened this issue Dec 11, 2020 · 3 comments
Labels
Accepted Accepted issue on our roadmap

Comments

@ericholscher
Copy link
Member

There are currently cases where ads can vary in height based on the content of the ads. We should likely just define the height of the ad as the maximum size it can be, given the longest text copy. If this enforce this with CSS, we should hopefully be able to provide a standard size that stops the page from jumping when the ad is loaded.

@ericholscher ericholscher added the Accepted Accepted issue on our roadmap label Dec 11, 2020
@mpchadwick
Copy link

If the height is specified on the <div> itself via CSS prior to any JS running that'll be the best way to ensure there's no layout shift, however in the case where the JS is blocked via an AdBlocker you potentially wind up with an empty space on the page. I addressed this by running JS after ethicalads should run (done via two scripts, and using defer instead of async) and checking if window.ethicalads is defined. If it's not I then just hide the ethicalads <div>. See: mpchadwick/mpchadwick.github.io@c0064bf

While as a publisher, I'd obviously prefer user's ad blockers aren't blocking ethicalads I still do want to give them a good experience.

@mpchadwick
Copy link

One other consideration is what if the user has JavaScript disabled entirely. I slightly updated my approach to initially only apply the min-height if JavaScript is enabled mpchadwick/mpchadwick.github.io@2df4077

@ericholscher
Copy link
Member Author

@davidfischer We got another request for this. We should look into a way to standardize this.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Accepted Accepted issue on our roadmap
Projects
None yet
Development

No branches or pull requests

2 participants