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.


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

<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:

HTML

Add an HTML snippet that indicates how your native ad will appear. 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.

You may need to collaborate with your web or app developer to create the code.

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

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.
  • 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.
  • Click (recommended): Track clicks if your code snippet doesn’t contain special characters. Learn more.
  • Click-through URL: Specify the creative's landing page that should appear when someone clicks the ad. Learn more.
  • Escaped click: Track clicks if your code snippet contains special characters (e.g. '&', '?', '%') in its click-through URL. Learn more.

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 article helpful?
How can we improve it?