Skapa insticksannons

Art. no. 216099941

No alt text available

Skapa interstitiell annons

Du kan när som helst skapa en ny interstitiell annons i Prenly Workspace. Innan du gör det bör du notera att det finns systemkrav för att visa interstitiella annonser.

Krav på systemet

HTML. För att visa din annons måste annonsinnehållet minst vara en bildtagg i HTML (jpg eller png).

HTTPS. På grund av säkerhetsskäl måste alla länkar utanför e-lösningen i pappersläsningsläget använda HTTPS när det gäller interstitiella annonser.

Klickbar annons. För att ha en annons som läsaren kan klicka på måste bildtaggen omges av en ankartagg.

Steg för att skapa annonsen

Välj "Marknadsföring" och sedan "Annonser" i menyn till vänster.

1. Välj "New" för att skapa en ny interstitiell annons.

Create a new ad by selecting "New".

Skapa en ny annons genom att välja "New".

2. Ange ett namn för din annons. Det gör det lättare för dig att hitta annonsen i framtiden och att kunna söka efter den i annonslistan.

Set a name to your ad to easier find it within the list of ads in the future.

Ange ett namn på din annons för att lättare hitta den i annonslistan i framtiden.

3. Ange efter vilken sida din annons ska visas. Ange en kommaseparerad lista med sidor för att göra det möjligt att visa annonsen efter flera sidor. Annonsen kommer att visas mellan efter den/de valda sidorna och innan nästa siduppslag visas, dvs. istället för att visa nästa sida visas din annons och nästa sida visas efter annonsen.

Set after which page the ad should be displayed.

Ställ in efter vilken sida annonsen ska visas.

4. Välj ett startdatum och ange om annonsen ska vara aktiv tills den avaktiveras manuellt, eller om den ska ha ett bestämt slutdatum. Välj ett slutdatum för att automatiskt avaktivera din annons vid midnatt dagen efter det angivna slutdatumet.

Set date interval the ad should be displayed.

Ställ in datumintervallet som annonsen ska visas.

5. Här finns det teknisk lingo!

Ange en HTML-bildtagg (<img>) som ska användas för att rendera din annonsbild. Bildkällan(src-attribut) måste av säkerhetsskäl använda HTTPS-protokollet.

Om din annons ska vara klickbar, dvs. om du vill att läsaren ska kunna klicka på annonsbilden och navigeras till annonsörens webbsida, omger du bildtaggen med en ankartagg (<a>) vars ankarreferens(href-attribut) också måste använda HTTPS-protokollet.

Välj om du vill använda en annan bild mellan stående och liggande handhållet läge. Du måste välja minst ett av lägena, men du kan välja båda. Om du väljer att ange ett, t.ex. porträttläge, kommer Prenly att använda samma kod för att visa din annons för liggande handhållna enheter.

Vad är HTTPS? HTTPS är krypterad kommunikation mellan webbläsaren (klienten) och webbservern och anges som "https://".

Jämför http://example.com/ och https://example.com/. Många webbläsare signalerar att kommunikationen är krypterad via HTTPS genom att lägga till en hänglåsikon i URL-fältet för att indikera att kommunikationen är säker.

Varför kräver Prenly HTTPS? Android tillåter inte att HTTP-länkar öppnas från en app. I och med detta kommer Prenly att kräva att de länkar som finns i en app använder HTTPS. Läsarna får också en säkrare läsupplevelse genom att använda HTTPS eftersom kommunikationen är krypterad.

Prenly stöder JavaScript-kod som gör det möjligt för dig att ha dynamiskt annonsinnehåll. Alla giltiga JavaScript accepteras, men koden måste ge en bildtagg och, eventuellt, en omgivande ankartagg, när den körs.

Prenly kommer inte att validera din kod. Vi rekommenderar att du provar din kod på en HTML-sida innan du aktiverar din annons.

Exempel på kod för bilder:

Portrait:

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

Landscape:

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

Example code for MP4-videos

Note that H.264 encoded videos are mandatory to work in Safari

<!DOCTYPE html>
<html lang="en">
<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; /* Prevent scroll */
-webkit-overflow-scrolling: touch; /* Important for 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');
// Try to start the video programatically on 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>

 

Enter your image-related code as ad content.

Ange din bildrelaterade kod som annonsinnehåll.

6. Välj vilken applikation som ska visa din annons.

Select application which should display your publication.

Välj vilken applikation som ska visa din publikation.

7. Välj vilka titlar som ska visa din annons.

Select title which should display your ad.

Välj vilken titel som ska visa din annons.

8. Spara dina inställningar genom att välja "Spara". Om ikonen är suddig efter den sista uppsättningen har du missat att konfigurera ett avsnitt. Titta efter en röd plupp i det högra hörnet för varje sektion. Välj den felkonfigurerade sektionen och fortsätt konfigurationen därifrån.

Select "Save" to save your settings.

Välj "Spara" för att spara dina inställningar.

9. Aktivera din annons genom att trycka på knappen i det övre högra hörnet. Om annonsen är inaktiv kommer du att aktivera annonsen. Om annonsen är aktiv kommer du att inaktivera den.

Endast aktiva annonser kommer att kunna visas för dina läsare eftersom Prenly skickar ut dem för att visas i den konfigurerade applikationspublikationen och sidan i pappersläsningsläget. Inaktiva annonser kommer inte att visas när läsaren sveper förbi den markerade sidan.

Toggle the switch to activate the ad.

Aktivera annonsen genom att trycka på strömbrytaren.

Example of a configured and active ad.

Exempel på en konfigurerad och aktiv annons.

10. Ta bort annons. Välj menyn med tre punkter i det övre högra hörnet och välj "Radera annons" för att radera den aktuella annonsen. Annonsen kommer att tas bort från Prenly Workspace. Om annonsen var aktiv innan den raderades kommer den först att avaktiveras innan den raderas.

Delete the ad by selecting the three-dot menu and then "Delete ad".

Radera annonsen genom att välja menyn med tre punkter och sedan "Radera annons".

Välj videon nedan för att se hur du skapar en interstitiell annons som en videoguide.

Skapa en interstitiell annons.

Den nya smidigare och inte så påträngande interstitiella

Prenly - Boka en demo
Vill du se hur din tidning eller publikation kan se ut i Prenly? Boka en demo

© Textalk

We use DeepL and ChatGPT for translations. Occasional imprecisions may occur.