Wallpaper adverts on Abacus Webvision Cloud websites: implementation notes

How to implement Google Ad Manager wallpaper advertisements on an Abacus Webvision Cloud website, deal with any alignment issues, and make them 'sticky' so they follow the user down the page as they scroll.

This is a post to help anyone trying to set up wallpaper advertisement placements on an Abacus Webvision Cloud website using Google Ad Manager. I say 'anyone', but it's likely to be future me.

You're presumably following Abacus' 'Wallpaper advertisement guide' (only accessible if you are logged in as an Abacus client): https://www.abacuscloud.info/site-set-up-tasks/wallpaper-advertisement-guide/1008.article

Implementation 'gotchas'

There are a few 'gotchas' with the guide's 'initial set up' section that you will need to take into account to get the wallpapers to display. Working through the guide in order:

1. When you generate the ad tags, DON'T place the googletag.defineOutOfPageSlot line in your 'Global_JavaScript Head' page text when instructed. Later on in the  guide, Abacus provides a a snippet of code (the one starting with the comment "check if wallpaper is defined") that does this for you.
2. Likewise ignore the instruction "Where we have the googletag.defineOutOfPageSlot, this should be updated to var wallpaperSlot = googletag.defineOutOfPageSlot". The snippet later in the guide does this too.
3. The wallpaper size mapping code snippet (starting var mapWallpaper) has an unnecessary closing curly bracket } at the end. Remove this.
4. The penultimate snippet (starting window.addEventListener) ends with two closing curly brackets, when it only needs one. Remove one of the brackets, otherwise the code snippet will stop any of your Google Ad Manager ad slots from being defined and you will see this error in Google Publisher Console:

Alignment issues

When I first got the wallpaper working, it aligned itself with the top of the page - in other words, the top part of the wallpaper disappeared behind the site header and nav bar. To get around this, I initially added white space to the top of the creative equal to the height of the header and nav bar. (I used Chrome dev tools to work this out.)

This wasn't ideal, especially as I wanted to run the same campaign across multiple Webvision websites that had headers of differing heights. I needed to create a different version of the creative for each website.

Sticky wallpapers with CSS

This led me on to another question, whether the wallpapers were supposed to be 'sticky' or not - that is, follow the user as they scroll down the page. My wallpapers when first implemented were not sticky, but two factors led me to believe they should be:

• Although Abacus' guide doesn't specify whether the standard wallpapers should be sticky, its example of a 'fireplace' takeover (combining wallpapers with a masthead leaderboard) does show sticky wallpapers.
• I looked at some other Webvision Cloud websites with wallpapers and they were all sticky (for example railwaygazette.com and insurancetimes.co.uk).

The other Webvision sites all used a small amount of CSS to make the wallpapers sticky. Although my sites also had the relevant CSS in their stylesheet, it wasn't taking effect - I think perhaps some of my <div> elements had slightly different class names? I resolved the issue by adding the following snippet of CSS to the 'Global_CSS Head' page text in Webvision:

The first few lines specify what happens when the full header is showing (i.e. when the user is at the top of the page). The value '176px' equals the height of the header and the nav bar together, and you will need to adjust this for your particular site design.

The lines after this specify what happens when only the fixed navigation is showing (i.e. when the user has scrolled down the page). The value '48px' equals the height of the nav bar only, and again may vary from site to site.

The other benefit of adding this CSS, aside from getting sticky wallpapers, is that I no longer needed to add any white space to the creative itself - it's now handled entirely with CSS.