Voraussetzungen
Die NetPoint Integration setzt voraus, dass als CMP der consentmanager.de verwendet wird. Die Accounts und Integrationscodes dafür bekommen wir direkt von NetPoint (im Rahmen des Vermarktungsvertrages). Diese sind Domain/VHost spezifisch und gehören in den HEAD-HTML Bereich des VHosts.
Das portalinterne CMP muss deaktiviert sein und es wird (optional) das Consentmanager.de Plugin verwendet. (PSCP-460)
Integration ins Portal
Im HEAD-HTML Bereich des jeweiligen VHosts muss nach dem Consentmanager Code das NetPoint Head-Script stehen. Dieses ist ebenfalls Domain/VHost spezifisch!
<!--Async Tag // place this into <head></head> of website -->
<script type='text/javascript'>window.ADNPM = window.ADNPM || {};ADNPM.cmd = ADNPM.cmd || [];</script>
<script type='text/javascript' src='https://cdn.netpoint-media.de/01234567.js' async='async'></script>
<!-- Beachte: 01234567.js - diese ID ändert sich je Domain / Kunde! -->
JS-Event beim Seitenwechsel
Damit die NetPoint Scripte den Seitenwechsel innerhalb der SPA (PS.Content #Portal) einfacher erkennen können kann ihnen ein Seitenwechsel mittels folgendem Code kommuniziert werden:
<!-- NetPoint: Page Reload Trigger --> <script type="text/javascript"> if(ADNPM.pageLoad) ADNPM.pageLoad(); </script>
Ad-Tags
Die Anzeigen werden durch Ad-Tags eingebunden. Das NetPoint Head-Script sucht diese bei jedem Seitewechsel und tauscht diese durch passende Anzeigen.
Diese können wahlweise in die Restplatzvermarktung (VHost) oder direkt in HTML-Source Komponenten der jeweiligen Rahmen-/Seiten-/Artikel-Templates oder Formulare eingebaut werden.
Beachte: Bei manchen Tags ist es sinnvoll, einen Bootstrap "container" als Parent zu haben, damit diese nicht aus dem Layout raus ragen und passend zentriert werden!
<!--Banner Tag // Website: xxx.DE // Adslot: netpoint_layer // Layer, Interstitials, FloorAds // nur *einmal* einbinden --> <div class='netpoint_layer'></div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_inimage // in image Anzeigen // nur *einmal* einbinden --> <div class='netpoint_inimage'></div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_rectangle // 300x250 // mehrfach einbinden --> <div class="container"><div class='netpoint_rectangle'></div> </div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_halfpage // 300x600 ODER 300x250 // mehrfach einbinden --> <div class="container"><div class='netpoint_halfpage'></div> </div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_topbanner // 728x90, 800x250, 970x250 // nur *einmal über dem Content* einbinden --> <div class="container"><div class='netpoint_topbanner'></div> </div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_outstream // Video-Outstream, 300x250 // nur *einmal* einbinden --> <div class="container"><div class='netpoint_outstream'></div> </div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_skyscraper // 160x600, 300x600 // nur *einmal rechts neben Content* einbinden --> <div class='netpoint_skyscraper'></div> -------------------------------------------------------------------------------- <!--Banner Tag // Website: xxx.DE // Adslot: netpoint_banner // 300x250, 728x90, 800x250 // mehrfach im Content einbinden --> <div class="container"><div class='netpoint_banner'></div> </div> -------------------------------------------------------------------------------- <!-- Kombi: Banner auf Desktop+ und Rectangles bei allem, was kleiner ist --> <div class="container"> <div class='d-none d-md-block netpoint_banner'></div> <div class='d-md-none netpoint_rectangle'></div> </div>
Erklärung & ROI Anzeigenformate
| Format | Wertigkeit | Anmerkung |
|---|---|---|
| netpoint_layer | 1 | Erzeugt layer oder floor ads. |
| netpoint_topbanner | 2 | Erkennung, ob er mobile oder desktop ausgeliefert werden muss wird anhand des user-agent getroffen. |
| netpoint_inimage | 3 | Muss beim NetPoint Setup ggfs. "abbestellt" werden. Erst danach kann es per Tag aktiviert werden. |
| netpoint_halfpage | 3 | |
| netpoint_rectangle | 4 | |
| netpoint_skyscraper | 2 | |
| netpoint_outstream | 1 | |
| netpoint_vignette | 1 | Mobil per Default an / Desktop per Default aus. Muss beim NetPoint Setup gffs. geändert werden. |
ROI in Schulnoten 1=Hochwertig
Skyscraper / Hochformatbanner
Um den NetPoint Syscraper an die richtige Stelle zu bekommen, wird ein Anzeigenplatz "Hochformatbanner" an der gewünschten Stelle im Rahmentemplate untergebracht. NetPoint geht immer davon aus, dass der Skyscraper RECHTS steht.
In der Restplatzvermarktung wird der og. Banner-Tag eingefügt (ohne Container!). Der Anzeigenplatz muss ggfs. noch aktiviert werden. (→ Portal Stammdaten!)
Testmodus
Da (gerade in Staging Systemen) nicht immer Anzeigen für die Plätze gefunden werden, empfiehlt es sich, die Ad-Scripte in den Testmodus zu versetzen. Dafür wird an die URL (hinten) folgender Parameter angefügt:
?npkey_bannertest=standards
Anzeigenkennung und weitere CSS
Folgende CSS fügen allen NetPoint Anzeigen entsprechende Kennungen hinzu und korrigieren kleinere Style-Fehler.
/**
NetPoint Styling for PSCP
**/
/** adds ad markers to the netpoint delay loaded ads **/
.netpoint_outstream,
.netpoint_banner,
.netpoint_topbanner,
.netpoint_rectangle
{
position: relative;
}
/** only display the marker, if the container was filled by netpoint **/
.netpoint_outstream:not(:empty)::after,
.netpoint_banner:not(:empty)::after,
.netpoint_topbanner:not(:empty)::after,
.netpoint_rectangle:not(:empty)::after {
content: "";
position: absolute;
bottom: calc(100% + 1px);
width: 100%;
height: var(--pscp-media-header-height);
background-size: contain;
}
/** ad marker image + position **/
.netpoint_topbanner::after,
.netpoint_outstream::after,
.netpoint_rectangle::after,
.netpoint_banner::after {
background: var(--pscp-media-label-url) no-repeat center;
}
/** NetPoint style fixes that might be deprecated later... **/
/** fixes the ad marker being inside the ads **/
.netpoint_skyscraper {
margin-top: 15px;
}
/** adjust width and padding of the rectangles to fit netpoint sizing (they are larger than HUP defaults) **/
.media-buttons {
--article-button-media-width: 350px;
margin-left: -20px;
}