How to serve Native Ads using Google Ad manager (DFP)? Step by Step guidelines.

Hits: 482

How to serve Native Ads using Google Ad manager?

Many people got confused and issues in creating native ads after the new update. New UI might not be user friendly but here you can see the step by step guidelines.

Here are the steps for Native Style Creation:

    1. Login Ad Manager —> Delivery –> Native (Side Panel) —> Create Native Ad
    2. Select “HTML & CSS”
    3. Add native Style name eg: “Native_Ad_Test”
    4. Select size ” Fluid” for responsive or choose custom size “300×100” depends on the site layout. Recommended size is “Fluid”.
    5. Customized Format: New Format
    6. Format Name: Eg: Native_Ad_Test. This will be your ad size appear on the line item. So, i would like to give same name as style name in step 3 to avoid confusion. we can use same format for different styles.
    7. Add Variables to create the field to enter the native ad thumbnail, text, clickurl, etc
    8. Choose the correct Type as per your native ad requirements.
    9. In this example, need Image and text for the native.
    10. Add variable for “Headline“. Type: Text and also you can select “Required entry when trafficking” to avoid trafficking error like missing headlines.
    11. Similarly create variable for “Body” text. Type: Text.
    12. Thumbnail Image variable “Image”. Type: File
    13. Click Continue at the bottom to the next step of native ad creation.
    14. Paste the sample code in the HTML (You can add code as per your requirement).
      <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>
    15. Paste style into the CSS Field. Then the creative looks as you desired.
      .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;
      }
    16. Make sure you have added the variables into the respective “HTML” and “CSS”
    17. [%Headline%],[%Body%],[%Image%] these variables are responsible for the placeholder for your native creatives. (You can see it in HTML and CSS code)
    18. Then continue to the next step
    19. Choose the ad unit “Native” and Hit Save.
    20. You have created the native style successfully.

Steps for Creating Native Line Item:

  1. Goto Delivery (Side Pane) –> Order –> New Order –> Add required fields (Name, advertiser, etc)
  2. Enter line item Name
  3. Inventory Size: Native_Ad_Test (Which is format name while creating Native Style)
  4. Enter respective line details and target “Native” ad unit and save line item.

Steps for Uploading Native Creatives:

  1. Click New creative and goto “Native” –> Select native style “Native_Ad_Test”
  2. Add Native text and Thumbnail image for the created style.
  3. Hit Save to see the preview. 
  4. Finally Approve the order and display the native ads on your site.
Hope everyone like this. Please provide the suggestion and comments on this article.
Thank You!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.