Native ad template overview

Native ads are ads that look like editorial content. For example, a native ad on a blog looks like the other articles on the site, a native ad on Instagram is just like an Instagram post, and a native ad on a search engine looks like other search results. Native ads are also known as sponsored content or promoted posts.

You can create native ads in AdButler using templates. This guide shows you the basics of AdButler's native ad template feature. You will learn:

  1. How to create a native ad template.
  2. The types of variables you can add to a native ad template.
  3. How to create a native ad item.

How to create a native ad template

Use the steps and sample code below to get to know the native ad template creator and its variables. You can customize your template further using CSS.

  1. Click Templates in the left navigation menu to go to the Templates section.
  2. Click Create New in the Native Ad Templates table. The New Native Ad Template page will appear.
  3. Name your template then add the variables as needed. To follow this guide, add an image tag, an encoded URL, and two text variables to the template. Name them as shown in the image in step 4 so that they'll fit our sample code.
  4. Enter the code in the HTML/Script field, then click Save template.

Making a native ad template in AdButler

Here's the code we used in our example:

<div class="container">
    [%Image%]
    <p class="company">[%Company%]</p>
    <h1>[%Title%]</h1>
    <a href="[%URL%]">Find Out More!</a>
</div>
<style>
    body {
        font-family: arial, sans-serif;
    }

    .container {
        border: 1px solid #929292;
        border-radius: 4px;
        background-color: #fff;
        width: 200px;
        padding: 10px 10px 50px;
        position: relative;
    }

    .container:hover {
        box-shadow: 3px 1px 5px #0003;
    }

    .container img {
        width: 200px;
    }

    .container .company {
        font-weight: 500;
        color: #999;
        display: inline-block;
        font-size: 12px;
        padding: 0 2px 4px 0;
        max-width: 130px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        margin: 0;
    }

    h1 {
        font-size: 20px;
        line-height: 20px;
        font-family: arial, sans-serif;
        margin: 0;
        padding-bottom: 20px;
    }

    a {
        font-size: 14px;
        text-align: center;
        height: 40px;
        line-height: 40px;
        background-color: #eee;
        border: 1px solid #ccc;
        border-radius: 3px;
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
        text-decoration: none;
        color: #666 !important;
        font-weight: bold;
        cursor: pointer;
        width: calc(100% - 20px);
    }
</style>

With your template saved, you can now use it to create ad items.

Native ad template variables

There are seven types of variables in AdButler's native ad template creator.

The types of variables in native ad templates

  1. Text
  2. URL (Encoded)
  3. URL (Raw)
  4. Image URL
  5. Image Tag
  6. Number
  7. Dropdown

Text

A variable that accepts strings and has an optional maximum length limit. The maximum value of Max Length is 4,096. AdButler does not encode the string, and the only validation it considers is the max length. AdButler will warn you if you try to assign a string to this variable that is longer than the max length you set. If you leave the Max Length field empty, AdButler will assign the 4,096 character limit to your text variable.

URL (Encoded)

A variable that accepts only URLs and encodes them to be safely passed into HTML. For example, https://adbutler.com becomes

Example encoded URL

when encoded.

We recommend you use this type of URL for almost all native ad types.

URL (Raw)

A variable that accepts only URLs but doesn't encode them. This can be useful in specific cases outside of rendering the ad in HTML. For example, if you're going to use a native template to receive ad information in a JSON object, you may not want to have the URL encoded because you’ll be working with the JSON object directly.

Image URL

A variable that gives you the option to upload an image from a URL or from the Media Library. If you choose to use an image from AdButler's Media Library, the URL will be a link to the image file on AdButler’s servers.

Image Tag

A variable that renders the entire image as an <img> tag. Instead of adding the URL into an HTML tag to render the image, the image tag will render the image for them. The image tag will have only a source. It will not come with alt text or classes of any kind. This will likely only be useful in the most basic of image rendering.

Number

A variable that accepts only numbers.

A variable with a finite set of values. When a template with a dropdown variable is used to create a native ad item, the user will choose one of those predefined values to assign to the variable.

A dropdown variable in the template creation page

A dropdown variable in the ad item creation page

How to create a native ad item

  1. Go to the section of the relevant zone (Your AdButler > Publishers > Your Publisher > Your Zone) or campaign (Your AdButler > Advertisers > Your Advertiser > Your Campaign).
We recommend assigning native ad items to dynamic zones.
  1. Click Add New in the Ad Items table. The Add Ad Item window will appear.
  2. Click Native. The New Ad Item page will appear.
  3. Select your native ad template in the Template dropdown menu.
  4. Fill in the rest of the fields as needed, then click Save Ad Item.
Read About ad items for more on AdButler's ad item types and their parameters.

Making a native ad item in AdButler

If you followed all the instructions and used the sample code in this guide, your ad should look similar to this when it's served:

Native ad example


Can't find what you're looking for?

Send us an email

hello@adbutler.com

Visit the blog

For more ad serving tips, industry news and AdButler insights.