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) 320x400
(Posts, Carousel)*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:
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:
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-height
and 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
<script language="javascript" src="https://a2.adform.net/adfscript/?bn=41535456"></script>
<noscript>
<a href="https://a2.adform.net/C/?bn=41535456;C=0" target="_blank">
<img src="https://a2.adform.net/adfserve/?bn=41535456;srctype=4;ord=[timestamp]" border="0" width="320" height="480" alt=""/>
</a>
</noscript>
This is an example Picnic Stories creative (320x480). Traffic via our ad server to confirm your pages have been set up correctly
<script language="javascript" src="https://a2.adform.net/adfscript/?bn=40694491"></script>
<noscript>
<a href="https://a2.adform.net/C/?bn=40694491;C=0" target="_blank">
<img src="https://a2.adform.net/adfserve/?bn=40694491;srctype=4;ord=[timestamp]" border="0" width="320" height="480" alt=""/>
</a>
</noscript>