Anzeigen auf der Startseite - Prenly

Was ist das?

Mit Home Page Ads können Sie Anzeigen direkt im Layout Ihrer Homepage einblenden. Diese Anzeigen können zwischen Ihren bestehenden Komponenten als natürlicher Teil der Seite platziert werden. Der Inhalt der Anzeige wird über ein Skript definiert, das steuert, was dem Nutzer angezeigt wird.

Wie wird sie implementiert?

Um eine Landing Page-Anzeige zu erstellen, gehen Sie im linken Menü von Prenly Workspace auf Marketing und wählen Sie Anzeigen. Klicken Sie auf Neu und wählen Sie Neue Landing Page-Anzeige.

Benennen Sie Ihre Anzeige

Beginnen Sie damit, der Anzeige einen Namen zu geben. Dies ist ein interner Name, der Ihnen nur hilft, Ihre Anzeigen zu identifizieren und zu verwalten.

Wo auf der Homepage soll die Anzeige erscheinen?

Wählen Sie als Nächstes, wo die Anzeige auf der Homepage erscheinen soll. Sie können sie oben, unten oder zwischen bestehenden Komponenten platzieren. Wenn mehrere Anzeigen an der gleichen Stelle erscheinen sollen, können Sie deren Reihenfolge durch die Festlegung einer Priorität steuern.

Wann soll die Anzeige aktiv sein?

Legen Sie fest, wann die Anzeige geschaltet werden soll, indem Sie ein Start- und ggf. ein Enddatum wählen. Die Anzeige wird automatisch innerhalb dieses Zeitraums aktiviert und deaktiviert. Achten Sie darauf, dass Sie die richtige Zeitzone auswählen.

Inhalt der Anzeige

Als nächstes legen Sie fest, wie die Anzeige angezeigt werden soll, indem Sie ein Skript einfügen. Dieses Skript bestimmt den Inhalt der Anzeige. Ein Beispielskript finden Sie unten auf der Seite.

Welche Größe hat Ihre Anzeige?

Sie müssen auch das Verhältnis zwischen Höhe und Breite der Anzeige festlegen, indem Sie eine oder mehrere Größen angeben. Wenn nur eine Größe angegeben wird, wird dieses Verhältnis auf allen Geräten und in allen Ausrichtungen verwendet. Wenn mehrere Größen angegeben werden, dient die Breite als Haltepunkt, um das Layout entsprechend anzupassen (empfohlene Größen sind unten aufgeführt).

In welchen Anwendungen soll die Anzeige erscheinen?

Wählen Sie schließlich die Anwendung aus, in der die Anzeige erscheinen soll.

Wenn alles fertig ist, vergessen Sie nicht, die Anzeige von inaktiv auf aktiv zu schalten, damit sie sichtbar wird.

 

Beispiel-Skript

<Skript>
(function () {
var TAG = '[ta-ad]';
console.log(TAG, 'script running');

// Erfassen Sie den Einfügeanker sofort - document.currentScript ist der
// zuverlässige Methode, um in den meisten Anzeigenkontexten herauszufinden, "wo sich dieses Skript-Tag befindet".
var anchor = document.currentScript;
if (!anchor) {
var all = document.getElementsByTagName('script');
anchor = all[all.length - 1];
}
console.log(TAG, 'anchor:', anchor, 'parent:', anchor && anchor.parentNode);

// Schriftarten
var preconnect1 = document.createElement('link');
preconnect1.rel = 'preconnect';
preconnect1.href = 'https://fonts.googleapis.com';
document.head.appendChild(preconnect1);

var preconnect2 = document.createElement('link');
preconnect2.rel = 'preconnect';
preconnect2.href = 'https://fonts.gstatic.com';
preconnect2.crossOrigin = '';
document.head.appendChild(preconnect2);

var fontLink = document.createElement('link');
fontLink.rel = 'stylesheet';
fontLink.href = 'https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap';
document.head.appendChild(fontLink);

// Formatvorlagen (unter .ta-ad, um die Host-Seite nicht zu verunstalten)
var style = document.createElement('style');
style.textInhalt = [
'.ta-ad{position:relative;width:100%;height:100%;min-height:200px;overflow:hidden;cursor:pointer;background:#333;}',
'.ta-ad .ta-ad-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.5s ease-in-out;z-index:1;}',
'.ta-ad .ta-ad-bg.active{opacity:1;}',
'.ta-ad .ta-ad-text{position:absolute;left:10px;bottom:10px;right:auto;top:auto;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin:0;padding:0;font-family: "Merriweather",serif;font-optical-sizing:auto;font-style:normal;font-variation-settings: "wdth" 100;color:#fff;}',
'.ta-ad .ta-ad-text h1,.ta-ad .ta-ad-text h2{Hintergrund:#000000b8;padding:9px 16px;display:inline-flex;margin:0;line-height:1.2;}',
'.ta-ad .ta-ad-text h1{font-size:4vw;}',
'.ta-ad .ta-ad-text h2{font-size:2vw;min-width:8.4vw;}'
].join('');
document.head.appendChild(style);

// Auszeichnen
var container = document.createElement('div');
container.className = 'ta-ad';
container.addEventListener('click', function () {
window.open('https://www.textalk.se', '_blank');
});

var img1 = document.createElement('img');
img1.className = 'ta-ad-bg aktiv';
var img2 = document.createElement('img');
img2.className = 'ta-ad-bg';

var textWrap = document.createElement('div');
textWrap.className = 'ta-ad-text';
var h1 = document.createElement('h1');
h1.textContent = 'Dies ist eine Beispielanzeige!
var h2 = document.createElement('h2');
textWrap.appendChild(h1);
textWrap.appendChild(h2);

container.appendChild(img1);
container.appendChild(img2);
container.appendChild(textWrap);

// An der Stelle einfügen, an der sich das Skript-Tag befindet - es sei denn, das Skript befindet sich in // (einige Anzeigenplattformen injizieren Werbemittel, in denen nichts gerendert wird). // In diesem Fall oder wenn der Anker fehlt, auf zurückgreifen.
function mount() {
var parent = anchor && anchor.parentNode;
var inHead = parent && parent.nodeName === 'HEAD';
if (parent && !inHead) {
parent.insertBefore(container, anchor);
} else if (document.body) {
document.body.appendChild(container);
} else {
//das gibt es noch nicht - warte darauf.
document.addEventListener('DOMContentLoaded', mount);
zurückgeben;
}
console.log(TAG, 'container inserted into', container.parentNode && container.parentNode.nodeName, 'size:', container.offsetWidth, 'x', container.offsetHeight);
}
mount();

// Drehung
var images = [img1, img2];
var current = 0;
function loadInto(idx) {
var url = 'https://picsum.photos/1400/400?random=' + Date.now();
console.log(TAG, 'loading image', idx, url);
images[idx].onerror = function (e) {
console.warn(TAG, 'Bild konnte nicht geladen werden', idx, url, e);
};
images[idx].src = url;
}
function nextImage() {
var next = (current + 1) % images.length;
images[next].onload = function () {
console.log(TAG, 'Bild geladen', next);
images[next].classList.add('aktiv');
images[aktuell].classList.remove('aktiv');
aktuell = nächstes;
};
loadInto(next);
}
images[0].onload = function () { console.log(TAG, 'image loaded 0'); };
loadInto(0);
setInterval(nextImage, 5000);

// Uhr
setInterval(function () {
h2.textContent = new Date().toLocaleTimeString();
}, 500);
})();
< /script>

Beispiel: