Annonser på startsidan

Vad är det? 

Med startsideannonser kan du visa annonser direkt i din startsidas layout. Dessa annonser kan placeras mellan dina befintliga komponenter som en naturlig del av sidan. Annonsens innehåll definieras via ett skript som styr vad som visas för användaren.

Hur implementeras det?

För att skapa en startsideannons går du till Marknadsföring i menyn till vänster i Prenly Workspace och väljer Annonser. Klicka på Ny och välj Ny startsidesannons.

Namnge din annons

Börja med att ge annonsen ett namn. Detta är ett internt namn som endast används för att hjälpa dig att identifiera och hantera dina annonser.

Var på startsidan ska annonsen visas? 

Välj sedan var annonsen ska placeras på startsidan. Du kan placera den högst upp, längst ner eller mellan befintliga komponenter. Om flera annonser är tilldelade samma position kan du styra deras ordning genom att ange en prioritet.

När ska annonsen vara aktiv? 

Ange när annonsen ska visas genom att välja ett startdatum och, om det behövs, ett slutdatum. Annonsen aktiveras och inaktiveras automatiskt utifrån detta tidsintervall. Se till att välja rätt tidszon.

Annonsinnehåll

Ange sedan hur annonsen ska visas genom att klistra in ett skript. Detta skript bestämmer annonsens innehåll. Längst ner på sidan hittar du ett exempelskript. 

Vilka storlekar har din annons?

Du måste också ange förhållandet mellan annonsens höjd och bredd genom att ange en eller flera storlekar. Om endast en storlek anges kommer det förhållandet att användas på alla enheter och i alla orienteringar. Om flera storlekar anges kommer bredden att fungera som en brytpunkt för att anpassa layouten därefter. (Rekommenderade storlekar anges nedan.)

I vilka applikationer ska annonsen visas?

Välj slutligen den applikation där annonsen ska visas.

När allt är klart, glöm inte att växla annonsen från inaktiv till aktiv för att göra den synlig.

Exempel:

Exempelskript

< 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>