Insticksannonser - Prenly

Insticksannonser är annonser som skjuts in mellan replicasidor i en Prenly-utgåva. Insticksannonser adderas dynamiskt till e-tidningen utan att finnas med i PDF eller i den tryckta versionen av tidningen.

Du kan när som helst skapa en ny eller administrera en äldre insticksannons i Prenly Workspace.

Krav

HTML. Det minsta du behöver göra för att Prenly skall kunna visa din annons är att ange en bildtagg i HTML i annonsinnehållskonfigurationen.

HTTPS. På grund av säkerhetsskäl behöver din annonsbildkälla använda HTTPS för att annonsen skall kunna visas i din e-tidning.

Klickbar annons. Om du önskar att din annonsbild skall vara klickbar för läsaren behöver du omringa bildtaggen i en länktagg.

Du kan använda script från externa annonsservrar som Google Ad Manager för att dynamiskt visa insticksannonser men tänk på att denna typ av avancerade integrationer behöver testas ordentligt. För detta har vi utvecklat ett antal funktioner som beskrivs längre ner på denna sida.

Så här gör du

I vänstra sidomenyn i Prenly Workspace välj marknadsföring och därefter annons.

1. Skapa en ny insticksannons genom att välja "Nytt".

2. Namnge din annons. Läsarna kommer inte se detta namn, utan det används endast som möjlighet att du i framtiden skall kunna söka upp din annons bland övriga annonser i annonslistan.

3. Ange efter vilken/vilka sidor din annons skall visas. Om du önskar flera sidor separerar du dem med kommatecken. Annonsen kommer att visas efter angiven sida och innan nästkommande tidningsuppslag visas.

4. Välj det datumintervall annonsen skall visas. Du kan välja att ange ett startdatum och sedan ha annonsen aktiv tills vidare eller välja ett bestämt datumintervall genom att ange ett start- och slutdatum. Om du väljer det sistnämnda kommer annonsen att bli inaktiv efter angivet slutdatum. Annars behöver du besöka annonsen igen för att inaktivera den.

5. Nu blir det tekniskt! Ange giltig HTML i form av en bildtagg (<img>). Bildkällan (src-attributet) måste använda HTTPS av säkerhetsskäl.

Giltiga bildformat är ex jpg och png.
Notera att PDF inte är ett giltigt format för bilder.

Välj om du önskar annan bild på porträtt- och landskapsläge. Du måste ange en av dessa, men endast en är ett krav. Väljer du t.ex. att ange innehåll för porträtt men utelämna landskapsläge kommer Prenly använda samma innehåll för att visa din annons oavsett om läsaren läser i porträtt- eller landskapsläge.

För att göra en klickbar annonsbild, alltså att läsarna kan klicka-på-bild och tas till önskad annonsplats, behöver du även lägga in en länktagg (<a>) som omringar din bildtagg. Länkmålet (href-attributet) måste använda HTTPS av säkerhetsskäl.

Vad är HTTPS? HTTPS är krypterad kommunikation med webbadresser och protokollet anges som "https://".

Jämför http://example.com/ och https://example.com/. Många webbläsare lägger på ett hänglås i webbaddressfältet för att indikera att det är en HTTPS-anslutning.

Varför krävs HTTPS? Av säkerhetsskäl kan Android endast öppna säkra länkar och därmed skall alla länkar som lämnar e-tidningen använda HTTPS, detta även om du endast har en webbapp. Det ger även en säkrare upplevelse för dina läsare.

För att få en dynamisk annons, en som t.ex. ändrar innehåll, behöver du använda dig av JavaScript. JavaScript accepteras men skriptet måste vid exekvering ge en bildtagg och eventuellt en omringande länktagg.

Prenly kommer inte validera din HTML-kod. Det rekommenderas att du testar din kod i en HTML-sida.

Exempelkod för bild:

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

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

Storleken på annonserna går att testa sig fram med. Rekommendationen är att de ska följa ert format.

Exempelkod för video (mp4):

H.264 encodade videos krävs för att fungera i Safari

