Create interstitial ad

Art. no. 216099941

Create interstitial ad

You can at any time create a new interstitial ad in Prenly Workspace. Before you being please note that there are system requirements to show interstitial ads.

System requirements

HTML. To display your ad the ad content must at minimum be an image tag in HTML (jpg or png).

HTTPS. Due to security concerns, any link outside the e-solution while in paper reading mode must use HTTPS in regards to interstitial ads.

Clickable ad. To have an ad that can be clicked upon by the reader the image tag needs to be surrounded by an anchor tag.

Steps to create the ad

Select "Marketing" and then "Ads" in the left-hand-side menu.

1. Select "New" to create a new interstitial ad.

Create a new ad by selecting "New".

2. Enter a name for your ad. This will enable you to easier find the ad in the future and to be able to search for it within the list of ads.

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

3. Enter after which page your ad should be displayed. Enter a comma-separated list of pages to enable your ad to be visible after several pages. The ad will be displayed in between after the selected page(s) and prior to the next page spread is displayed, i.e. instead of displaying the next page your ad will be displayed and the next page will be displayed after the ad.

Set after which page the ad should be displayed.

4. Choose a start date and select whether the ad should be active till manually deactivated, or have a finite end date. Choose an end date to automatically deactivate your ad at midnight the day after the entered end date.

Set date interval the ad should be displayed.

5. Here there be technical lingo!

Enter a HTML image tag (<img>) which will be used to render your ad image. The image source (src-attribute) needs to use the HTTPS-protocol due to safety reasons.

If your ad should be clickable, as in if you want the reader to be able to click on the ad image and be navigated to the advertiser's web page, surround the image tag with an anchor tag (<a>) which anchor reference (href-attribute needs to use HTTPS-protocol as well.

Choose whether you want to use a different image between portrait and landscape hand-held mode. You need to select either mode at a minimum, but you can select both. If you choose to enter one, say portrait mode, Prenly will use the same code in displaying your ad to landscape hand-held devices.

What is HTTPS? HTTPS is encrypted communication between the web browser (client) and web server and is noted as "https://".

Compare http://example.com/ and https://example.com/. Many web browsers will signal that the communication is encrypted via HTTPS by adding a padlock icon to the URL bar to indicate that the communication is secure.

Why does Prenly require HTTPS? Android disallows opening HTTP-links from an app. By extent of this Prenly will require the links existing an app to use HTTPS. Readers will also get a safer reading experience by using HTTPS as the communication is encrypted.

Prenly supports JavaScript code which enables you to have dynamic ad content. Any valid JavaScript is accepted, but the code needs to yield an image tag and, optionally, a surrounding anchor tag, once executed.

Prenly will not validate your code. It is recommended that you try your code on an HTML page prior to activating your ad.

Example code for images:

Portrait:

Landscape:

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.

6. Select which application should display your ad.

Select application which should display your publication.

7. Select which titles should display your ad.

Select title which should display your ad.

8. Save your settings by selecting "Save". If the icon is colour-blurred after the last set then you have missed configuring a section. Look for a red plop in the right-hand-side corner for each section. Select the misconfigured section and continue the configuration from there.

Select "Save" to save your settings.

9. Activate your ad by toggle the switch in the top-right corner. If the ad is inactive then you will activate the ad. If the ad is active then you will deactivate it.

Only active ads will be displayable to your readers as Prenly will send it out to be displayed in the configured applicationpublication and page in the paper reading mode. Inactive ads will not be displayed when the reader swipes past the marked page.

Toggle the switch to activate the ad.

Example of a configured and active ad.

10. Delete ad. Select the three-dot menu in the top-right corner and select "Delete ad" to delete the currently chosen ad. The ad will be removed from Prenly Workspace. If the ad was active prior to deletion the ad will first be deactivated before it is deleted.

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

Select the video below to see how to create an interstitial ad as a video guide.

Create an interstitial ad.

The new smoother and not so intrusive interstitial

Prenly - Book a demo

Want to see how your magazine or publication might look in Prenly? Book a demo