Add code for native ads

When you choose the HTML & CSS editor option for native ads, you add HTML and CSS code to customize and style your native ads. This article provides tips and samples for adding the code.

The resulting native creatives can serve as traditional ads (Publisher-managed creatives for Programmatic Guaranteed are the only supported programmatic ads). To serve native creatives as both traditional ads and all types of programmatic ads, please select the "Start with templates and customize" option in the Guided design editor.

Native style sample

Here’s an example of HTML and CSS in a native style for a fluid, in-feed placement. This native style is based on a “sponsored post” native ad format with Headline, Image, and Body variables.

Code type Sample code

HTML with variables

Code type	Sample code
HTML with variables	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS with variables	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS with variables


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

This native style will convert native creative components like this:

Component	Example
Headline	The 30 Fastest Growing Jobs
Image	jobs.jpg
Body	According to the U.S Bureau of Labor Statistics, these occupations will grow the most in the next 10 years. The list might surprise you.

Into a native ad that looks like this:

An example of a native ad

HTML

Add an HTML snippet that indicates how your native ad will appear.

You may need to collaborate with your web or app developer to create the code.
Your HTML can include JavaScript in <script> tags.
Please include only the snippet relevant to the ad, as including a full HTML document will prevent the display of ads in some browsers, including Internet Explorer. For example, don't include <doctype> or <html> tags — see the example above.
Native ads don’t inherit styles from the parent page, but you can import external stylesheets and web fonts with <link> tags in the HTML.

The Target Window setting controls whether native ads open in the same tab or a new window after they’re clicked.

Traditional ads inherit the ad unit-level setting.
Programmatic ads inherit the network-level setting.

Insert macros

You can click Insert macro and use the following buttons to help build your HTML:

CacheBuster: Ensure that a fresh call is made to the ad server every time the code is executed, so you’re accurately counting impressions. Learn more about CacheBuster.
Click (recommended): Track clicks if your code snippet doesn’t contain special characters. Learn more about click.
Click-through URL: Specify the creative's landing page that should appear when someone clicks the ad. Learn more about Click-through URLs.
Escaped click: Track clicks if your code snippet contains special characters (for example, '&', '?', '%') in its click-through URL. Learn more about escaped clicks.
Video wrapper: The wrapper that contains the video player for the native ad. Learn more about how to configure native video styles.

CSS

Provide CSS code that indicates how your native ad will appear. See the example above.

If you're trafficking fluid size native ads, please don't use absolute positioning CSS.

Was this helpful?

How can we improve it?

Add code for native ads

HTML

Insert macros

CSS

Was this helpful?

Need more help?

Try these next steps: