Configuration of interstitials
Purple Experience/Purple Importer
Interstitials are advertising pages that are integrated into Purple Issues via the Purple Importer. They are placed within an issue and contain images and can also contain URLs that link to websites and work in Purple Apps and Purple Websites. The configuration of an interstitial is done within the Purple Experience and can be done by updating the dynamic resources and the Purple Manager or by making the changes in the Purple Experience Builder.
This article only explains the integration and usage of Purple interstitials with images.
The interstitials feature needs to be enabled in the Purple backend. This is done by Purple Support.
If a connection to a Google Ad Server is required, this will need to be arranged by our Support Helpdesk team. Please let us know if you need an ad server configured.
To request the enablement of the feature or the connection to an ad server, please open a support ticket here:
- Website of the Purple Support Helpdesk in the German language: https://support.sprylab.com/de/support/home
- Website of the Purple Support Helpdesk in the English language: https://support.sprylab.com/en/support/home
The interstitial will be shown on a specific, pre-defined page within the issue. Please let Purple know which page you would like the ad to appear on. For this article, we will use page 6 as an example.
Open the import CSV file for the account you want to change on your computer and add the following column at the end of the CSV file: ads.
Add the term 'p6' for each issue(row) which should have an advertisement slot (as mentioned in the preconditions section of this article, this page can be defined during setup).
In this example, we want to place the interstitial on page 6, which is determined by 'p6'. So the term 'page' is shortened to 'p' and put together with the page number. If you want to put it on page 2 you would need to add 'p2'; for page 13 'p13' and so on.
This page number needs to be exactly the same as the parameter in the config.properties file which is setup by the Purple Support team
The final result should look like this in the editor:
If you later check your configuration in the preview of the config.properties file. It should look like this:
- Editing the gad.config.js file
- Configuration of interstitials
- Publishing date
- Link to advertiser
- Images of your ad
The images for your advertisements will be stored within the dynamic content of the app. Place the images for your ad campaign in the 'ads' folder and the configuration for the display, images and correct linking of the interstitial in the gad.config.js file within the same folder.
All changes must be uploaded with the dynamic content to the Purple Manager or the Purple Experience Builder to function in your Preview or Live app.
Let’s take a look at what an entry for a campaign looks like.
Open the gad.config.js in your in the Purple Experience builder or in the downloaded dynamic content with a text editor like Visual Studio Code, Brackets, Notepad++ etc.
The opened file should look like this:
The complete entry for one ad within an issue is this snippet of code:
In the gad.config.js within the Experience Builder, the publishing date needs to be configured in the following format: YYYY-MM-DD to publish the advertisement on the correct day. Please be aware of the distinction between summer and winter time as this affects the publication date.
If you publish during summer time (CEST) the publishing date needs to be one day earlier.
Summertime starts on the last Sunday of March and ends on the last Sunday in October.
Example: You want an ad to be published on the 21st of May, then the entered publishing date needs to be one day earlier: 2024-05-20.
If you publish in winter time, please use the same date.
Example: You want an ad to be published on the 17th of November, then the entered publishing date needs to be the same day: 2024-11-17.
You can link your ad to e.g. the website of the advertiser. This will generate a touch area within the issue and by tapping it, the in-app browser will open the page.
If you want your ad to be linked to a specific URL, add it to the gad.config.js like in the example below:
Requirements for images
To ensure your ad is displayed optimally, please provide images in the following format:
- File format Webp (to ensure small file size)
- Deliver two versions of every image, that you want to insert into the ad:
- Portrait format: 1532x2048 pixel
- Landscape format: 2048x1532 pixel
Naming of the images
- Name the file and when adding the name into the gad.config.js, write it in exactly the same way (case sensitive)
- The portrait image name needs to be placed in the line starting with 'imgp:'
- The landscape image name needs to be placed in the line starting with 'imgl:'
Naming the ad images based on a given date may help to keep the gad.config.js file easier to read, especially when working with multiple interstitials from/for the same advertiser.
Mapping of the images in the gad.config.js
- Add both images to the add folder alongside the gad.config.js
- Map both images with the interstitial by adding them like in the example below as:
Please note that the filename is case-sensitive and must be written exactly the same in the gad.config.js as the file is named.
Please keep in mind, that interstitial campaigns cannot be tested for dates in the future, as most advertising services will display their content on the day of the campaign.