Lesson Overview + Resources:

In this lesson, we’ll walk through several examples of ads on a page and see how shifting placements can improve the overall experience.

Here are additional resources pertaining to the lesson above:

Read the Transcript:

Now let’s practice with some examples of ads on a page and see how we can improve the experience.

Before we jump into ad unit placement, the most important recommendation we can give you is to make sure you are taking advantage of sticky units. If you aren’t, then start.


Now let’s look at how to place in-content units.

Let’s start with a very common ad unit placement: the “top of page leaderboard”

Here’s an example of a game page with a desktop leaderboard directly under the menu. Looking at the layout of this page, we see there is ample space under the “Recommended for you” section but above the main game play area to move the leaderboard down. This will help to ensure it doesn’t get scrolled out of view immediately.

A similar option is often available on content-heavy sites or article pages to take a leaderboard, often shown at the very top of the page, and move it below the article title for better placement.

Listing pages can often benefit from the same thing, taking a leaderboard placed at the very top of the page and moving it below a listing or two.

You can follow a similar pattern on mobile devices, looking for opportunities to take a static in-content ad and move it lower on the page while keeping it above the fold. One thing to keep in mind is that your new placement for an ad might be different on desktop vs. mobile (and that’s ok!).

For any above-the-fold ads, you can consider refreshing only when in view, but lazy loading is likely unnecessary.


Next, let’s take a look at a below the fold in-content ad.

Here’s an example listing page where there is a leaderboard almost all the way at the bottom of the page. We’ll want to move this unit higher up on the page. Typically your best bet will be to move it as high up as you can, but really what you’re looking for is the placement where users will be most likely to see it.  

This is where understanding your scroll behavior and user interaction down the page is important. Try to place the unit in a place with high scroll density or near a highly used or viewed element on your page.

Similarly on mobile, you might take this medium rectangle that is far below the fold and move it up the page to a more prominent placement.

As for settings, you can experiment with refreshing only when in view and lazy loading the unit.

You might also consider swapping out any hard-coded in-content units with in-article units. Say you have a leaderboard at the bottom of an article. It might make sense to swap it out with in-article units injected every 2-4 paragraphs down the page instead. 

This makes it easier for you to apply an ad layout to many different content pages of varying lengths without sacrificing viewability. These units, again, are candidates for testing lazy loading and refreshing only when in view.

If you’re using in-article units, or shifting to them based on the last recommendation, you’ll want to remember to use a scrollable container for best results, particularly if you want to serve multiple ad sizes.


Now let’s shift gears to your sidebar if you have one!

  1. You’re going to have one of two cases here: you’ll either have your sidebar completely reserved for ads or you’ll have a mix of site content and ads in your sidebar.

  2. For the case that you have a sidebar dedicated entirely to ads, then you’ll likely just want to shift entirely to a stacked sticky medium rectangle layout.

  3. In the instance that your sidebar also houses other content like recommended articles or links to related content, you’ll be looking for opportunities to inject ads between your sidebar widgets. Depending on the importance of these sidebar widgets (usually determined by the level of user interaction they get), you can try any of the following:

You could choose just to add a single sticky medium rectangle at the bottom of your sidebar content that follows the user down the page once they scroll to the depth of the ad - no second ad replaces it, it stays sticky down the page.

Or you could try stacking an ad near the top of your sidebar content that isn’t sticky, then place a sticky ad unit after the end of your sidebar content that stays with a user down the page.

If you have a longer scrolling page, you can also replace the single sticky unit with a stacked sticky medium rectangle layout once a user gets to the sticky ad.