<!DOCTYPE html>
<html lang="sv">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Annons</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            height: 100%;
            background: #ffffff;
            overflow: hidden; /* Förhindra scroll */
            -webkit-overflow-scrolling: touch; /* Viktigt för iOS */
        }
        .video-container {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: white;
            display: flex;
            justify-content: center;
            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');

// Försöker starta videon programatiskt för att säkerställa att den autospelas på iOS
    document.addEventListener('DOMContentLoaded', function() {
        video.play().catch(function(error) {
            console.log('Video could not autoplay due to restrictions:', error);
        });
    });

// Förhindra att iframens innehåll fångar svep
document.body.addEventListener('touchstart', function(e) {
    if (e.target !== video) {
        e.preventDefault(); // Only prevent default if touch is not on the video
    }
}, { passive: true });

// Hantering av klick på videon
    video.addEventListener('click', function(e) {
        e.preventDefault();
        window.open('[INSERT-TARGET-URL}', '_blank');
    });
</script>

</body>
</html>

Om du använder javascript från en annonsserver kan du använde några tilläggsfunktioner som blev utvecklade för webbreadern i maj 2025 och finns med i iOS-appen från version 14.1.1 och i Android från version 12.10.0. Dessa nya tillägg är hittills (maj 2025) använda av en publicist som använder Google Ad Manager och det är du själv som behöver se till att din integration fungerar.

De nya tilläggen gör det möjligt för annonsscriptet att fånga upp användarens samtyckesinställningar i objektet PrenlyUserConsent. Och med objektet PrenlyAd är det möjligt att instruera appen att gömma en obokad annons och fånga upp data om bas-url och titelnamn. Se teknisk beskrivning i botten av den här sidan.

6. Välj den/de applikationer som skall visa annonsen.

7. Välj vilka titlar per vald applikation som skall visa annonsen.

8. Välj "Spara" för att spara dina inställningar. Om du inte kan spara efter sista inställningen då har du missat någon inställning. Leta efter en röd plupp i högerkanten och fortsätt med ställa in inställningarna från den sektionen.

9. Aktivera din annons genom reglaget i överkanten. Om annonsen är inaktiv kommer du att aktivera annonsen; om annonsen är aktiv kommer du att inaktivera annonsen.

En aktiv annons kommer att skickas till din e-tidning och baserat på dina inställningar möjliggöra visning i tidningsläsläget för dina läsare.

En inaktiv annons kommer inte visas för läsarna när de sveper förbi markerad tidningssida.

10. Ta bort annons. För att ta bort vald annons välj tre-prickmenyn i höger toppkant och därefter välj "Ta bort annons". Annonsen kommer att tas bort från Prenly Workspace samt inaktiveras hos din e-tidning om annonsen var aktiv innan borttagning.

Du kan även se hur du gör för att skapa en insticksannons i videoguiden nedan.

Integration med externa annonssystem

Det är möjligt att dynamiskt ladda instickannonser från externa annonssystem via javascript. Vi har utvecklat flera avancerade tilläggsfunktioner för en publicist som använder Google Ad Manager men kan troligen användas även av andra annonssystem.  De kräver goda insikter i ditt annonssystem och dess möjligheter liksom kunskaper i javascript och fungerar kanske inte för alla.

PrenlyAd

I objektet PrenlyAd finns funktionen "collapseAd" som du kan använda i ditt script för att notifiera appen att gömma en annonsplats när annonssystemet inte kan leverera en annons. I stället för att visa en tom annonsplats göms då hela annonsytan.

Du kan fånga upp "baseUrl" och "titleSlug" från annonsens position i e-tidningen för att i scriptet skapa en virtuell url som du kan använda för att målstyra din annons från annonssystemet så att den visas i en angiven titel i en app.

Exempel på hur du skapar en virtuell url som kan användas för målstyrning. 
url = window.PrenlyAd.baseUrl + "/p/" + window.PrenlyAd.titleSlug;

window.PrenlyAd = {
    collapseAd: function // function which should be invoked to notify native app that ad is collapsed
   titleSlug: string // title slug which identifies title given interstitial ad is linked to
   baseUrl: string // base url of the app
}

PrenlyUserConsent

Du kan använda objektet PrenlyUserContent för att fånga upp användarens samtyckesinställningar och utifrån dessa avgöra om du vill ladda dynamiska annonser från en tredjepart (vid samtycke till annonser)  eller interna statiska annonser (när samtycke inte finns).

Objektet innehåller parametrar för att skicka vidare användarens val från CMP-dialogen och TC-string om det finns.

I de fall iOS-appen har en ATT-prompt (App Tracking Transparency) som ibland krävs av Apple skickas parametern "att_granted" med.

window.PrenlyUserConsent = {
  cmp: string, // CMP module name
  cmp_vendor_grants: dictionary, // dictionary containing vendor grants info if available
  cmp_purpose_grants: dictionary, // dictionary containing purpose grants if CMP provider supports it
  prenly_purpose_grants: dictionary, // only available if app uses Prenly CMP as provider
  tc_string: string, // TC string if CMP provider supports it
  att_granted: boolean // only if app has ATT configured

}