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