Autonative

Overview (Auto)Native Products

anoverview

Blue marked products are delivered via the eMS ad server. For more information on products, technical specifications and futher requirements, please contact G+J eMS Brand Management.

 

Requirement:  Providing HTML template pages

 

For the delivery of native products, template pages must be created mirroring the structure and design of the entire page. One version each for the index page and one article page with its own URL. Both versions are created for each section of the page and the URL is provided.

 

Example:

https://www.xyz.com/index1/autonative/

https://www.xyz.com/index1/autonative/article12345

 

Requirement:  GujAd implementation

 

GujAd must be implemented in the template pages as well providing the zone "_noad". This is necessary to prevent rotational ads from appearing here. The zone is overwritten by a special ad server zone when a native integration is delivered.

 

Elements in the <head>-block 

 

<script>
  var GujAd = GujAd || {};
 	GujAd.cmd = GujAd.cmd || [];
        GujAd.cmd.push(function () {
              GujAd.getClient().setSiteType('desktop, mobile or tablet’);
              GujAd.getClient().setZone('_noad');
              });
</script>

Additionally, some of the ad slots are required on the site, so that sponsoring teasers can also be played here. This should be superbanner_1, skyscraper_1 and wallpaper_1. In the mobile view the top banner mobile_1 needs to be implemented.

 

Find the complete Implementation guide HERE

 

Requirement:  Autonative mapping script

 

The components are also delivered via ad server and a CMS. For placing the components to the intended place, a mapping in the page is required, which assigns the components to the respective CSS selectors via the keys. This gives the elements the styles of the respective page

 

General structure of the eMS Native Mapping:

var autoNative = autoNative ||{};
autoNative.mapping = {
     'key': 			'css-Selektoren',
     'key': 			'css-Selektoren',
     'key': 			'css-Selektoren',
      z.B.
     'ems-native-headline': 	'.a-h2-headline',
     'ems-native-mainimage': 	'.m-single-image__wrapper img',
     'ems-native-imagetext': 	'.m-single-image__caption .rtf-content-wrapper p',

};

 

 

Native mapping for index page

(bold marked keys are obligatory)

 

'ems-native-adlabel': header ad label
'ems-native-presentership-icon': presenter-logo
'ems-native-overallheadline':  special headline in breadcump
'ems-native-mainimage': lead image
'ems-native-imagetext':  lead image headline
'ems-native-copyright':  lead image copyright label 
   
'ems-native-teaserwrapper':  bottom teaserblock image (only one possible)

 

An example teaser must be created inside the wrapper. The eMS tag control native module duplicates this in the necessary number and deliver them within the teaser wrapper. The teaser should contain the following elements:
'ems-native-teasercontainer':  teaser link
'ems-native-teaserlink':  "<current" -> indicates which a-tags define the teaser's link. If teaser container and teaser link are identical, <current is used here
'ems-native-teaserheadline':  teaser Headline
'ems-native-teasersubheadline': teaser landmark
'ems-native-teaserimage':  teaser image
'ems-native-teaseradlabel':  teaser ad label
'ems-native-teaserpresentership-name‘: teaser presentership label
 /* end of teaser

 

  
'ems-native-presentership-name':  presenter label header 
'ems-native-presentership':  ['.decorator'] -> HTML element, enclosing presentership name resp. presenter icon
'ems-native-backlink': headline link
'ems-native-indeximage':  index image
'ems-native-indexteasertext':  '.teaser-list-of-special_stage_teaser .text p'  -> index introductory text
'ems-native-special-elements':  ['.breadcrumb li:nth-of-type(3)', '.o-teaser-block__headline', '.o-section-header']  -> HTML elements to be hidden, if there is only one article
'ems-native-remove-sidebar‘:  remove sidebar
'ems-native-content-without-sidebar‘:  remove sidebar for iframes 
'ems-native-iframe-hide‘:  site elements to be set display=none when delivering iframes

 

**Please omit or comment out unused keys**

 

 

 

 

 

Native mapping for article page

(bold marked keys are obligatory)

 

'ems-native-adlabel': header ad label
'ems-native-presentership-icon': presenter-logo
'ems-native-headline':  special headline in Breadcump
'ems-native-subheadline':  article landmark
'ems-native-mainimage': lead image
'ems-native-imagetext':  lead image subheadline
'ems-native-socialbar':  socialbar in article
'ems-native-copyright':  lead image copyright label 
'ems-native-headlinetext':  article headline
'ems-native-articletext':  article text
   
'ems-native-teaserwrapper':  bottom teaser block (only one possible)
  

An example teaser must be created inside the wrapper. The eMS tag control native module duplicates this in the necessary number and deliver them within the teaser wrapper. The teaser should contain the following elements:
'ems-native-teasercontainer':  teaser link
'ems-native-teaserlink':  "<current": indicates which a-tags define the teaser's link. If teaser container and teaser link are identical, <current is used here
'ems-native-teaserheadline':  teaser headline
'ems-native-teasersubheadline': teaser landmark
'ems-native-teaserimage':  teaser image
'ems-native-teaseradlabel':  teaser ad label
'ems-native-teaserpresentership-name': teaserpresentership label
 /* end of teaser

 

  
'ems-native-presentership-name':  presenter label header
'ems-native-presentership':  ['.decorator'] -> HTML element, enclosing presentership name resp. presenter icon
'ems-native-overallheadline':  special header / breadcrumb headline
'ems-native-backlink': headline link
'ems-native-indeximage':  index image
'ems-native-special-elements':  ['.breadcrumb li:nth-of-type(3)', '.o-teaser-block__headline', '.o-section-header']  -> HTML Elements to be hidden, if there is only one article
'ems-native-remove-sidebar':  removing sidebar
'ems-native-content-without-sidebar':  remove sidebar for iframes 
'ems-native-iframe-hide':  site elements to be set display=none when delivering iframes

 **Please omit or comment out unused keys**

 

  

 

 

Testing the native implemention

 

The ad server permanently runs test campaigns, which can be called up and loaded into the site with the help of the URL parameters listed below. This makes mapping very easy to test.

 

Index pages:

?an=s:spezial_1234567_nativespecial_br-t:i

 

Article pages:

?an=s:spezial_1234567_nativespecial_br-a:1-t:n

 

 

For illustration using the example Brigitte.de:

 

template index page:                           

https://www.brigitte.de/beauty/autonative/

 

template index page with test campaign:

https://www.brigitte.de/beauty/autonative/?an=s:spezial_1234567_nativespecial_br-t:i

 

 

template article page

https://www.brigitte.de/beauty/autonative/1234567890-10877310.html

 

template article page with test campaign:

https://www.brigitte.de/beauty/autonative/1234567890-10877310.html?an=s:spezial_1234567_nativespecial_br-a:1-t:n