Interstitielle Anzeige erstellen - Prenly

Bei Interstitial-Anzeigen handelt es sich um Anzeigen, die zwischen den Seiten einer Printpublikation eingefügt werden. Interstitial-Anzeigen werden dynamisch in das E-Paper eingefügt, ohne Teil der PDF-Datei zu sein oder in der gedruckten Version der Zeitung zu erscheinen.

Sie können jederzeit eine neue interstitielle Anzeige in Prenly Workspace erstellen. Bitte beachten Sie, dass für die Anzeige von interstitiellen Anzeigen bestimmte Systemvoraussetzungen erfüllt sein müssen.

Systemvoraussetzungen

HTML. Um Ihre Anzeige anzuzeigen, muss der Anzeigeninhalt mindestens ein Bild-Tag in HTML sein (jpg oder png).

HTTPS. Aufgrund von Sicherheitsbedenken muss jeder Link außerhalb der e-Solution im Papierlesemodus HTTPS verwenden, wenn es sich um interstitielle Anzeigen handelt.

Anklickbare Anzeige. Um eine Anzeige zu haben, die vom Leser angeklickt werden kann, muss das Bild-Tag von einem Anker-Tag umgeben sein.

Sie können Skripte von externen Anzeigenservern wie Google Ad Manager verwenden, um interstitielle Anzeigen dynamisch anzuzeigen, aber bedenken Sie, dass diese Art der erweiterten Integration gründlich getestet werden muss. Hierfür haben wir eine Reihe von Funktionen entwickelt, die weiter unten auf dieser Seite beschrieben werden.

Schritte zur Erstellung der Anzeige

Wählen Sie "Marketing" und dann "Anzeigen" im Menü auf der linken Seite.

1. Wählen Sie "Neu", um eine neue interstitielle Anzeige zu erstellen.

2. Geben Sie einen Namen für Ihre Anzeige ein. So können Sie die Anzeige in Zukunft leichter wiederfinden und in der Liste der Anzeigen suchen.

.

3. Geben Sie an, nach welcher Seite Ihre Anzeige angezeigt werden soll. Geben Sie eine kommagetrennte Liste von Seiten ein, damit Ihre Anzeige nach mehreren Seiten sichtbar ist. Die Anzeige wird zwischen nach der/den ausgewählten Seite(n) und vor der nächsten Seite angezeigt, d.h. statt der nächsten Seite wird Ihre Anzeige angezeigt und die nächste Seite wird nach der Anzeige angezeigt.

.

4. Wählen Sie ein Startdatum und legen Sie fest, ob die Anzeige bis zur manuellen Deaktivierung aktiv sein soll oder ob sie ein begrenztes Enddatum haben soll. Wählen Sie ein Enddatum, um Ihre Anzeige automatisch um Mitternacht am Tag nach dem eingegebenen Enddatum zu deaktivieren.

.

5. Hier gibt es Fachbegriffe!

Geben Sie ein HTML-Bild-Tag (<img>) ein, das zum Rendern Ihres Anzeigenbildes verwendet werden soll. Die Bildquelle(src-Attribut) muss aus Sicherheitsgründen das HTTPS-Protokoll verwenden.

Gültige Bildformate sind z. B. jpg und png.
Beachten Sie, dass PDF kein gültiges Format für Bilder ist.

Wenn Ihre Anzeige anklickbar sein soll, d. h. wenn Sie möchten, dass der Leser auf das Anzeigenbild klicken kann und zur Webseite des Inserenten weitergeleitet wird, umgeben Sie das Bild-Tag mit einem Anker-Tag (<a>), dessen Anker-Referenz(href-Attribut) ebenfalls das HTTPS-Protokoll verwenden muss.

Wählen Sie, ob Sie ein anderes Bild im Hoch- oder Querformat verwenden möchten. Sie müssen mindestens einen der beiden Modi auswählen, können aber auch beide wählen. Wenn Sie sich für einen der beiden Modi entscheiden, z. B. den Hochformatmodus, verwendet Prenly denselben Code für die Anzeige Ihrer Anzeige auf Handheld-Geräten im Querformat.

Was ist HTTPS? HTTPS ist eine verschlüsselte Kommunikation zwischen dem Webbrowser (Client) und dem Webserver und wird als "https://" bezeichnet.

Vergleichen Sie http://example.com/ und https://example.com/. Viele Webbrowser signalisieren, dass die Kommunikation über HTTPS verschlüsselt ist, indem sie ein Vorhängeschloss-Symbol in die URL-Leiste einfügen, um anzuzeigen, dass die Kommunikation sicher ist.

