Toolbox 🛠️
Guidelines

Guidelines

Guidelines are a set of pre-defined constant values you can use for both ad unit sizes as well as viewport sizes. These values are specified by the IAB new standard ad unit portfolio (opens in a new tab).

Unit Sizes

KEYVALUE
BILLBOARD[970, 250]
SKYSCRAPER_WIDE[300, 600]
SKYSCRAPER[160, 600]
SKYSCRAPER_SLIM[120, 600]
LEADERBOARD_XL[970, 90]
LEADERBOARD_LARGE[920, 90]
LEADERBOARD[728, 90]
MPU[320, 250]
MPU_300[300, 250]
MOBILE_LEADERBOARD_LARGE[468, 60]
MOBILE_LEADERBOARD_MEDIUM[320, 100]
MOBILE_LEADERBOARD[320, 50]
LINE_TEXT_UNIT[280, 18]
ONE_BY_ONE[1, 1]
BLANK[0, 0]
FLUID'fluid'

Screen Sizes

KEYVALUE
DESKTOP_LARGEST[1220, 0]
DESKTOP_PLUS[970, 0]
DESKTOP[861, 0]
TABLET_PLUS[728, 0]
TABLET[600, 0]
MOBILE_PLUS[468, 0]
MOBILE[320, 0]

Usage

To use, simply import GUIDELINES and use:

import { GUIDELINES } from 'goopubtag';
 
const { UNIT_SIZE, SCREEN_SIZE } = GUIDELINES;
 
const Component = () => {
    return (
        <div>
            <GPTSlot
                adUnit="Travel/Europe"
                slotId="responsive-ad"
                sizes={[UNIT_SIZE.MPU_300, UNIT_SIZE.LEADERBOARD, [750, 200]]}
                sizeMapping={[
                {
                    viewport: SCREEN_SIZE.DESKTOP,
                    sizes: [[750, 200], UNIT_SIZE.LEADERBOARD],
                },
                {
                    viewport: SCREEN_SIZE.TABLET,
                    sizes: UNIT_SIZE.MPU_300,
                },
                {
                    viewport: SCREEN_SIZE.MOBILE,
                    sizes: UNIT_SIZE.BLANK,
                },
                ]}
            />
        </div>
    );
};

Remember, these are only guidelines, feel free to add custom sizes as per your needs.

Type supportGPT Examples