Ad Tag Implementation

How Playwire IAB Tags Work

Playwire IAB tags allow you to insert ads within specific DOM elements on your site. Ad size and formatting are managed by our team, simplifying integration.

Creating Your Ad Tag

To create your ad tag, follow these steps:

1. Assign a Unique ID

Use #pw-standard-iab1 for the first ad unit. If you need multiple ads, increment the number in the ID (e.g., #pw-standard-iab2) Each tag should have its own unique ID.

<div id="pw-standard-iab1"></div>

<div id="pw-standard-iab2"></div>

2. Add the Template Class

The template class helps define the ad format. It makes targeting easier via CSS and helps us identify the ad in your HTML.

Available templates:

Leaderboard: .pw-leaderboard-template
Large Leaderboard: .pw-large-leaderboard-template
Medium Rectangle: .pw-medium-rectangle-template
Skyscraper: .pw-skyscraper-template

Examples:

<div id="pw-standard-iab1" class="pw-leaderboard-template"></div>

<div id="pw-standard-iab2" class="pw-medium-rectangle-template"></div>

<div id="pw-standard-iab3" class="pw-leaderboard-template"></div>

Alternatively generate your tags using the generator below

Ad Unit Settings

Select the ad unit, template, and number of tags for your website. Once ready, click "Generate" to create the tag.

Generated Tag

Add CSS to prevent layout shifts (CLS)

To ensure proper layout and prevent Cumulative Layout Shift (CLS), you need to add specific minimum heights for your ad units based on their template. This will help the page maintain its layout while the ads load. Add the following CSS rules to your site's stylesheet:



                    /* Prevent CLS - Minimum height for ad units */
                        /* Small Leaderboard */
                        div[id^="pw-standard-iab"].pw-small-leaderboard {
                            min-height: 90px;
                        }

                        /* Large Leaderboard */
                        div[id^="pw-standard-iab"].pw-large-leaderboard {
                            min-height: 250px;
                        }

                        /* Medium Rectangle */
                        div[id^="pw-standard-iab"].pw-medium-rectangle {
                            min-height: 250px;
                        }

                        /* Skyscraper */
                        div[id^="pw-standard-iab"].pw-skyscraper {
                            min-height: 600px;
                        }

Instructions: Copy the CSS code above and paste it into your site's stylesheet. This will ensure your ads have the proper minimum heights set and prevent layout shifts (CLS) when loading the page.