Implementation guide

Native ad

Native ads

An ad assembled from parts (title, image, text) and dressed in your site's look, always with the label that says it is an ad.

Ad Manager
mobile and desktop

Learn the format Check my site

Desktop

Mobile

Understand it in 1 minute

What the native ad is

A native ad arrives in loose pieces, not as a finished picture. The advertiser sends the pieces, such as the title, the image and a short text. Your site decides the clothes: color, font, size and place of each piece. It is like an assembly kit: the box brings the pieces, and you put them together in the way that fits your living room. That is why it looks like part of the page, like one more card in a list of articles.

In Ad Manager there are two ways to dress this ad. The first is native styles, created inside Ad Manager itself, with the guided design editor, which has ready-made templates, or with HTML and CSS, for those who know code. Google says the styles work for both web and apps. The second is the code for Android and iOS apps, where the app developer receives the pieces through the Google Mobile Ads SDK and draws everything in the app's code. For websites, the path is the native style.

Because native looks like content, Google is very firm on one thing: visitors must know it is an ad. The attribution label and the AdChoices icon mark the card as advertising. Nothing can hide, cover or disguise these labels, and the ad must be clearly separated from the content. It is like a promotional poster inside a store: it can be pretty and match the decor, but it has to make clear that it is advertising.

Google created this format so the same ad can show up with different looks in each part of the site, without changing what the advertiser sent. On the web, Google recommends the Fluid size, which takes the width of the column and adjusts the height on its own. It is worth using when you want ads that match the design of your pages, such as between the items of a list of posts, always with the ad label clearly visible.

Step by step

How to implement

Choose the native formatIn Ad Manager, go to Delivery and then Native. Use a standard format with the pieces you need. For programmatic ads, Google only accepts standard formats.
Create the styleClick New native style and choose Guided design editor or HTML and CSS. In the guided editor, the path Start with templates and customize serves both traditional and programmatic ads.
Set size and targetingChoose the same size as the ad units that will receive the native ad. Google recommends Fluid. If the style is Fluid, the ad unit must also be Fluid, and the style targeting should match the line item targeting.
Build the look with the labelShow all the required pieces of the format, including the ad label.
Put the tag on the pageDefine the slot in GPT with the fluid size and place the div inside a column with a width greater than zero.

Implemented example

The code and how it looks on screen

The GPT script goes in the head; the div with the display call goes in the body, inside the column where the native ad should appear.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Slot nativo com tamanho fluido.
    googletag
      .defineSlot("/1234567/exemplo", ["fluid"], "nativo-exemplo")
      .addService(googletag.pubads());
    googletag.enableServices();
  });
</script>

<!-- No <body>, dentro de uma coluna com largura -->
<div id="nativo-exemplo"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("nativo-exemplo");
  });
</script>

On desktopIt shows up as a card that matches the site, with an image, a title, text and the ad label. In the Fluid size, it takes the full width of the column it sits in.

On mobileIt appears the same way, adjusted to the screen width. In programmatic styles, the AdChoices icon is visible in the top right corner.

What Google recommends

Do and don't

Allowed

Create native styles inside Ad Manager, with the Guided design editor or with HTML and CSS.
Use the Fluid size, which Google recommends to give more freedom to the look.
Change the look of the attribution label to match the layout, as long as it stays easy to read.
Show the same ad with different layouts in different parts of the site.
Create a custom native format for traditional ads, knowing it does not receive programmatic ads.

Not allowed

Hide, cover or disguise the attribution label or the AdChoices icon.
Make the ad hard to tell apart from the content. Google requires ads to be clearly separate from the content.
Make ad pieces imitate the page's navigation buttons.
Not showing the required pieces of the format, such as the ad label and the title.
Cropping images and videos, changing their aspect ratio or letting pieces overlap.
Put another part of the ad in the corner reserved for AdChoices.

Tips

To do it right

In the programmatic content format, the title is up to 90 characters. Plan the space with that in mind.
Fluid ads work best inside a column with a width greater than zero pixels.
Use text with good contrast and only supported fonts. In programmatic styles, Google does not accept third-party fonts or libraries.
Google warns that fluid ads can take longer to appear and can shift the surrounding content when their height changes.

Watch out

Common errors

Style size different from the ad unit

If the style is Fluid, the ad unit must also be Fluid. Google says the sizes must be the same.

Custom format expecting programmatic

A custom native format does not receive programmatic ads. For programmatic, only standard formats work.

Box with no width or with locked height

A fluid ad in a zero-width column, or inside a box with a fixed height smaller than the ad, may display wrongly.

Frequently asked questions

Does the native ad really have to say it is an ad?

Yes. The attribution label and AdChoices exist so nobody mistakes the ad for content, and they cannot be hidden or disguised.

Does the Android and iOS app code work on a website?

No. Google describes this path for Android and iOS apps, using the Google Mobile Ads SDK. On websites, the path is the native style.

Can I use the fluid size on other ads?

According to the GPT documentation, today the native ad is the only fluid type that Ad Manager supports.

Library

Official Google source

Everything on this page follows Google's official documentation. Read it straight from the source:

Does your site use this format the right way?

The audit reads the site as a visitor would, without clicking anything, and shows what to fix.

Run an audit