{"id":4691,"date":"2019-11-13T09:04:41","date_gmt":"2019-11-13T09:04:41","guid":{"rendered":"https:\/\/oko.uk\/?p=4691"},"modified":"2019-11-13T09:04:41","modified_gmt":"2019-11-13T09:04:41","slug":"guide-create-native-ads","status":"publish","type":"post","link":"https:\/\/cool.co\/supply-side-platform-home\/guide-create-native-ads\/","title":{"rendered":"How to create Native Ads in Google Ad Manager and get them live on site"},"content":{"rendered":"

In this guide, we\u2019ll be showing you step-by-step how to create\u00a0native ads<\/a>\u00a0and 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.<\/p>\n

Before we start creating native ads<\/h2>\n

You’ll need to find out the styles (CSS) of buttons, titles and body copy on your website, specifically:<\/p>\n

Titles – <\/strong>Colour and font
\nBody copy – <\/strong>Colour and font
\nButtons – <\/strong>Background colour, colour and font if it differs from main font<\/p>\n

Chances are if this is your own site, you will know this information or if you have developers you could ask them.<\/p>\n

If not, most browsers have developer tools which you can use to find this information.<\/p>\n

How to use Chrome Developer Tools to get CSS styles<\/h2>\n

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.<\/p>\n

Once you have your CSS styling information, then you’re ready to create Native Ads.<\/p>\n

How to create Native Ads in Google Ad Manager<\/h2>\n
    \n
  1. Open up Google Ad Manager<\/span><\/li>\n
  2. In the left hand menu Click Delivery<\/strong> > Native<\/strong><\/span><\/li>\n
  3. Click the Create Native Ad<\/strong>\u00a0button<\/span><\/li>\n<\/ol>\n

    \"Native<\/span><\/p>\n

    Defining your native ad settings<\/h2>\n

    Step 1 – Choose how you want to create native ads<\/b><\/h3>\n

    For this step, keep in mind that how you choose to edit your native ads can affect how your ads are served.<\/span><\/p>\n

    If we choose the <\/span>Guided Design Editor<\/b>, it will serve programmatic and traditional ads. Choosing to edit using the <\/span>HTML and CSS editor<\/b> will only serve traditional ads.<\/span><\/p>\n

    Android and iOS app code<\/b> editor serves programmatic and traditional ads in apps, this type of editor is best suited to app developers.<\/span><\/p>\n

    For more information about the various editing methods, visit the <\/span>Google Ad Manager help pages here<\/span><\/a>.<\/span><\/p>\n

    In this example, we\u2019ll 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 \u2018Edit Code\u2019<\/strong> option.\u00a0\u00a0<\/span><\/p>\n

    \"Native<\/p>\n

    Step 2 – Choose your path<\/b><\/h3>\n

    There are two path options available when creating native ads; the first is Customisable for in-feed<\/strong> and the second is Google-designed for in-article.<\/strong><\/span><\/p>\n

    Customisable for in-feed<\/b>\u00a0– 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.<\/span><\/p>\n

    Google-designed for in-article<\/b>\u00a0– This path serves programmatic ads only and is best for incorporating ads in between paragraphs or around articles on a page.<\/span><\/p>\n

    In this example, we\u2019ll be selecting\u00a0<\/span>Customisable for in-feed.<\/b><\/p>\n

    NB<\/b> – If you don’t have the time or resources to design your ad, then choose\u00a0Customisable for in-feed<\/strong> and then toggle on Let Google suggest an in-feed style.<\/strong> You then need to add the URL of your site and click Scan<\/strong>, then click Continue<\/strong>\u00a0to allow Google to suggest the style. The only ad size with this option is\u00a0Fluid<\/strong>\u00a0because it automatically changes ad slot size as needed.<\/span><\/p>\n

    Step 3 – Choose your ad size<\/b><\/h3>\n

    For the ad size, we’ll be selecting Fluid.<\/strong><\/span><\/p>\n

    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.<\/span><\/p>\n

    Step 4 – Choose your format<\/b><\/h3>\n

    We’ll be selecting Content<\/strong>. You also have the option to select Video Content<\/strong> (native video ads), App Install<\/strong> (a creative to promote your Android or iOS mobile app) and Video App Install <\/strong>(native ads to encourage app installs).<\/span><\/p>\n

    Step 5 – Choose your image position<\/b><\/h3>\n

    First, you\u2019ll need to select where you want the image to appear – we’re going to select Top image.<\/strong> Next, click Continue.<\/strong><\/span><\/p>\n

    \"Native<\/p>\n

    How to style your Native Ad<\/h2>\n

    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.<\/span><\/p>\n

    Step 1 – Global Styling<\/h3>\n

    Click Global Styling<\/strong> 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.\u00a0<\/span><\/p>\n

    You can also change the ad\u2019s background colour to a custom HEX colour to match your site if needed.<\/span><\/p>\n

    \"Native<\/p>\n

    Step 2 – Ad Badge Styling<\/h3>\n

    From the Ad Badge <\/strong>(top left corner of ad) drop down, you can:\u00a0<\/span><\/p>\n