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 "In-Feed Native Ad"

Script template "In-Feed Native Ad"

 

  • Create a Web insertion as described in the Quick guide; make sure you select the insertion type Web
  • On the Creatives Tab, open the Template library (as described in the Quick guide) and select the script template "In-Feed Native Ad"
  • Upload the image creative(s) defining the click URL for each creative; maximum: 3 creatives

Script template parameters

Script template parameters

(1) Title - specifies the title
(2) Description - specifies the description text
(3) Sponsor label - specifies a text for a "sponsor" label (leave empty if not needed)
(4) Sponsor label position - specifies the position of the sponsor label (bottom right, by default)
(5) Background color -  specifies a background color of the sponsored content (#ffffff by default)
(6) Tracking URL - specifies a third party impression tracking URL
(7), (8), (9), (10) Custom fields - specify additional text for the native ad (optional)
(11) 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
(12) Place of the ad - positions the ad on the page; default: Smart tag; in case of options other than Smart tag, the next field Identifier(s) is mandatory
(13) Identifier(s) - specifies one or more identifiers of elements (separated by semicolon), where the ad will be placed; mandatory when Place of the ad is not Smart Tag
(14) Paragraph type - specifies the type of paragraph (p, div,...) inside the specified article; default: p; only taken into account if Place of the ad is automatically in article

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
  • 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 first creative in your insertion.

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

Example 1: Dynamic native ads using keywords

Example 1: Dynamic native ads using keywords

You can pass dynamic data from the website and display them in the native ad. In the example above, a price information (879000 €) has been attached to the ad call; when the ad is served, the price is displayed within the native ad: "The price is 879000 €"

To pass dynamic data into the native you need to use keywords (read the Using keyword targeting article for more about keywords).

Proceed as follows:

  • attach the keyword in key=value format to the ad call (e. g. price=87900)
  • use the macro [sas_kw|KeyName] in the HTML code of the DOM field (e. g.: [sas_kw|price])

=> When delivering the native ad, the macro [sas_kw|KeyName] will be replaced by the value of the key. In the example above, the value is "879000"

 

Example 2: Text-only Native ads

In case of "text-only" native ads (no images), you may want to count and report the clicks. For this case, proceed as follows:

  • do not upload any image creatives into the insertion
  • instead, create a click command in the insertion (read here to learn how to create a click command); leave the click command disabled (red background)
  • retrieve the click command's URL and use it in the HTML code of the DOM node field as a click URL for the native ad
Was this article helpful?
2 out of 2 found this helpful
Powered by Zendesk