After you've integrated the Google Publisher Tag (GPT) library into your site and become familiar with our general best practices, you're ready to start issuing ad requests. Below we'll cover some additional best practices you should keep in mind when configuring and working with ad slots, to make the most of your ad space with minimal performance impact.
Prioritize "important" ad slots
Not all ad slots are created equal. For example, slots which are visible as soon as your page loads (above the fold) are usually more "important" than those which are not visible until scrolled into view (below the fold), in terms of viewability and monetization. With this in mind, it's important that you carefully consider the relative importance of every ad slot on your page and prioritize loading the most important slots as quickly as possible.
Load above the fold ads early
Ads that will be visible as soon as the page loads should be given the highest
priority. It's recommended that you define these slots in the <head> of your
document, and request them as early in the page load process as possible. This
helps to ensure that these ads are loaded early (maximizing viewability) and
that they won't unnecessarily slow down the initial page load.
Load below the fold ads lazily
For ads that need to be scrolled into view, fetching and rendering should be deferred until the slots are close to entering the viewport. This is a process known as lazy loading. Lazy loading separately prioritizes requesting and rendering creative content for slots that are the most likely to be viewed. This helps optimize page load performance by conserving the browser's limited resources, which is especially important in mobile environments where bandwidth and CPU are often heavily constrained.
Refresh ads without refreshing the page
There are many scenarios in which it is optimal or even necessary to replace the current ad content of a slot. In these cases, it is best to use the GPT library's refresh functionality to do so dynamically. This avoids a full page refresh and lets you precisely control the conditions under which a slot or group of slots are updated.
When refreshing ad slots, it's important to be familiar with and adhere to
refresh() best practices.
Refreshing ads inappropriately can lead to performance issues and negatively
impact viewability rates.
Target ads effectively
When configuring key-value targeting, carefully
consider whether to use slot- or page-level targeting. For key-values shared
between multiple slots, it's most effective to use page-level targeting via the
PubAdsService setTargeting() method. Slot-level
targeting should only be used to register key-values which differ or are not
included on all slots.
Note that both slot- and page-level targeting can be used at once, as seen in the set targeting example. It is strongly recommended that you configure targeting at the page-level first, then apply slot-level overrides only where necessary. This approach not only makes efficient use of the GPT API, it also simplifies code and helps in maintaining a clear mental model of all targeting configured on the page.
Use Single Request Architecture correctly
Single Request Architecture (SRA) is a GPT request mode which bundles requests for multiple ad slots into a single ad request. This ensures that competitive exclusions and roadblocks configured for your page will be honored. Therefore, if your page makes use of these, it's recommended that you enable SRA and understand how to use it correctly.
In its default configuration, SRA will request all ad slots defined on your
page the first time you call display() (or refresh(), if
initial load is disabled). Because of this
it's recommended that you define all of your page's ad slots in the <head> of
the document, prior to making the first call to display().
Lazy loading can be used in conjunction with this
approach to ensure slots located below the fold are
not loaded immediately.
When using SRA, it's important to fully configure all ad slots (for example,
set targeting, category exclusion, etc.) prior to making the first call to
display(). Only values configured before this point will be included in the
initial SRA request.
Incorrect — ad slot configuration is not included in SRA request
<html>
<head>
<meta charset="utf-8">
<title>Single Request Architecture Example</title>
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
<script>
window.googletag = window.googletag || {cmd: []};
var adSlot1, adSlot2;
googletag.cmd.push(function() {
// Define ad slot 1.
adSlot1 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-1')
.addService(googletag.pubads());
// Define ad slot 2.
adSlot2 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-2')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad-1" style="width: 728px; height: 90px;">
<script>
googletag.cmd.push(function() {
// This call to display requests both ad slots.
googletag.display(adSlot1);
});
</script>
</div>
<div id="banner-ad-2" style="width: 728px; height: 90px;">
<script>
googletag.cmd.push(function() {
// This call to display has no effect, since both ad slots have already
// been fetched by the previous call to display.
// Targeting configuration for ad slot 2 is ignored.
adSlot2.setTargeting('test', 'privacy');
googletag.display(adSlot2);
});
</script>
</div>
</body>
</html>
Correct — ad slot configuration is included in SRA request
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Single Request Architecture Example</title>
<script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
<script>
window.googletag = window.googletag || {cmd: []};
var adSlot1, adSlot2;
googletag.cmd.push(function() {
// Define ad slot 1.
adSlot1 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-1')
.addService(googletag.pubads());
// Define and configure ad slot 2.
adSlot2 = googletag
.defineSlot('/6355419/Travel/Europe/France',[728, 90], 'banner-ad-2')
.setTargeting('test', 'privacy')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="banner-ad-1" style="width: 728px; height: 90px;"></div>
<div id="banner-ad-2" style="width: 728px; height: 90px;"></div>
<script>
googletag.cmd.push(function() {
// This call to display requests both ad slots with all
// configured targeting.
googletag.display(adSlot1);
});
</script>
</body>
</html>
Optimize your ad sizing
When defining your ad slots, consider not just the maximum size ad that could serve, but also smaller sizes that could comfortably fit into the same space. In general, the more sizes you specify when defining a slot, the more ads that will be eligible to serve to it. This can translate to higher fill rates and increased revenue.