Table of contents
In this guide, we’ll be showing you step-by-step how to create native ads and how to get the ads live on site. As you’ll no doubt be aware, component-based ads are beneficial for many reasons; they’re highly engaging, eminently suited to mobile display and they hold the potential for greater reach. The whole purpose of implementing a component-based approach to advertising is so that publishers are able to customize their ads to look and feel like part of their website. However, getting those components to match the look and feel of your website can be challenging. With native ads, the components are collected by Google Ad Manager which then generates an ad that matches the stylistic features of your website, including fonts, brand colours and button styles. We’ll begin this guide by showing you how to find the stylistic features that match your site.
Before we start creating native ads
You’ll need to find out the styles (CSS) of buttons, titles and body copy on your website, specifically:
Titles – Colour and font
Body copy – Colour and font
Buttons – Background colour, colour and font if it differs from main font
Chances are if this is your own site, you will know this information or if you have developers you could ask them.
If not, most browsers have developer tools which you can use to find this information.
How to use Chrome Developer Tools to get CSS styles
Here’s a short video on how to open Chrome Developer Tools and how to get the CSS information needed to create your native ads.
Once you have your CSS styling information, then you’re ready to create Native Ads.
How to create Native Ads in Google Ad Manager
- Open up Google Ad Manager
- In the left hand menu Click Delivery > Native
- Click the Create Native Ad button
Defining your native ad settings
Step 1 – Choose how you want to create native ads
For this step, keep in mind that how you choose to edit your native ads can affect how your ads are served.
If we choose the Guided Design Editor, it will serve programmatic and traditional ads. Choosing to edit using the HTML and CSS editor will only serve traditional ads.
Android and iOS app code editor serves programmatic and traditional ads in apps, this type of editor is best suited to app developers.
For more information about the various editing methods, visit the Google Ad Manager help pages here.
In this example, we’ll be using the Guided Design Editor as this is the most simple way to create the ads. If we need to change any CSS later, this can be done by switching to the ‘Edit Code’ option.
Step 2 – Choose your path
There are two path options available when creating native ads; the first is Customisable for in-feed and the second is Google-designed for in-article.
Customisable for in-feed – This path serves programmatic and traditional ads and it is best used for list pages. For example, category pages showing a list of articles or news stories.
Google-designed for in-article – This path serves programmatic ads only and is best for incorporating ads in between paragraphs or around articles on a page.
In this example, we’ll be selecting Customisable for in-feed.
NB – If you don’t have the time or resources to design your ad, then choose Customisable for in-feed and then toggle on Let Google suggest an in-feed style. You then need to add the URL of your site and click Scan, then click Continue to allow Google to suggest the style. The only ad size with this option is Fluid because it automatically changes ad slot size as needed.
Step 3 – Choose your ad size
For the ad size, we’ll be selecting Fluid.
If not choosing the Fluid ad size, then you can choose from the following fixed ad sizes, 300×250, 300×600, 320×50, 320×100, 336×280, 728×90 and 970×250.
Step 4 – Choose your format
We’ll be selecting Content. You also have the option to select Video Content (native video ads), App Install (a creative to promote your Android or iOS mobile app) and Video App Install (native ads to encourage app installs).
Step 5 – Choose your image position
First, you’ll need to select where you want the image to appear – we’re going to select Top image. Next, click Continue.
How to style your Native Ad
The purpose of this step is to format your ad to match the stylistic features of your website content, including fonts, brand colours and button styles. This is the part where we’ll be using the CSS styling information collected earlier using the Chrome browser developer tools.
Step 1 – Global Styling
Click Global Styling on the drop down menu and select the font style that your site uses for the main body of text. Our test site uses Open Sans, so we’re selecting that. If your site is using a non-Google font, choose the font that looks the most similar to the font used on your site.
You can also change the ad’s background colour to a custom HEX colour to match your site if needed.
Step 2 – Ad Badge Styling
From the Ad Badge (top left corner of ad) drop down, you can:
- Change background colour
- Change the font colour
Step 3 – Image Styling
From the Image drop down, you can:
- Toggle the image on or off as desired
- Alter the image ratio
- Add padding to the image
Step 4 – Title Styling
From the Title drop down, you can:
- Choose whether the title is long or short
- Alter the font size of your title
- Alter the alignment
- Change the font colour
- Adjust the padding
Step 5 – Body Styling
From the Body drop down menu you can:
- Choose whether to toggle the Body Element to show or not show
- Change the font size
- Alter the alignment
- Change the colour
- Adjust the padding
This is where you would change the body colour and font to match your website.
Step 6 – Advertiser Logo Styling
Select Advertiser Logo from the menu. From here, you can:
- Choose whether to show or hide the logo
- Alter the size
- Adjust the padding
Step 7 – Advertiser Name Styling
From the Advertiser Name drop down, you can:
- Choose whether or not to show the advertisers name
- Alter the size
- Change the colour
- Adjust the padding
Here you can change the HEX colour to match your website style.
Step 8 – Call To Action Styling
From the Call to Action drop down, you can change the link colour here, but if you want to create a button style for the link, then this is when you would need to switch to code view to edit the CSS.
Before you switch to code, if you want to reorder any of the elements within the ad, you can do so by clicking Reorder elements and dragging the elements to where you want them to be.
At this point, I’m going to uncheck the Body element, which will give us more room to create a button. Click Save.
To switch to code view, toggle on Edit code top right of page – you’ll get a warning saying “Once you edit the CSS, you can no longer update the settings on this page” – click Continue to go to the CSS editor.
We can now edit the CSS to create a button, instead of just a call to action link.
To create a button that will match the test website I’m using, I’ve edited the class .call-to-action a {}
I’ve added or adjusting the following class styles
.call-to-action a {color:#fff; background-color: #6cbcc3; padding: 5px 8px 5px 8px; border-radius: 3px; text-transform:uppercase}
I’ve also added a new style to create a hover colour on the button, .call-to-action a:hover {background-color:#3e5062}
The next step is to validate your code to check for errors. If it’s green after validating, your code is free of errors, in which case you can then name and save your native ads style. Click Continue to go to the Ad Targeting page.
Ad targeting
To serve your native ad, the targeting will need to match your chosen inventory. This may be an ad unit, placement or device category, but you are also able to target by geography, operating system and custom key-values of your choosing. Once the ad targeting has been completed click Save and Finish. If you need more detailed information on targeting the can be found on the Google Ad Manager help pages.
Trafficking
Once styles and layout are complete, you’ll need to traffic campaigns that leverage native creatives. Line items are created as per normal, with the one difference being that Native should be selected as at least one of the inventory sizes in the Expected Creatives field. If you’re adding native demand to an already delivering DoubleClick Ad Exchange line item it’s recommended to keep standard display sizes in place to maximise competition.
Adding a new native creative
Once you’ve created your native ad style, you now need to add a new creative.
- In the left hand menu Click Delivery > Creative
- Click the New creative button
Next, search for the advertiser and make sure that you select a native advertiser.
For the type of creative choose Native format and Select Native content ad from the left drop down within the Native format container. Click Continue, name your ad and Save.
Reporting
Google Ad Manager has a few ways of reporting on native demand performance. Using the GAM query tool and running a historical report, you can select a dimension of Creative size (delivered). Here, native demand impressions will show as either Native for Custom rendering or Fluid for Native styles that are fluid-sized. Also within the historical report, you have the option to report on the native-specific dimensions (native ad format name & native style name). (No native style) or (Non-native ad) will be included in this report for any impressions that are unrelated to native ads. Lastly, using the Ad Exchange historical report will give you an accurate performance overview for multi-size programmatic inventory. Using the creative sizes dimension with metrics will report Native where requests were made from a native ad unit.
The Native Ad on page
Here’s an example of how the ad looks on our test site:
