Autonative

Kurze Übersicht (Auto)Native Produkte

 

andeutsch

Die blau hinterlegten Produkte werden über den Adserver der eMS erstellt und Ausgespielt. Für mehr Informationen zu den Produkten, technischen Spezifikationen und dem benötigten Material  kontaktieren Sie bitte das G+J eMS Brand Management.

 

Voraussetzung: HTML Template Seiten erstellen

 

Für die Auslieferung von Native Produkten müssen  Template Seiten erstellt werden, die sich an Aufbau und Design der restlichen Seite orientiert. Jeweils eine Version für die Indexseite und einer Artikelseite mit eigener URL. Beide Versionen werden in einer neutralen Rubrik der Seite erstellt und die URL zur Verfügung gestellt.

 

  1. Artikel (für Native Advertorial, Native Special Artikel und Branded Advertorial)
    1. Artikel-Elemente (die im Template vorhanden sein müssen)
      1. Spezial-Überschrift als übergreifender Header (mit vorhandenen Verlinkung, wohin ist egal)

      2. Kennzeichnung: "Anzeige"

      3. Spitzmarke (optional)

      4. Headline des Artikels

      5. Vorspann des Artikels bzw. Einleitungs-Text

      6. Aufmacherbild

        1. Bildunterschrift

        2. Copyright: "©" + copyright

      7. Artikeltext (gefüllt mit "Text")

      8. Teaserblock unterhalb des Artikels, bestehend aus:

        1. Kennzeichnung: "Anzeige"
        2. Spitzmarke, Headline, Teaserbild, Vorspann-Text (Spitzmarke und Vorspann-Text sind optional, je nachdem wie redaktionelle Teaser aussehen)
    2.  Beispiel
      1. Template für die Aritkel-Seite, auf brigitte.de, Rubrik in einer neutralen Rubrik: https://www.brigitte.de/native/1234567890-13043288.html
  2. Index-Seite (für Native Special Index-Seite)
    1. Index-Seiten-Elemente (die im Template vorhanden sein müssen)
      1. Spezial-Überschrift

      2. Kennzeichnung: "Anzeige"

      3. Teaserblock, mit einzelnen Teasern, bestehend aus:

        1. Kennzeichnung: "Anzeige"
        2. Spitzmarke, Headline, Teaserbild, Vorspann-Text (Spitzmarke und Vorspann-Text sind optional, je nachdem wie redaktionelle Teaser aussehen)
    2.  Beispiel
      1. Template für die Index-Seite, auf brigitte.de, Rubrik in einer neutralen Rubrik: https://www.brigitte.de/native/

 

 

Voraussetzung: GujAd im HTML Template

 

In den Template Seiten muss die GujAd ebenfalls implementiert sein und mit der Zone „_noad“ versehen werden. Das ist notwendig, damit hier keine Rotationswerbung erscheint. Die Zone wird bei Ausspielung einer nativen Integration durch eine Spezialzone überschrieben.

 

Elemente im <head>-Block der Site 

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

Zusätzlich werden auf der Seite einige der AdSlots benötigt, damit auch hier Sponsoring Teaser ausgespielt werden können. Dies sind superbanner_1, skyscraper_1 und wallpaper_1. Auf der mobilen Seite mobile_1.

 

 

Voraussetzung: Höhenanpassungs-Script im HTML Template

 

Damit bei der Implementierung von iFrames die dynamische Höhenanpassung funktioniert, muss folgendes Script in die HTML-Templates eingebunden werden:

  1. Skript für die dynamische Höhenanpassung

Voraussetzung: Autonative Mapping Script im HTML Template

 

Die Inhalte und Bestandteile werden ebenfalls über den Adserver und ein CMS ausgeliefert. Damit die richtigen Inhalte an der vorgesehenden Stelle erscheinen wird eine Mapping in der Seite erstellt, der die Bestandteile über die Keys den jeweiligen CSS Selektoren zuweist. Dadurch bekommen die Elemente die Styles der jeweiligen Seite

 

Aufbau des 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 für eine Indexseite

 

AdServer-Auszeichnung

