How to Serve Wallpaper (Skin) Ads with Google Ad Manager or the JS Tag

A wallpaper (also called a skin, fireplace, or page takeover) paints a full-page background image on the side rails behind your centered content, with an optional top billboard. On viewports too narrow to show the rails, the creative falls back to the billboard alone, so one call covers desktop and mobile.

The BiddingStack ad tag renders the wallpaper with window.BID_AD.displayWallpaper. The call is identical whether you run it inside a Google Ad Manager creative or directly on the page (JS tag) — when it loads inside a GAM friendly iframe, the renderer walks up to the top document and paints the publisher's page.

Creative Requirements

Design the skin around your actual content column width: with a 1000px column on a 1920px-wide image, each rail has about 460px of visible art, and the outermost edges only appear on very wide screens.

You can use the BiddingStack example creatives to test before advertiser assets are ready:

• Skin (1920×1080): https://www.biddingstack.com/demo/assets/wallpaper-skin.svg
• Billboard (970×250): https://www.biddingstack.com/demo/assets/wallpaper-billboard.svg

Serving with Google Ad Manager

Traffic the wallpaper as a third-party / custom HTML creative against your top leaderboard ad unit (for example a 970×250 unit above the content). The billboard renders in-place inside that booked slot, and the skin escapes the iframe to paint the page background.

1. In GAM, create a line item targeting the top ad unit at the billboard size (e.g. 970×250).
2. Add a creative of type Third party (custom HTML) and paste:

<script src="https://pubtm.com/serve/tag.js"></script>
<script>
  (function waitForTag() {
    if (window.BID_AD && window.BID_AD.displayWallpaper) {
      window.BID_AD.displayWallpaper({
        skinImage: "https://www.biddingstack.com/demo/assets/wallpaper-skin.svg",
        topImage: "https://www.biddingstack.com/demo/assets/wallpaper-billboard.svg",
        clickUrl: "%%CLICK_URL_UNESC%%https://www.advertiser.com/landing",
        backgroundColor: "#0C033A",
        contentWidth: 1000,
        topWidth: 970,
        topHeight: 250,
      });
    } else {
      setTimeout(waitForTag, 50);
    }
  })();
</script>

3. Uncheck "Serve into a SafeFrame" on the creative. The skin must reach the top document, which requires a friendly (same-origin) iframe; SafeFrame blocks that.

When served from the top unit, the billboard automatically fills the slot GAM already sized and positioned — you do not need topSelector or topAlwaysVisible. The %%CLICK_URL_UNESC%% macro prefix gives GAM click tracking on both the rails and the billboard.

Serving with the JS Tag

Place the call directly on your page (direct-sold campaigns, house ads, or your own ad server):

<script src="https://pubtm.com/serve/tag.js" async></script>
<script>
  (function waitForTag() {
    if (window.BID_AD && window.BID_AD.displayWallpaper) {
      window.BID_AD.displayWallpaper({
        skinImage: "https://www.biddingstack.com/demo/assets/wallpaper-skin.svg",
        topImage: "https://www.biddingstack.com/demo/assets/wallpaper-billboard.svg",
        clickUrl: "https://www.advertiser.com/landing",
        backgroundColor: "#0C033A",
        contentWidth: 1000,        // your page content column width
        topWidth: 970,
        topHeight: 250,
        topAlwaysVisible: true,    // show the billboard together with the skin
      });
    } else {
      setTimeout(waitForTag, 50);
    }
  })();
</script>

By default the billboard floats fixed at the top of the page on narrow viewports. To place it in your own layout instead, pass a topSelector pointing at a div in your header area — the billboard renders inside it in normal flow and stays visible at every width:

topSelector: "#top-ad-slot",

How to Preview in Google Ad Manager

Set up a preview line item that only serves when you ask for it, so you can check the wallpaper on your live site without showing it to real visitors:

1. Create a line item with the wallpaper creative above, targeting your top ad unit.
2. Add custom criteria targeting: key bs_preview with value true. Create the key-value in GAM (Inventory → Key-values) if it does not exist yet.
3. Make the line item type Sponsorship, or give it a CPM clearly higher than your open web bidding prices — otherwise header bidding demand can outbid it and the preview will not render.
4. Open your page with ?biddingstack_preview=true appended to the URL:

https://www.yoursite.com/article?biddingstack_preview=true

The BiddingStack tag detects the parameter and sets the page-level GAM targeting bs_preview=true, so the preview line item wins only on that visit. Regular visitors never match the key-value and see normal ads.

While previewing, check:

• Resize the window across minSkinWidth: wide viewports show the skin, narrow viewports fall back to the billboard alone.
• The content column covers the middle of the skin — nothing important from the creative should be hidden behind it.
• Clicks on the left and right rails and on the billboard open the landing page.
• Scrolling keeps the skin fixed behind the content.

When you go live with the real campaign, the same pricing rule applies: run direct-sold wallpapers as Sponsorship line items or at a CPM above your typical open web bidding prices, so the takeover reliably wins the slot.

Options

displayWallpaper resolves with an instance exposing show(), hide(), and destroy(). destroy() removes the skin and billboard and restores the page's original background and any content the billboard replaced.

Need help trafficking a wallpaper campaign? Contact the BiddingStack team.