Warum benötigt Prenly HTTPS? Android verbietet das Öffnen von HTTP-Links aus einer App heraus. Aus diesem Grund verlangt Prenly, dass die in einer App vorhandenen Links HTTPS verwenden. Die Leser erhalten durch die Verwendung von HTTPS ein sichereres Leseerlebnis, da die Kommunikation verschlüsselt ist.

Prenly unterstützt JavaScript-Code, der es Ihnen ermöglicht, dynamische Anzeigeninhalte zu erstellen. Jedes gültige JavaScript wird akzeptiert, aber der Code muss nach der Ausführung ein Bild-Tag und optional ein umgebendes Anker-Tag enthalten.

Prenly wird Ihren Code nicht überprüfen. Es wird empfohlen, dass Sie Ihren Code auf einer HTML-Seite ausprobieren, bevor Sie Ihre Anzeige aktivieren.

Beispielcode für Bilder:

Portrait:

<a href="{INSERT-TARGET-URL}">
<img
src="{INSERT-IMAGE-SRC}"
alt="Anzeige"
width="1100"
height="1700"
style="display: block; width: 100%; max-width: 100vw; max-height: 100vh; object-fit: contain; margin: 0 auto;"
>
</a>

Landscape:

<a href="{INSERT-TARGET-URL}">
<img
src="{INSERT-IMAGE-SRC}"
alt="Anzeige"
width="1700"
height="1100"
style="display: block; width: 100%; max-width: 100vw; max-height: 100vh; object-fit: contain; margin: 0 auto;"
>
</a>

Beispielcode für MP4-Videos

Beachten Sie, dass H.264-kodierte Videos zwingend in Safari funktionieren müssen

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Annonen</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
background: #ffffff;
overflow: hidden; /* Scrollen verhindern */
-webkit-overflow-scrolling: touch; /* Wichtig für iOS */
}
.video-container {
Position: fixiert;
top: 0;
links: 0;
Breite: 100%;
Höhe: 100%;
Hintergrund: weiß;
Anzeige: flex;
justify-Inhalt: zentriert;
align-items: center;
overflow: hidden;
}
video {
max-width: 100%;
max-height: 100%;

}
</style>
</head>
<body>
<div class="video-container">
<video id="videoPlayer" src="[INSERT-MP4-SRC]" autoplay playsinline loop muted></video>
</div>
<script>
const video = document.getElementById('videoPlayer');
// Versuchen Sie, das Video auf iOS programmatisch zu starten
document.addEventListener('DOMContentLoaded', function() {
video.play().catch(function(error) {
console.log('Video konnte aufgrund von Einschränkungen nicht automatisch abgespielt werden:', error);
});
});
// Förhindra att iframens innehåll fångar svep
document.body.addEventListener('touchstart', function(e) {
if (e.target !== video) {
e.preventDefault(); // Nur verhindern, wenn die Berührung nicht auf dem Video ist
}
}, { passive: true });

// Klick auf das Video wird ausgelöst
video.addEventListener('click', function(e) {
e.preventDefault();
window.open('[INSERT-TARGET-URL}', '_blank');
});
</script>
</body>
</html>

.

Wenn Sie Javascript von einem Anzeigenserver verwenden, können Sie einige zusätzliche Funktionen nutzen, die im Web-Reader ab Mai 2025 und in der iOS-App ab Version 14.1.1 und in Android ab Version 12.10.0 verfügbar sind. Diese neuen Funktionen werden bisher (Mai 2025) von einem Kunden genutzt, der Google Ad Manager verwendet, und es liegt an Ihrer Integration mit Ihrem Anzeigenserver, auszuprobieren, was für Sie funktioniert.

Die neuen Funktionen ermöglichen es dem Anzeigenskript, die Zustimmungseinstellungen des Nutzers im PrenlyUserConsent-Objekt zu übernehmen. Mit dem PrenlyAd-Objekt ist es möglich, die App anzuweisen, eine leere Anzeige auszublenden und Informationen über die Baseurl und den Titelnamen zu erhalten. Siehe technische Details am Ende dieser Seite.

6. Wählen Sie aus, welche Anwendung Ihre Anzeige anzeigen soll.

.

7. Wählen Sie aus, welche Titel Ihre Anzeige anzeigen sollen.

.

8. Speichern Sie Ihre Einstellungen, indem Sie auf "Speichern" klicken. Wenn das Symbol nach dem letzten Satz farblich verschwommen ist, haben Sie einen Bereich nicht konfiguriert. Achten Sie bei jedem Abschnitt auf einen roten Plopp in der rechten Ecke. Wählen Sie den falsch konfigurierten Bereich aus und setzen Sie die Konfiguration von dort aus fort.

