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	`"%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%] [%Body%] SPONSORED`
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; }



    
    
        "%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]
        [%Body%]
        SPONSORED

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 true Other native ad resources 1 of 6 Create custom native ad formats 2 of 6 Add code for native ads 3 of 6 Create A/B native experiments 4 of 6 Mix native and banner ad requests 5 of 6 Mediation for native ads in mobile apps 6 of 6 Traffic native ads in AMPHTML Unlock your revenue with personalized tips today! Visit the Optimization tips for Google Ad Manager page to see personalized suggestions to maximize your revenue. Unlock now