HTML5

The World Wide Web Consortium (W3C) released Hyper Text Markup Language 5 as an official recommendation in December 2012. HTML5 is the latest update to the Hypertext Markup Language (HTML) that includes new semantic tags for features such as video, audio, canvas, and other design features.

HTML5 and Display Ads

Similar to Flash Display Ads, certain specifications must be considered when building in HTML5:

  • File Size Limitations
  • Polite loading

Polite

Polite downloading technology is a method for displaying a small sized file whilst a larger one downloads, automatically displaying on completion of download. This ensures that there is no blank ad spot whilst the larger file downloads and allows advertisers to create in depth ads above and beyond the standard offerings.

How it works:

1. An initial content is displayed to the user.

2. When the initial file is downloaded, a larger file starts to download. When the download of the large file is complete, it will display to the user instead of the initial file.

A creative politeness is automatically checked using the following process:

  • The creative is opened in a test environement
  • After one second, the test platform checks that the creative is not blank. If the creative background is not blank, the creative is then marked as being polite.

Weight

The weight is also checked automatically with the same automated test platform with this process:

  • The creative is loaded in a test environement
  • After thirty seconds, the test platform checks the network traffic of the creative. If the creative downloaded weight is below the set weight for the format, the creative unit is then validated.

Important note : Piximedia checks the downloaded weight not the zip's file weight. For instance, a 5MB HTML5 creative zip file that only downloads 30KB of content will be marked as weighting 30KB. On the other side, a 50KB zip file that downloads a 2MB JavaScript framework will not validate because the full downloaded weight is counted, even if it's not included in the zip file.

Automatic Encoding Process

Piximedia uses sources MP4 files to automatically encode advertisers video files into different sizes and formats :

  • WebM VP8 and VP9 files for Chrome and Firefox
  • Encoded MP4 files for all other browsers (IE, Safari, Mobile browsers, etc..)

If you want us to use final files and to disable automatic please contact us. In that case, MP4 video files should be provided, with a maximum weight of 1MB for each 10 seconds. For instance, if you have a 30 second video file, its weight should be, at most, 3MB.

HTML5 Support

HTML5 ad will play natively in all modern browsers, no matter the device. Older browsers may not display the ad as expected. Browser support depends on the features included in the HTML5 creative. Newer HTML5 features will only work in the very latest browsers, while basic features (like images) will display everywhere. HTML5 creatives should be able to display relevant content on every device by detecting wether or not the browser supports the intended feature.

Third party platforms provide information over which HTML5 feature work on which device:

Video Support on Desktop / Computers

Piximedia support HTML5 video on the following desktop platforms :

  • Windows 7 and later versions: Chrome 44+, Microsoft Edge, Internet Explorer 11+, and Mozilla Firefox 41+
  • Mac OS X 10.5 and later versions: Chrome 44+, Mozilla Firefox 41+ and Safari 5+
  • Linux: Chrome 44+, and Mozilla Firefox 41+

On other browsers/os, as a backup, Piximedia will play the video ad using a Flash based video player, and if the user blocks Flash (or if Flash is not installed on the computer), an alternative content will be displayed (poster frame to be supplied separately or native text ad).

Video Support on Mobile and Tablet devices

Piximedia support video on the following desktop platforms :

  • iOS 8 and later versions: Safari 7+
  • Android 4.4 and later versions: Chrome
  • Samsung Android phones and tablets: Chrome and Samsung Browser

An alternative content will be displayed if displaying video is not possible (poster frame to be supplied separately or native text ad). Piximedia will try to start the video automatically on supported devices, and will display the alternative content if autoplay is not possible.

Native Video Autoplay on Mobile and Tablet devices

Piximedia fully supports autoplay videos (ie. the movie starts with no user interaction) on these devices:

  • iOS 10 and later versions: Safari
  • Android 4.4 and later versions: Chrome 53+
  • Samsung Android phones and tablets: Chrome 53+

Autoplay can be disabled by the user in the browser settings: alternative content will then be displayed (poster frame to be provided separately or native text ad), and the the video ad will play on user interactions.

Native Advertising

They can be displayed within any position / slot, whatever the placement size, and all visible elements are automatically arranged using responsive design.

Piximedia can use a single URL to retrieve any other element of native ad. By default, Content is automatically pulled from the landing page and used as a Native Ad. It is of course possible to provide separate elements, in a highly flexible way. For instance, Piximedia can use the title / description from a landing page, all while using a custom image.


    Native

  • Title    Short: 25 characters max, Medium: 90 characters max, Long: 140 characters max     TXT
  • example: Piximedia teamwork !

  • Description    140 characters max     TXT
  • example: We believe that maximizing ROI requires both beautiful ad products and premium environments.

  • Brand name    25 characters max     TXT
  • example: Piximedia

  • Image files   1.91:1, 4:3, 1:1 ratio max 250kb     JPG, PNG
  • Icon file (Optional)   1:1 ratio, max 250kb     JPG, PNG
  • Rating (Optional)   from 0 to 5     TXT
  • example: 5

  • Number of likes (Optional)       TXT
  • example: 87 645

  • Number of downloads (Optional)       TXT
  • example: 12 450

  • Price (Optional)       TXT
  • example: 50€

  • Sale Price (Optional)       TXT
  • example: 39.99€

  • Phone Number (Optional)       TXT
  • example: +33 1 79 97 21 50

  • Address (Optional)       TXT
  • example: 8 Rue des Graviers, 92200 Neuilly-sur-Seine

  • Display URL (Optional)       TXT
  • example: www.piximedia.com

  • CTA Text (Optional)   15 characters max     TXT
  • example: Join us!

  • Display Url        TXT
  • example : https://piximedia.com