Element auf Site-Ebene
'ems-native-adlabel' Anzeigen-Kennzeichnung im Header
'ems-native-overallheadline' Überschrift des Spezials im Header
'ems-native-backlink' (optional) Verlinkung der Überschrift des Spezial
'ems-native-teaserwrapper' Teaserblock auf der Seite
  • 'ems-native-teasercontainer'
 ein einzelner Teaser innerhalb des Teaserblocks, die folgenden Elemente müssen im Teaser vorhanden sein:
  • 'ems-native-teaseradlabel'
 Anzeigen-Kennzeichnung des Teasers auf der Index-Seite
  • 'ems-native-teasersubheadline'
    (optional)
 Spitzmarke des Artikels (innerhalb des Teaser-Container)
  • 'ems-native-teaserheadline'
 Artikel-Überschrift des Teasers auf der Index-Seite
  • 'ems-native-teaserimage'

Teaserbild des Artikels (innerhalb des Teaser-Container)
  • 'ems-native-teaserlink'

Verlinkung auf den Artikel (innerhalb des Teaser-Container)
  • 'ems-native-teasertext' (optional)
  Teasertext des Artikels (innerhalb des Teaser-Container)

 

**nicht verwendete Keys bitte weglassen oder auskommentieren**

 

 

Native Mapping für eine Artikelseite

AdServer-Auszeichnung

Element auf Site-Ebene
'ems-native-adlabel' Anzeigen-Kennzeichnung im Header
'ems-native-overallheadline' Überschrift des Spezials im Header
'ems-native-backlink' Verlinkung der Überschrift des Spezial im Header
'ems-native-subheadline'(optional)
 Spitzmarke des Artikels
'ems-native-headline' Artikel-Überschrift
'ems-native-mainimage' Aufmacherbild des Artikels
'ems-native-imagetext' Bildunterschrift des Aufmacherbildes
'ems-native-copyright' Copyright in der Bildunterschrift des Aufmacherbildes
'ems-native-headlinetext' Teasertext
'ems-native-articletext' Artikeltext
'ems-native-teaserwrapper' Teaserblock am Ende des Artikels
  • 'ems-native-teasercontainer'
 ein einzelner Teaser innerhalb des Teaserblocks, die folgenden Elemente müssen im Teaser vorhanden sein:
  • 'ems-native-teaseradlabel'
 Anzeigen-Kennzeichnung im Teaser unter dem Artikel
  • 'ems-native-teasersubheadline' (optional)
 Spitzmarke des Artikels (innerhalb des Teaser-Container)
  • 'ems-native-teaserheadline'
 Artikel-Überschrift des Teasers
  • 'ems-native-teaserimage'
 Teaserbild des Artikels (innerhalb des Teaser-Container)
  • 'ems-native-teaserlink'
 Verlinkung auf den Artikel (innerhalb des Teaser-Container), sind Teaser-Container und Teaserlink identisch so setzt man hier <current ein
  • 'ems-native-teasertext' (optional)
  Teasertext des Artikels (innerhalb des Teaser-Container)
'ems-native-special-elements' alle Elemente die ausgeblendet werden sollen, wenn es nur einen Artikel gibt
'ems-native-remove-sidebar' wenn im adServer "Sidebar entfernen" ausgewählt wird werden diese Elemente ausgeblendet
'ems-native-content-without-sidebar' definiert die Elemente, die angezeigt werden sollen, wenn im adServer der Kunden-Inhalt als iFrame angelegt wird (z.B. beim Produkt Branded Advertorial)
'ems-native-iframe-hide' Elemente die ausgeblendet werden, wenn im adServer der Kunden-Inhalt als iFrame hochgeladen wird

**nicht verwendete Keys bitte weglassen oder auskommentieren**

 

 

 

Testen der Implementierung

 

Im Adserver sind dauerhaft Testkampagnen geschaltet, die mit Hilfe der u.g. URL Parametern abgerufen und in die Seite geladen werden können. Dadurch lässt sich das Mapping sehr einfach testen.

 

Indexseiten:

?an=s:spezial_2019019418_gesamttest_jub-a:1-t:i

 

Artikelseiten:

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

 

 

 

Hier zur Veranschaulichung am Beispiel von Brigitte.de: