Mobile Web Format Integration
⚙️

Mobile Web Format Integration

💡
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)
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

320x400 Tag:

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>
320x480 Tag:

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>