Anzeigen auf der Startseite - Prenly

Was ist das?

Mit Startseiten-Ads können Sie Anzeigen direkt im Layout Ihrer Startseite 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 Startseiten-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 Startseiten-Anzeige.

Benennen Sie Ihre Anzeige

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

Wo auf der Startseite soll die Anzeige erscheinen?

Wählen Sie als Nächstes, wo die Anzeige auf der Startseite 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

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

  // Capture insertion anchor immediately — document.currentScript is the
  // reliable way to find "where this script tag lives" in most ad contexts.
  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);

  // Fonts
  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);

  // Styles (scoped under .ta-ad to avoid clobbering the host page)
  var style = document.createElement('style');
  style.textContent = [
    '.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{background:#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);

  // Markup
  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 active';
  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 = 'This is a sample ad!';
  var h2 = document.createElement('h2');
  textWrap.appendChild(h1);
  textWrap.appendChild(h2);

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

  // Insert where the script tag lives — unless the script is in  // (some ad platforms inject creatives into, where nothing renders).  // In that case, or if the anchor is missing, fall back to.
  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 {
      //doesn't exist yet — wait for it.
      document.addEventListener('DOMContentLoaded', mount);
      return;
    }
    console.log(TAG, 'container inserted into', container.parentNode && container.parentNode.nodeName, 'size:', container.offsetWidth, 'x', container.offsetHeight);
  }
  mount();

  // Rotation
  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, 'image failed to load', idx, url, e);
    };
    images[idx].src = url;
  }
  function nextImage() {
    var next = (current + 1) % images.length;
    images[next].onload = function () {
      console.log(TAG, 'image loaded', next);
      images[next].classList.add('active');
      images[current].classList.remove('active');
      current = next;
    };
    loadInto(next);
  }
  images[0].onload = function () { console.log(TAG, 'image loaded 0'); };
  loadInto(0);
  setInterval(nextImage, 5000);

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