pop-up - tvbimg.b.tvb.com/wp-content/blogs.dir/ad/files/2017/08/2017-pop-up... · pop-up...
TRANSCRIPT
Pop-up
Dimensions:
Mobile: 640 (W) x 960 (H) pixels
Tablet Portrait - 1536 (W) x 2048 (H) pixels [For myTV SUPER only]
Tablet Landscape - 2048 (W) x 1536 (H) pixels [For myTV SUPER only]
File format/ size:
Must provide (.gif or .jpg) still image
- max. 75KB for Mobile
- max. 400KB for Tablet
Close button:
A 30 x 30 pixel close button will be placed on the top-left corner of an ad
by default of the app (not required in the creative)
When the user clicks it, the app will return to the content
Close behavior is handled by the app; please ensure that no advertiser
branding or call-to-action content is present at this location
Submission deadline:
All ads must be submitted at least 3 working days prior to campaign launch
Last updated: 1-8-2017
Custom HTML5 Pop-up
THUNDER & LIGHTNING Mobile Crazy Ad
Specification
Version: 1.9 (Oct, 2016)
THUNDER & LIGHTNING Mobile
Crazy Ad provides advertisers with
the flexibility and freedom to design
their own execution using HTML5,
CSS and JavaScript for interstitial ad
that brings in-app full page browsing
experiences with interactive rich
media capability for user.
Last updated: 1-8-2017
Platform Phone: iOS 4+, Android 4+
Tablet: iOS 4+, Android 4+
Placement Full screen interstitial
Dimension Due to the variety of screen sizes and ratios in mobile devices, creative is highly recommended built as following resolutions.
Phone: o Portrait: 320 (W) x 480 (H)
Tablet: o Portrait: 768 (W) x 1024 (H) o Landscape: 1024 (W) x 768 (H)
For better appearance, ad developer should use responsive / multi-size layout instead of fixed display area with JavaScript and CSS to rework the creative to various dimensions and adjust the creative layout accordingly.
Submission
material
HTML creative:
Creative must be submitted as finished HTML, including
images, HTML, CSS and JavaScript etc.
Ad developer can choose one of the following ways to build their
creative:
o Universal creative – including all layouts (portrait /
landscape / phone / tablet) into one creative that able to
detect the dimension of container and the orientation of
device with JavaScript for display corresponding layout.
o Separate creative – build the phone and the tablet layouts
into two creative separately. For phone creative, it only
need to cater portrait layout while for tablet creative, it
need to contain portrait and landscape layout and able to
detect the orientation of device with JavaScript for display
corresponding layout.
Format: ZIP file(s) containing the completed creative.
Total file size (including all loaded data on running ad):
o Universal creative – max. 800kb
o Separate creative (phone) – max. 300kb
(tablet) – max. 700kb
Any external resource link is not allowed except approved vendor.
All ad material must hosted by TVB.COM.
Last updated: 1-8-2017
Backup images (for unsupported device):
Phone (portrait only):
o Dimension - 320(W) x 480 (H)
o File format - .gif / .jpg
o File size – max. 50kb
Tablet (portrait):
o Dimension - 768(W) x 1024 (H)
o File format - .gif / .jpg
o File size – max. 160kb
Tablet (landscape):
o Dimension - 1024(W) x 768 (H)
o File format - .gif / .jpg
o File size – max. 160kb
Description:
Create a text file, named “readme.txt” to
describe following ad info:
o Click-through URL (optional):
e.g. http://www.tvb.com
o Out-App landing page (iOS only):
Yes – open in Mobile Safari
No – open in in-app browser
Out-app only for Android
Third party impression tag
(optional):
e.g. http://www.xxx.com
o Creative:
Universal – one creative
Separate – two creative
File format
HTML, CSS, JavaScript and images (jpg/gif/png) etc.
No flash / audio / video creative.
Submission Deadline
1. At least 7 working days prior to campaign launch
2. TVB.COM will provide testing within 3 working days
upon receipt of all creative elements built to correct specifications.
3. Incorrectly submitted creative will be returned for
revision and may result in scheduling delays.
upon
Last updated: 1-8-2017
Creative Ad area: 320(W) x 480(H)
Close button: 30(W) x 30(H)
Click Tag All required clickTAGs and interaction calls must
be placed within the HTML file without
minification or obfuscation. Variables must be
included in the first .html file that loads to aid the
ad server in locating the variable to substitute the
correct value. All clicks and interaction buttons
must be instrumented before delivery of the
completed ad.
• Only one click-through URL is allowed.
• Do not hardcode the clickTAG value in the HTML.
The JavaScript code for your clickTAGs:
var clickTag = window.location.search.substring(1).split("clickTag=")[1];
function clickThrough(){
window.open(clickTag);
}
//in HTML click area
<a onclick=”clickThrough()”>click area</a>
Layout Phone – portrait
Last updated: 1-8-2017
Tablet - portrait 768x
30px 738px
30px
1024px
994px
Tablet – landscape
1024px
30px 994px
30px
768px
738px
Creative Ad area: 320(W) x 480(H)
Close button: 30(W) x 30(H)
Last updated: 1-8-2017
Orientation Phone
o Display portrait creative only
o In portrait mode, the screen will be displayed a full-page portrait creative.
o In landscape mode, the creative will be rotated and shrink to fit the screen with same aspect ratio.
Portrait Portrait
Creative Creative
Portrait mode Landscape mode
Tablet
o Ad developers need to contain portrait and
landscape layout into one creative that able
to detect the orientation of device with
JavaScript for display corresponding layout.
Portrait Portrait
Creative Creative
Portrait mode Landscape mode
Close button - A 30x30 pixel close button (not required in the creative)
will be placed by the app on the top-left corner of the ad.
- When the user clicks it, the app will return to the content.
- Close behavior is handled by the app; please ensure that no
advertiser branding or call-to-action content is present at this
location.
Crazy Ad running on smartphone
Crazy Ad running on tablet
Last updated: 1-8-2017
3rd party ad serving tag Third party ad-serving of any creative element is not
supported; however third party click and impression
tracking is permitted.
Unsupported Device By default, the HTML5 creative can be displayed on any
iOS/Android app compliable mobile device. However, in
real world, some old version OS browser or specific
manufacture’s browser will produce the non-standard
result, like wrong positioning or poor performance, and
causes bad user experience.
In that case, the ad will be displayed the backup image
only instead of the HTML5 creative.
Besides, TVB.COM will provide testing upon receipt of all
creative elements built to correct specifications. Non-
compliant creative elements will be returned for revision.
We do this to proactively exclude poorly-performing
platforms like Android 2.x or 3.x from advanced rich
media and ensure they still have a smooth experience.
Last updated: 1-8-2017
HTML5 CREATIVE GUIDELINES
Guide to HTML5 ad Creative Development
Version 1.5(May, 2013)
Welcome to HTML5 Creative
Guidelines. This is article to
learn the secrets of building ads
in HTML5 for TVB.COM mobile
application. Here you’ll find
specification, guides, sample
code and links to helpful
resources.
Last updated: 1-8-2017
File Extension All file resources should be complied with the following extension in
deliverables:
*.html – the html files of the promotion site
*.jpg, *.png, *.gif – the image files
• *.js – the javascript files
• *.css – the css files
• *.xml – the xml files
• *.txt– the text files
• *.otf– the font files
File Structure All file resources should be structured as follows:
index.html – default page
• [project] – html file
[project/images] – images files
[project/js] – JavaScript files
• [project/css] – css files
• [project/font] - font files
readme.txt – ad setting description
Sample code Here is an example:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 Ad demo</title>
<!-- Comment CSS -->
<link href="css/html5AdDemo.css" rel="stylesheet"
type="text/css">
<!-- Comment JS -->
<script type="text/javascript"
src="js/html5AdDemo.js"></script>
</head>
<body leftmargin="0" topmargin="0"
marginwidth="0" marginheight="0">
<!-- Comment Ad content -->
<div id=”adContent”></div>
</body>
</html>
Download an example mobile
Last updated: 1-8-2017
HTML coding The authoring of all HTML, JavaScript or CSS code is the sole responsibility of the creative agency and must comply with HTML5 and W3C standards. Please ensure your code is run through a W3C HTML validation script before submission.
Keep in mind that heavy JavaScript execution can consume substantial computing resources and deteriorate the user experience.
TVB.COM reserves the right to pull down ads that have problematic code.
Use relative path instead of absolute path for all external resources such as JavaScript and CSS in html file.
For optimum performance and readability you must ensure that external resources such as JavaScript and CSS are placed in the head tag rather than in the body of the HTML creative.
The background of ad container (WebView) is opaque white. If the background color of html body is transparent, the ad background color will be white.
Creative is required to support dynamic ad size that auto fit in any views with specified aspect ratio. Guideline is available for Google Web Designer & Adobe Animate CC.
External resource links For avoiding missing links error, any external resource link is not
allowed except the following approved white list:
code.jquery.com
ajax.googleapis.com
media.admob.com
Compression / Encoding All deliverables (js, html etc.) should be in UTF-8 encoding
All external resources (CSS, JavaScript, fonts and images etc.) recommend be inline within the HTML using base64 encoding. This is essential for ads to display correctly when the user is offline.
We recommended that all CSS and JavaScript be minified for optimal delivery and user experience.
It is also recommended that lossless compression be applied to images via tools such as OptiPNG prior to base64 encoding.
Last updated: 1-8-2017
Browser support
In general, all ads should be followed system requirements of apps to compliant different native browser of OS.
System requirements of TVB.COM apps table
It is difficult for development to compliant all version of native
browser on different OS (targeting which OS to un the ad is
allowed). However, it is highly recommend test the ad on
Android 4.0+ and iOS 6.0+ environment because thee are
majority OS versions for TVB.COM apps.
Compatibility It is important for developer to understand the compatibility of
HTML5 APIs and CSS3 on mobile platform.
Recommended online resources:
When can I use …
Mobile HTML
Key HTML5 APIs compatibility table
Key CSS3 compatibility table
Last updated: 1-8-2017
Device testing / Debugging Testing on the actual device with different platforms is
the best solution for checking. However, it is not
available to everybody.
For ad testing, it can break down into the following
four tiers.
1. Test build of the application: load the ad with
AdMob SDK test app on the device.
2. Native web browser on the device: Mobile
Safari and Android Chrome browser.
3. Device simulator: Xcode SDK: iOS Simulator
(Mac only), Device Anywhere, BrowserStack,
Adobe Edge Inspect.
4. Desktop browser: running on a similar
rendering engine (Webkit) as the mobile web
browser such as Safari and Chrome.
Last updated: 1-8-2017