Dynamic

Dynamic ads are built in real time and will pull different creative elements ( Image, video, text ) based on the device environment, ad size, the user behavior and other factors ( localisation, weather, segmentation...).

From a specific location to a recent web search, or the history of the pages the user have visited, an ad using dynamic creative will serve content based on the customer and his or her behavior.

The dynamic creative can serve up ads that are a reflection of customer current interests. That increases click-through and conversion.

Dynamic Native Video

Dynamic Display

Dynamic Display Video

Trafficking

Piximedia thanks to its platform allows you to choose how the campaign will be broadcast: Adserver Piximedia or Adserver Third Party.

Platform Adserver Piximedia Adserver Tiers Adserver Tiers Video (VAST/VPAID)
VIDEO>DISPLAY>NATIVE>DYNAMIC
Impression Ok Ok Ok
Viewability (1 to 30 sec) Ok Ok Ok
Click Ok Ok* Ok
Visit Ok Ok* Ok (no VPAID)
Convertion Ok Ok* Ok
Open mode
New tab Ok Ok Ok
Iframe Ok (if friendly url only) NOK Ok (no VPAID)
Sell mode
CPM Ok Ok Ok
View-CPM (1-2 sec) Ok Ok Ok
CP-View (10-15-20-30 sec) Ok Ok* Ok*
CP-Click Ok Ok* Ok*
CP-Visit Ok Ok** Ok** (no VPAID)

* * Campaigns using the Piximedia optimization algorithm (view, click, visit, conversion) and hosted by an ADSERVER TIER: the creations must not be modified without warning Piximedia.

TARGETING & TRACKING : PIXIMEDIA TAGs

AUDIENCE TAG

To optimize the targeting of the campaign by creating audience modeling and measuring the performance (Quality of the visit: bounce rate, time spent, page views).

CONVERSION TAG

** When the final goal of the campaign ( KPI) is a specific event (visit, sale, lead).

PIXIMEDIA will provide a convertion tag to integrate on this event before the launch of the campaign: tag conversion (on the conversion page).

The PIXIMEDIA team is at your disposal to answer your questions and help you with the best possible programming of the tags.

Clicktag

Step 1 : Add Piximedia Library to the HTML5 creative by calling this script to the head section of the creative.

<script src="//static.adserver.pm/lib/html5.js" type="text/javascript"></script>

Step 2 : Add a click listener to a DOM element.

document.getElementById("myDiv").addEventListener("click", function() {
	// Handle Click Event here
});
				

Step 3 :Customize this click listener for a specific area of the creative, by calling the click handling function : piximedia.click(index, name, url)

Here are the functions parameters :

- index

This is a number, starting at 1, used by Piximedia to configure the click URL of each creative. For instance, if you happen to have four distinct click areas in your HTML5 creative :

Clicktag1

The background should always use 1 as a index (1 is the default). Other buttons are free to use any index, provided the naming is consistent from one creative to another : if you have two HTML5 creative for Product A and Product B, always use 2 for the logo, 3 for the image, 4 for store locator, etc… Of course, this is just an example, as long as you use 1 for the background/default, you are free to use any index with any label

- name

This is the name that will display in Piximedia campaign reports. For instance, if we consider the same creative as in the previous point :

Clicktag1

- test_url

This is the landing page URL, for test purposes. VERY IMPORTANT INFORMATION: Be careful, this URL is only used to preview the creative. What is set as a URL here is ALWAYS ignored in production, and you should NEVER assume that anything you set here will be used or known in any way. Again, this is only intended for test purposes so that previewing the creative doesn't redirect to an error page ! Here is an example:

Full example:

You can find a full working zip file example here : Download zip

Iframe

Piximedia may open the advertiser website when the user asked for it inside an iframe to offer a better viewing experience.

Some advertiser web site are not compatible with iframe advertising containers. When we try to add an URL to an incompatible site in the platform, the following error message shows.

This incompatibility is triggered by the presence of an “X-Frame-Options” HTTP header.

The fact that this header is present blocks the use of the site in an advertising iframe container.

To allow the site to be included in an advertising iframe container, it is mandatory that the IT team in charge of the web site removes this optional HTTP header.


See examples below.

Previw of a creative opening in iframe with a video

Previw of a creative opening in iframe

Billboard

Horizontal rectangular format, generally placed above the editorial content, in which any kind of content can be embedded.

Display - Image / HTML5

Video

Native

Companion

Display - Image / HTML5

Video

Native

Footer

Display - Image / HTML5

Native

In-Content

Display - Image / HTML5

Video

Native

Leaderboard

Display - Image / HTML5

Native

Masterboard

Display - Image / HTML5

Video

Mobile Banner

Display - Image / HTML5

Native

Rectangle

Display - Image / HTML5

Video

Native

Skin

Display - Image / HTML5

Video

Full Video

Vertical

Display - Image / HTML5

Video

Native