TABLET ADVERTISING GUIDELINES – BRW & SMI
Fairfax offers platform specific advertising opportunities to its clients on a range of tablet devices powered by Apple's iOS operating system. These guidelines are for clients advertising on BRW for the iPad and SMI for the iPad.
There are two types of creative options available at present. The full page interstitials are displayed in the index-page-flow, while the more traditional in-page banner advertising available in article pages. There are 4 standard interstitial products (static, multipage, video and carousel) for which templates are available to download. Furthermore Fairfax welcomes custom HTML5 full page executions. Please note that all bookings concerning full page interstitial adverts must include at least one of the standard (i.e. not-modified template based) ad types. Creative using alternative approaches or modifications of the provided templates are considered custom creative.
Fairfax welcomes custom creative executions and emphasises the importance of a collaborative approach to these projects. Please contact your account manager prior to commencing creative production.
Supported Operating Systems & App Downloads
Common Specifications for Tablet In-page Adverts
Please refer to the article and weather inline ads page.
Common Specifications For Full Page Tablet Ads
The following specifications are applicable to all standard and custom ad creative produced for Fairfax’s tablet applications.
- The Full Page Tablet interstitials accept creative built in HTML5 using CSS3 and JavaScript, which is delivered to the native WebView (a.k.a. ‘in-app’ or ‘mini-browser’) to render and display.
- Files must run locally (and are executed on file:// protocol)
- Every booking for full page interstitial placements must include at least one of the four standard creative. Please refer to the templates provided in this document.
- Each creative must be packaged into a single Zip file containing all assets (HTML, CSS, JS, images)
Your creative is delivered to the app in this zipped package
Please note that the HTML page – or the first of a series of HTML pages (if applicable) – must be named index.html for our application to recognise and load it.
This index.html file must be located in the root of the directory, where root is <your-creative-folder.zip> - Assets for both orientations are mandatory and orientation changes must be handled by CSS*
- Link operations should be handled by standard HTML (i.e. <a> tag)* and the landing page must open within the in-app web browser.
- Video player implementations should follow the native HTML5 <video> tag implementation guides and must retain basic video controls, such as a toggle play/pause and mute/unmute or volume control slider. Please follow our corresponding template.
- The creative must be tested and run in the device’s native browser before submission. It is recommended that you also test the creative in WebView, the OS provided in-app browser module, which is used to display your full-page advertising creative.
- Remember that even if your advertisement works smoothly in the native browser on an iPad it may not when implemented within our app due to the amount of processing power available or some differences between the rendering engines of the native browser and WebView. Fairfax has no control over these aspects as they are native to the Operating System.
- Note, however that creative, which does not work in the native browser will not function within WebView either.
- Please follow the instructions in each of the templates. Do not change any code that isn’t indicated. Creative submitted with altered code base will be considered as custom execution. While Fairfax encourages you to submit custom creative and will test and feed back on these, it is not liable to troubleshoot foreign code, other than providing feedback when bugs are encountered.
- A standard tablet close button must be included in every full page creative, using the following HTML snippet:
<a class="closeBtn" href="button:close">Close</a>
- Standard Fairfax internal tracking mechanism – as provided in our templates – must be retained in all standard and custom executions:
<script type='text/javascript' src='resources/javascript/tracking.js'></script>
Additionally, if video is present in the execution, the tracking mechanism requires the following two scripts:
<video id="videoPlayer"></video>
<!-- Do not modify the reference to the Fairfax tracking framework -->
<script type='text/javascript' src='resources/javascript/tracking.js'>
TabletTracking.trackVideoEvents('videoPlayer'); // where 'videoPlayer' is the ID of the video element
</script>
- Creative must be optimised for both landscape and portrait orientations
- No flickering animations / strobing effects allowed.
- Daily creative file size limit is 1.2MB regardless of the number of executions in rotation
- Click-through must be a text link or button and its size appropriate to the associated CTA / copy length. While touch interface design principles are encouraged (e.g. appropriate padding around links and buttons), extensive (e.g. full page) linked areas are not acceptable.
* Our findings show that WebView’s JavaScript implementation in regards to Orientation handling is unreliable. Furthermore, JavaScript controlled link handling, e.g. window.open() or location.href() functions – to mention only some examples – interfere with native operations.
NB: Other, not-listed functionality may also cause operational errors which may only be feed back upon experience through the creative testing process.
Notes & Recommendations
- Consider typeface sizes for legibility
- Photo-realistic images should be in JPG format for optimal compression.
- Using transparency can significantly increase the size of your image files, so you should avoid it as much as possible. If some of your images require transparency, you can use either GIF or PNG format. PNG images have higher quality, but are generally larger in size. If you need to use PNG images, you should use an image optimising utility (e.g. PNGCrush) to compress them as much as possible
- You can use CSS tiled backgrounds and WebKit gradients to help reduce overall file size
Dimensions, File Sizes & Templates
Creative | Dimensions width x height | File Size | Template | Notes |
---|---|---|---|---|
Article a.k.a in-page adverts | Please refer to the Tablet Article & Weather Inline Ads page | Available for iOS and Android | ||
static | Portrait 768 x 1004 px Landscape 1024 x 748px | 1.2MB / day / client limit across all active executions. NB: Video assets may be streamed and as a result only available while the app is connected to the Internet. Please refer to our in-stream video ad deliverables for file formats and further details. | static-tmplt-v1.07.zip | |
multipage | multipage-tmplt-2.02.zip | |||
carousel | carousel-tmplt-v2.02.zip | available on iOS only | ||
video | video-tmplt-v2.03.zip | |||
Custom | Please contact your account manager as early as possible, ideally in concept stage. | |||
3rd party tracking iframe | NA not visible on page | 100KB or less. Please remember that your tracking file weight and the number of HTTP connections it creates may impact your ad creative’s performance. It is recommended that you use minified JavaScript files for live serving. | ffx-tablet-track-iframe-v1.07.zip | NB: beta feature, subject to your preferred third party adserver’s support |
The Resources Library
Full Page Advertising creative for Fairfax’s tablet apps have an extensive JavaScript library at disposal (see files listed below). This library is referenced from the creative package via a symbolic link [../resources]. You should utilise these resources wherever possible as these files are not counted in your total creative file size limit. You can create custom classes / objects (“plug-ins”) based upon these libraries. Make sure that you save these custom scripts as separate files and include them within your creative directory. Do not modify the original resource files and do not use concurrent jquery versions as these may cause conflicts at runtime.
Click here to download the current resources JavaScript Library.
The current version of our resources library is 5.3 which includes the following files (including their respective file hashes):
File name | MD5 hash | SHA-1 hash |
---|---|---|
jquery-1.4.4.min.js | 73a9c334c5ca71d70d092b42064f6476 | b75990598ee8d3895448ed9d08726af63109f842 |
jquery-mobile.carousel.js | bdf643cf5da51bdc07727f173702234b | 1baf8dd0a388f0b0b5aaadfaf2d6fb98f110e0ee |
jquery-touch.js | d60e7a0bc427b79c81ef6202279830b4 | 778a394076fadba1ab13e168fa5cd3578cc32157 |
jquery-ui.ipad.js | 02d534025555333e05a7810e0854686f | 7c22bcd755e5c923db9c06780946ea260038f617 |
jquery-ui-1.8.5.min.js | a0b1425df15845d8e49ab06e927f92da | 02d2e4a524b0da52c3cb236619ad065fec44d69a |
tracking.js | 92e3cd062d62841662bb3d235ea96c60 | 577eab8508f31f404c2b422108c0ae5d59399411 |
The following chart displays the directory structure of these resources and their location relative to your creative ZIP package.
Predefined Functions
Check connectivity status
All tablet creative must be designed to run locally, however, you may wish to add some extra features (e.g. video) that requires internet connectivity. You need to check connectivity status and present relevant content for both online and offline scenarios, using the following script:
function setConnectivityAvailable(connected) {
if (connected) {
// Content to be served with network connectivity present
} else {
// Alternative content to be served without network connectivity
}
}
Close button
To leave an advertorial page, the default advert behaviour follows the general navigation of a horizontal swipe gesture however, advertising creative material must also include a close button in the top right corner of the advert. To do so, please use the following HTML snippet:
<a class="closeBtn" href="button:close">Close</a>
HTML meta tags
The following HTML meta tags must be included in the <head> section of your creative:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="initial-scale=1.0, user-scalable="no" />
Third party tracking
Clients wishing to use third party tracking of any form within full page interstitial type advertising creative must provide the creative with the tracking tags / mechanism already implemented.
Disclaimer
Fairfax provides a gateway to enable your own ad tracking solutions within your full page interstitial adverts. Support for implementation of third party tracking must be sought from your vendor.
Discrepancies between ad tracking data collected by Fairfax and third parties is inevitable at present due to different nature and technology it is collected through. To help us improve this technology, we appreciate if you share your collected data with us so that we can establish benchmarks and discrepancy levels. However please note that deliverables will be established based on data collected by Fairfax. Please refer to point 6.3 of the Fairfax Advertising Terms.
Overview
Fairfax’s tablet apps are designed to work both on and offline to provide a seamless user experience, however this technology brings its own challenges regarding advert tracking capabilities.
To enable independent, third party tracking on our full page interstitial templates and custom full page interstitials via adservers and Google Analytics, Fairfax provides an iframe solution, allowing advertisers to develop and maintain their own tracking mechanism.
Please note that 3rd party tracking requires internet connectivity. Interactions made during disconnected device status will be lost and will cause discrepancies between Fairfax recorded data (using native app measurement tools with offline capabilities) and third party recorded data. In-app measurement statistics show that disconnected device status accounts for less then 10% of all page views within the SMH and TheAge tablet apps (Omniture: October 2011).
Vendors and Support
Initial tests have been carried out using Google Analytics and DoubleClick for Publishers (DFP) adserver, however you are welcome to implement your preferred vendor’s tracking mechanism.
Template and implementation
All four (static, multipage, video and carousel) standard full page interstitial templates (from version 1.07) include the option to connect 3rd party tracking iframes. It is the first element inside the ad creative HTML file’s body. It’s markup is
<iframe id="ifrA" src="http://example.com/yourtracking-iframe.html" height="0" width="0" frameBorder="0"></iframe>
You must leave all attributes of this iframe intact, but edit the source to point it to your server, where theiframe.html file is hosted. This iframe is styled via CSS packaged with the creative template to hide it from view.
A possible implementation and iframe file source is available for download: ffx-tablet-track-iframe-v1.07.zip.
This iframe.html file uses HTML5 standard postMessage method to communicate events to the iframe. It is then the JavaScript included in this iframe.html file, that processes user interactions submitting tracking data to your or your vendor’s servers.
For details, please see the HTML5 postMessage specifications.
Tracked events
The following list includes the set of events available out-of-the-box when using the ffx-tablet-track-iframe-v1.07.zip template package. You may expand the list of trackable events within your creative. Please note however, that such changes will make your execution considered as custom creative.
- Static
- ad impression
- orientation change
- Multipage
- ad impression
- orientation change
- page turn (vertical scroll between pages)
- Carousel
- ad impression
- orientation change
- slide turn (swipes from slide X to slide Y etc)
- Video
- ad impression
- orientation change
Lead Times
TIER 1 Custom executions, bespoke solutions, creative for tablet devices and where advised: 10 days lead time or longer.
Your Fairfax Account Manager will advise you about creative lead times at the time of signing your booking.
Revision: 8.00
Fairfax reserves the right to change the specifications without notice at any time!