9. Aktivieren Sie Ihre Anzeige, indem Sie den Schalter in der oberen rechten Ecke umlegen. Wenn die Anzeige inaktiv ist, aktivieren Sie die Anzeige. Wenn die Anzeige aktiv ist, deaktivieren Sie sie.

Nur aktive Anzeigen können Ihren Lesern angezeigt werden, da Prenly sie zur Anzeige in der konfigurierten Anwendungspublikation und auf der Seite im Papierlesemodus sendet. Inaktive Anzeigen werden nicht angezeigt, wenn der Leser über die markierte Seite wischt.

.

.

10. Anzeige löschen. Wählen Sie das Drei-Punkte-Menü in der oberen rechten Ecke und wählen Sie "Anzeige löschen", um die aktuell ausgewählte Anzeige zu löschen. Die Anzeige wird aus dem Prenly Workspace entfernt. Wenn die Anzeige vor dem Löschen aktiv war, wird die Anzeige zunächst deaktiviert, bevor sie gelöscht wird.

Wählen Sie das Video unten aus, um zu sehen, wie Sie eine interstitielle Anzeige als Videoanleitung erstellen.

Integration mit externen Anzeigensystemen

Es ist möglich, interstitielle Anzeigen von externen Anzeigensystemen dynamisch über Javascript zu laden. Wir haben einige fortschrittliche Zusatzfunktionen für einen Publisher entwickelt, der Google Ad Manager verwendet, aber sie können wahrscheinlich auch von anderen Anzeigenservern genutzt werden. Diese Funktionen erfordern einen guten Einblick in Ihr Anzeigensystem und dessen Fähigkeiten sowie Kenntnisse in Javascript und sind möglicherweise nicht für jeden geeignet.

PrenlyAd

Das PrenlyAd-Objekt enthält die Funktion "collapseAd", die Sie in Ihrem Skript verwenden können, um die App zu benachrichtigen, einen Anzeigenplatz auszublenden, wenn das Anzeigensystem keine Anzeige liefern kann. Anstatt einen leeren Anzeigenplatz anzuzeigen, wird dann der gesamte Anzeigenplatz ausgeblendet.

Sie können die "baseUrl" und "titleSlug" von der Position der Anzeige im E-Paper erfassen, um eine virtuelle URL im Skript zu erstellen, mit der Sie Ihre Anzeige vom Anzeigensystem so ausrichten können, dass sie in einem bestimmten Titel in einer App erscheint.

Beispiel für die Erstellung einer virtuellen URL, die für das Targeting verwendet werden kann.
url = window.PrenlyAd.baseUrl + "/p/" + window.PrenlyAd.titleSlug;

window.PrenlyAd = {
collapseAd: function // Funktion, die aufgerufen werden soll, um der nativen Anwendung mitzuteilen, dass die Anzeige zugeklappt wurde
titleSlug: string // Titel-Slug, der den Titel identifiziert, mit dem die interstitielle Anzeige verknüpft ist
baseUrl: string // Basis-Url der App
}

PrenlyUserConsent

Mit dem PrenlyUserContent-Objekt können Sie die Zustimmungseinstellungen des Benutzers erfassen und anhand dieser bestimmen, ob Sie dynamische Anzeigen von Dritten (wenn die Zustimmung zu Anzeigen vorliegt) oder interne statische Anzeigen (wenn die Zustimmung verweigert wird) laden möchten.

Das Objekt enthält Parameter zur Übergabe der Auswahl des Nutzers aus dem CMP-Dialog und den TC-String, falls vorhanden.

In Fällen, in denen die iOS-App über eine ATT-Eingabeaufforderung (App Tracking Transparency) verfügt, die manchmal von Apple verlangt wird, wird der Parameter "att_granted" mitgesendet.

window.PrenlyUserConsent = {
cmp: string, // CMP-Modulname
cmp_vendor_grants: dictionary?, // Wörterbuch mit Informationen zu den Herstellerzuschüssen, falls verfügbar
cmp_purpose_grants: dictionary?, // Wörterbuch mit Zweckzuweisungen, falls der CMP-Anbieter diese unterstützt
prenly_purpose_grants: dictionary?, // nur verfügbar, wenn die Anwendung Prenly CMP als Anbieter verwendet
tc_string: string, // TC-String, wenn CMP-Anbieter dies unterstützt
att_granted: boolean // nur wenn App ATT konfiguriert hat
}