Search
Clear search
Close search
Google apps
Main menu

Native style settings

For the Native styles feature, DFP handles the rendering of your native ads based on native styles you specify within the product.

With native styles, you specify size and targeting and add HTML, CSS, and JavaScript to define ads that will be responsive and produce a quality display across all screens. You don’t need to do any of the rendering; DFP automatically applies the right native style for the destination.

  • Native styles always use SafeFrame. SafeFrame protects users by limiting the creative's interaction with the page. Learn more.
  • This article doesn’t apply to Custom rendering. For that delivery method, you don’t add styles; instead, you use the Google Mobile Ads SDK to request and custom render native ads from your app.

When you add a native style to a native ad format, you’ll see the settings in the following table. Click the link below to see an example of HTML and CSS in a native style.

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:

 
Style setting Description
Name Internal name for the style.
Targeting

Next to “Targeting,” click Choose targeting to select the ad units you want to associate with a native style. You can target to ad units, placements, key-values, geography, devices, and operating systems. Learn more about targeting criteria.

When a request comes in to the ad unit with a size and targeting that matches the native style, the native style will be selected, and native creatives based on this native ad format will be eligible to serve.

Make sure to target these native styles to various ad units, key-values, etc. For example, your ad might look one way on your homepage and another way on your category page.

Note that native styles don't consider whether ad units are marked as special. In other words, if a native style targets a parent ad unit, the child ad unit will be eligible as well, even if it's special.

Size Next to “Size,” select Fluid or a fixed size from the “Select a size” dropdown.
  • If you select Fluid, DFP will automatically size the ad by filling the width of the enclosing column and adjusting the height as appropriate (just like a regular HTML div on your site). Use this size in combination with the fluid slot type in Google Publisher Tags or the Google Mobile Ads SDK.
  • If you select a fixed size, such as 300x250, no tag changes or app updates are required. A fixed size style will enable native creatives to flow to your existing ad slots.
HTML with variables

Next to “HTML with variables”, provide 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.

If the style is associated with a standard native ad format (Native content ad or Native app install ad), you'll have the option to click Change HTML and select one of the pre-defined options. You won't be able to edit the HTML if you use this option.

You can also 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.
  • Insert CacheBuster macro: 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.
  • Insert escaped click macro: Track clicks if your code snippet contains special characters (e.g. '&', '?', '%') in its click-through URL. Learn more.
  • Insert click macro (recommended): Track clicks if your code snippet doesn’t contain special characters. Learn more.
  • Insert click-through URL macro: Specify the creative's landing page that should appear when someone clicks the ad. Learn more.
  • Select a variable: Select one of the variables you created in this native ad format to insert it in the HTML template.
CSS with variables

Next to “CSS with variables”, provide CSS code that indicates how your native ad will appear. See the example above.

If the style is associated with a standard native ad format (Native content ad or Native app install ad), you'll have the option to click Change template to start with presets for common native layouts. You will be able to update the CSS.

You can also use the following button to help build your CSS:

  • Select a variable: Select one of the variables you created in this native ad format to insert it in the CSS template.
If you're trafficking fluid size native ads, please don't use absolute positioning CSS.
Validate Click Validate after updating the HTML or CSS to see if there are any errors.
Width If you select Fluid next to "Size," the "Width" box will appear in the "Preview" area. You can change this setting to see how the ads using your fluid style will look with different container widths.
Was this article helpful?
How can we improve it?