8 - RTB+ Native ads for web and mobile web

Overview

Native ads adopt the look and feel of the surrounding editorial content. They are considered more acceptable ads since they are presented to the end user in a less intrusive way.

Visit the gallery here to see a demo.

Script template "RTB+ In-Feed Native Ad"

  • Create an RTB+ Web insertion as described here; make sure you select the insertion type Web; enable the checkbox "Activate "Holistic yield" mode..."
  • On the Creatives Tab, open the Template library and select the script template "RTB+ In-Feed Native Ad"

The script template parameters follow the Open RTB Native Ads Specification

Name
Description
Third party pixels URLs
specifies third party impression counting URLs (in case of multiple URLs, separate them by a comma)
Use title
specifies if the native ad has a title
Use icon
specifies if the native ad has an icon
Use data
the "data“ field is used for miscellaneous elements of the native ad (e. g. brand name, ratings, descriptions etc.); see below: "Data max lenght“
Layout
the layout of the environment where the native ad is displayed; to be deprecated: not recommended in case of new implementations
Ad unit
specifies the ad unit as specified in the IAB native advertising playbook; to be deprecated: not recommended in case of new implementations
Title required
specifies if the title is required
Title max length
specifies the title maximum length (characters); enable "Use title“ - see above;
maximum: 90 characters
Icon required
specifies if an icon is required
Image type
specifies the image type
Image min width
see chapter "About image width and height“ below
Image min height
see chapter "About image width and height“ below
Data required
specifies if data are required; enable "Use data“ - see above
Data max length
the maximum amount of characters for „Data“; enable "Use data“ - see above;
maximum: 140 characters
Sponsor label
specifies a text for a "sponsor" label (leave empty if not needed)
Sponsor label position
specifies the sponsor label position
Background color
specifies the background color
HTML code of the DOM node
code copied from the website's feed, in which the ad will be displayed; read more in the following chapter

About image width and height

Image min width

  • specifies the minimum width you accept;
  • images (served by DSPs) which are wider than this minimum width will be resized by the script template
  • together with the "Image min height" value (see below), the "Image min width" must respect one of the following aspect ratios 1:1, 4:3 or 1.91:1; this is mandatory, since RTB+ supports resizing for these aspect ratios only!
  • maximum widths by aspect ratio:
    aspect ratio 1:1 => max width: 1000px;
    aspect ratio 4:3 => max width: 1600px;
    aspect ratio 1.91:1 => max width: 1200px
  • Example: if the min. width is 720px, the min. height must be 720px (aspect ratio 1:1), or 540px (aspect ratio 4:3) or 377 (aspect ratio 1.91:1)

Image min height

  • specifies the minimum height you accept;
  • images (served by DSPs) which are higher than this minimum height will be resized by the script template
  • together with the "Image min width" value (see above), the "Image min height" must respect one of the following aspect ratios 1:1, 4:3 or 1.91:1; this is mandatory, since RTB+ supports resizing for these aspect ratios only!
  • see also example above

HTML code of the DOM node

The field HTML code of the DOM node is a mandatory field. To fill it, you have to

  • copy the code of an item in the feed of your website  - or
  • use the Smart Native Ad Studio to generate the code (see below)
  • format the code and replace the URLs/sources by macros
  • paste the code into the field HTML code of the DOM node

The native ad will then adopt the look and feel (CSS) of the other items in the feed.

Best practices

The HTML code is specific to a website. Things can become complicated If you have mutliple websites, each with its own feed style. For each website, you may need a separate insertion with the specific HTML as its creative.

Recommendations:
- Do not create separate script templates; when doing so, you lose Smart AdServer's updates to the script templates.
- Work with insertion copies (and group volumes to assign a shared volume) but try to set up your HTML code as generic as possible (work with variables etc.)

Smart Native Ad Studio

As an alternative to the following steps 1 to 4, you can use Smart AdServer's Native Ad Studio. This tool allows you to:

  • configure the native ad's position, colors, fonts, background, components etc.
  • generate the HTML code to be pasted into the field  HTML code of the DOM node

As a result, you receive a full native ad, which you can use right away or customize further.

Step 1: Get code from website

  • Go to the website with the feed where the native ad will appear
  • Open a web debugging tool, such as Chrome Developer Tools
  • Navigate to one of the items in the feed
  • Copy the outer HTML code of the item

Here is an example showing the item in the feed (1) and the code to be copied (2):

 

Step 1: Get code from website

Step 2: Format code

Format your code using a formatting tool, such as Freeformatter (available here)

Step 2: Format code

Step 3: Edit code

  • Copy the code retrieved from the formatter into a text editor, such as Notepad++.
  • Delete the URLs and sources from the code and replace them by Smart AdServer's macros (see List of macros below).

The following example shows the result after replacement of the URLs and sources by macros:

<div class="list_post" style="background-color:#[native_backgroundColor]"> <div class="image"> <a href="[native_clickUrl1]" target="[native_clickTarget1]"> <img style="opacity: 1;" src="[native_imageUrl1]" class="imgf" height="160" width="211"></a> </div> <div class="information"> <h2><a href="[native_clickUrl1]" target="[native_clickTarget1]">[native_title]</a></h2> <p style="margin-bottom:20px;">[native_description]</p> <span style="position: relative;color: #f63c44;line-height: 1.4em;margin-left: 271px;[native_sponsorLabelPosition]">[native_sponsorLabel]</span> </div> </div>

In this example you see that the URL of the first creative has been replaced by the macro [native_imageUrl1]. When the insertion will be delivered, the macro itself will be replaced by the path (URL) towards the creative.

If the code has single quotes ( ' ), replace them by double quotes ( ).

Step 4: Paste code

After preparation of the code, paste it into the field HTML code of the DOM node

Step 4: Paste code

List of macros

You can only use these macros in the field HTML code of the DOM node; you cannot use them in any other field!

The list shows the available macros and the fields, by which they will be replaced:

  • [native_title] - Title
  • [native_description] - Description
  • [native_clickTarget1] - Click target of creative #1
  • [native_clickTarget2] - Click target of creative #2
  • [native_clickTarget3] - Click target of creative #3
  • [native_clickUrl1] - click URL of creative #1
  • [native_clickUrl2] - click URL of creative #2
  • [native_clickUrl3] - click URL of creative #3
  • [native_imageUrl1] - URL of creative #1
  • [native_imageUrl2] - URL of creative #2
  • [native_imageUrl3] - URL of creative #3
  • [native_backgroundColor] - Background color
  • [native_sponsorLabel] - Sponsor label
  • [native_sponsorLabelPosition] - Sponsor label position
  • [native_customField1] - Custom field1
  • [native_customField2] - Custom field2
  • [native_customField3] - Custom field3
Was this article helpful?
1 out of 1 found this helpful
Powered by Zendesk