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
|Third party pixels URLs
||specifies third party impression counting URLs (in case of multiple URLs, separate them by a comma)
||specifies if the native ad has a title
||specifies if the native ad has an icon
||the "data“ field is used for miscellaneous elements of the native ad (e. g. brand name, ratings, descriptions etc.); see below: "Data max lenght“
||the layout of the environment where the native ad is displayed; to be deprecated: not recommended in case of new implementations
||specifies the ad unit as specified in the IAB native advertising playbook; to be deprecated: not recommended in case of new implementations
||specifies if the title is required
|Title max length
||specifies the title maximum length (characters); enable "Use title“ - see above;
maximum: 90 characters
||specifies if an icon is required
||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
||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
||specifies a text for a "sponsor" label (leave empty if not needed)
|Sponsor label position
||specifies the sponsor label position
||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.
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.
- 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 2: Format code
Format your code using a formatting tool, such as Freeformatter (available here)
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
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