This document describes how to set up your Mobile Web pages to be able to deliver Picnic's formats into your existing GAM Ad Units, rather than implement a new Ad Unit entirely for Picnic's formats. We provide an integration guide and then implementation best practises, all of which are optimised towards reducing Cumulative Layout Shift and ensuring your page can maintain the highest Core Web Vitals score as possible. This guide shows some ways of making your ad units compatible however you might have other methods which better suit your stack. Picnic's formats are served as standard HTML creatives in 320x480 and/or 320x400 sizes so ultimately, the only requirement is you must have an ad unit which supports these sizes. Test Creative Tags are found at the bottom of the page.
1. Edit Ad Unit in GAM so that it's a Multi-Size Ad Unit
Picnic's formats have the following sizes* which need to be added to the relevant, Fixed Size GAM ad unit on your mWeb page:
320x480(Stories, Swipe Right)
*It is possible for the smaller,
320x400 creatives (Posts & Carousel) to serve out of a
320x480. Speak to your Picnic Account Manager for more detail.
Follow Google's instructions for specifying ad sizes in GAM:
Set targeting and sizes with GPT
For each ad slot, you can specify an ad unit so that line items targeted to that ad unit (or placements containing that ad unit) will be eligible to serve to that tag. You can learn more about the Ad Manager inventory structure, ad unit hierarchy, and how ad units inherit targeting in the inventory overview.
2. Generate and Implement GPT Tag (Requires Developer)
Once sizes have been added to Ad Units in GAM, please follow Google's instructions for exporting and adding these amended tags to your site:
Generate ad tags
View related Skillshop training course You can easily customize and generate ad tags from the Ad Manager interface without having to manually edit code. It is possible to create ad tags from multiple places within the Ad Manager interface, depending on the type of tags you wish to create.
We can recommend 2 different implementation methodologies, however there might be more that suit your stack and website's code.
2a. Reserve space for the most common size and resize with CSS (recommended)
As per Google's recommendation we recommend you specify the most common size of your ad slot via
min-width CSS properties:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
This lets you reserve a minimum amount of space for your ad slot (which we assume to be
300x250) while still allowing the browser to slight increase the size of the container as necessary.
2b. Reserve space for largest size configured to serve in this ad slot
To prevent all layout shift, you must provide sufficient space for the largest sized ad, before the ad is called. If
320x480 (the size required for Picnic's largest format) is the largest size configured to serve in this ad unit, please set these as the fixed height and width directly on the ad slot
div. This will cause white space to appear on the page if a smaller ad is called.
3. Test Implementation
Set up a test Order and Line Item for these updated Ad Units, serving one of the test tags found below.
Example Creative Tags
This is an example Picnic Posts creative (320x400). Traffic via our ad server to confirm your pages have been set up correctly
This is an example Picnic Stories creative (320x480). Traffic via our ad server to confirm your pages have been set up correctly