Technical Guide: Tools and templates
Welcome to our developer section! Here you'll find a complete collection of HTML/JS development code, starter templates to speed up your projects, and practical advice to guide you toward best practices.
Technical specifications
Accepted languages are
HTML,CSSandJavaScript(includingjQuery).Use of
PHPorASPcode is not supported.Character encoding:
UTF-8There must be a single
HTMLfile.The HTML file must be named
index.html.Your final
HTMLcode must not contain references to non-existent files. Leave only the files (images, fonts, etc.) used in the code for your ad.
All special characters are prohibited in the naming of your files. Be sure to remove them if present.
Only the following characters are accepted in your file nomenclature:
A-Za-z0-9_-Special characters in URLs must be encoded using a Uniform Resource Identifier (URI).
The La Presse+ application is case-sensitive. Be sure to maintain the same formatting between file names and their references in the
HTMLfile.
Please note: Spaces are not allowed in the naming of your files or URLs.
No external file, link, or script is authorized (including the jQuery library).
Exemple :<script src='//code.jquery.com/jquery-3.7.1.min.js'></script>The libraries used must be located in your assets folder.
Exemple :<script src='assets/script.js'></script>No script or JavaScript call must be positioned after the closing tag
</body>.Never use the property
visibility: hidden;to hide audio content (whether in CSS or JS).The final ad folder must contain all files included in the code for your ad.
If you use the jQuery library, we recommend downloading the latest version from jQuery →.
A copy of the library must be included in the final ad folder.
Using
jQuery.noConflict()is not recommended unless you are using multiple libraries that use the$symbol.
The following syntax must be used to open links in your ad:
<a href='https://www.youraddress.ca'></a>The following codes will not be accepted (if used, they will be ignored by the application and your ad cannot be activated):
Unauthorized code :window.open('https://www.youraddress.ca', '_self'); window.parent.location.href = 'https://www.youraddress.ca'; window.location = 'https://www.youraddress.ca';The
target="_blank"attribute is not supported in the application. Please remove them from your<a>tags before the delivery of your material.When using the Send Email → button, be sure to use the
mailtoparameter in yourhrefattribute.
For example:<a href="mailto:youraddress@yourdomain.ca">
Incompatibilites
Adobe Animate
Adobe Muse
Adobe Flash
Cocos Creator
Canva
Google Web Designer
GSAP / GreenSock
Phaser
Sencha Animator
Microsoft Silverlight
IMPORTANT
To ensure optimal compatibility of your ad on our platforms
Download our official templates →
The target="_blank" attribute is not supported in the application. Please remove them from your <a> tags before the delivery of your material.
It is not possible to insert a share button ("Like", "Send", "Follow", "Subscribe" or "Comment") on social networks in your ad. However, you can direct readers to a Facebook page by using the Facebook icon available in our iconography. Example of a valid URL :
http://www.facebook.com/MyCompany.Links to Facebook apps are not compatible with La Presse+ at this time. These links are in the following format:
https://www.facebook.com/nom-du-compte/app_[string of digits].
Google Maps imposes usage limits on its API. These limits are less than La Presse+’s daily reader volume, which means requests would receive an error message if the limits are exceeded. For more information, consult the official Google documentation → on the topic.
Google Maps Geolocation imposes usage limits on its API. These limits are less than La Presse+’s daily reader volume, which means requests would receive an error message if the limits are exceeded. For more information, consult the official Google documentation → on the topic.
Restrictions within Apple’s mobile operating system (iOS) mean we cannot provide volume control for a media file (audio or video) in JavaScript. For more information, consult the official Apple documentation → on the topic.
Automatic triggering of audio extracts is not allowed.
IMPORTANT: It is now possible to use the autoplay video option in the Full-screen format. See the information in the Video Interaction section. Learn more →
It is not possible to encode your videos or images in base64 because it would conflict with other media files used for La Presse+.
Refreshing an ad using the following code is not permitted:
<a href='#'>Replay</a><a href='javascript:window.location.reload();'>Replay</a><a href='javascript:history.go(0);'>Replay</a>It is not allowed to use an anchor-type tag with an empty href attribute. This can cause problems opening external links that are placed elsewhere in the ad.
<a href='#'></a>
Tablet components such as the camera, microphone, and gyroscope are not accessible via the La Presse+ application. It is therefore not possible to integrate augmented reality or certain types of interaction requiring these components in your ads.
Hype
Ads made using Hype are accepted in all formats available and are subject to the same basic technical specifications as other types of ad.
Animations and media clips must not start automatically. The reader must be given the choice of activating them while reading.
In full-screen mode, there must be an area equivalent to 20% of the ad unit with static visual content, free of all interactions.
We strongly recommend incorporating the text in your ad as an image file (e.g.,
.jpg,.png).Filter effects (e.g., Blur, Sepia, Saturate, Hue, Brightness, Contrast) are not functional in iOS. Avoid using them.
Avoid using customized font (CSS) or one from Google Fonts. If you decide to use a customized font (CSS) or one from Google Fonts, it will be replaced by an equivalent font on the reader’s tablet. Given the variety of tablet models compatible with La Presse+, we unfortunately cannot guarantee what font will be substituted on a given tablet.
Always provide us the source file of your project. That file has the extension
.hype. ThePIE.htcandHYPE.ie.jsfiles are not taken into account in the ad file size.When exporting your project in HTML5, uncheck the Create enclosing folder and Show “Built with Hype” options. You must also uncheck the Automatically optimize when exporting option for each image in your ad that is in the Resource Library panel.
In the full-screen format, this area, consisting of a 135 px band at the bottom and another 75 px band on the right, must be free of interactivity.
This surface, which facilitates screen switching, must be static and therefore free of interaction. In addition, the elements used in the footer, such as the logo, +WEB and/or call to action, must remain fixed.
Only the latest version of Hype available for download on the Tumult website is supported. Please download this version at http://tumult.com/hype → if you have not already done so. Previous versions and Beta versions are unfortunately not accepted. No backward compatibility is ensured if you use another version of the software.
In the Mobile options (first Inspector tab), make sure to select Don't set viewport. Otherwise, there could be a display conflict in La Presse+.
To add an external link to your ad, be sure to check the box Open in new window.
To embed a video file into your ad:
Save your project under the name
index.Double-click the icon to activate your video.
Click the pencil icon.
Add the following code:
<a onclick="playVideo('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
Do not add any action under OnMouse Click.
Name your first scene "
1".Double-Click on the icon that send back to the inital scene (the
xicon).Click the pencil icon.
Add the following code:
<a onclick="closeVideo('video')" data-prevent-touch="" style="width:100%; height:100%; display:block; background:transparent"></a>
Do not add any action under OnMouse Click.
Add to the video box (in the
MOVIEscene):
<video ontimeupdate="trackVideo()" width="100%" height="100%" controls="" preload="metadata" id="video" onended="closeVideo('video')">
<source src="index.hyperesources/Nomdevotrevideo.mp4">
Votre navigateur ne supporte pas la vidéo.
</video>Select the button "Edit
<head>HTML" in the Document Inspector. Between the tags<head>and</head>, add the following code:
<script>
function playVideo(id) {
HYPE.documents['index'].showSceneNamed('MOVIE');
setTimeout(function () {
document.getElementById(id).play()
}, 0);
resetTrackingVariables();
}
function closeVideo(id) {
document.getElementById(id).pause();
document.getElementById(id).webkitExitFullscreen();
HYPE.documents['index'].showSceneNamed('1');
}
var vidElm;
var tracked_1;
var tracked_25;
var tracked_50;
var tracked_75;
var tracked_100;
var videoCursor;
var videoDuration;
var firstSecond;
var firstQurt;
var secondQurt;
var thirdQurt;
var trackPerc;
var trackPercentage;
function myCallback(hypeDocument, element, event) {
// run code here
vidElm = document.getElementById('video');
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
videoCursor;
videoDuration = 6;
firstSecond = videoDuration / videoDuration
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
}
if ("HYPE_eventListeners" in window === false) {
window.HYPE_eventListeners = Array();
}
window.HYPE_eventListeners.push({
"type": "HypeSceneLoad",
"callback": myCallback
});
function resetTrackingVariables() {
tracked_1 = false;
tracked_25 = false;
tracked_50 = false;
tracked_75 = false;
tracked_100 = false;
}
function trackVideo() {
videoCursor = Math.trunc(vidElm.currentTime);
videoDuration = vidElm.duration;
firstSecond = videoDuration / videoDuration;
firstQurt = videoDuration / 4;
secondQurt = firstQurt * 2;
thirdQurt = firstQurt * 3;
trackPerc = vidElm.currentTime * 100 / videoDuration;
trackPercentage = Math.trunc(trackPerc);
if (videoCursor >= firstSecond && videoCursor < firstQurt) {
if (!tracked_1) {
tracked_1 = true;
console.log("%c Custom_video_0.1sec", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_0.1sec');
}
}
if (videoCursor >= firstQurt && videoCursor < secondQurt) {
if (!tracked_25) {
tracked_25 = true;
console.log("%c Custom_video_25pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_25pc');
}
}
if (videoCursor >= secondQurt && videoCursor < thirdQurt) {
if (!tracked_50) {
tracked_50 = true;
console.log("%c Custom_video_50pc ", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_50pc');
}
}
if (videoCursor > thirdQurt) {
if (!tracked_75) {
tracked_75 = true;
console.log("%c Custom_video_75pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_75pc');
}
}
if (trackPercentage >= 98) {
if (!tracked_100) {
tracked_100 = true;
console.log("%c Custom_video_100pc", 'color: #009933');
LP.Pub.Tracking.CustomerEventPublisher.publish('Custom_video_100pc');
}
}
}
</script>ATTENTION:index is the name under which you created your project.MOVIE is the name of the scene where your video is found.
It is important to respect the assigned names and the case (lower/upper case) for the video embedding to function properly.
Export your ad, making sure to comply with the project name index.
Insert your video in
.mp4format in the folder index.hyperesources, using the name given. ex:Nomdevotrevideo.mp4)Test your ad.
Accordion interaction is not compatible with Hype software.
The Audio feature of the Hype software is not compatible with the La Presse+ application.
La Presse+ offers you to download the HYPE 3 plugin for free.
Integrated Legal button:
Add a legal button directly in your ad in HYPE.Easy Export for La Presse+:
The plugin will also allow you to export your HTML5 ad viaFile>Export HTML5>La Presse+... This action will create your ad in.zipformat.
How to install
Contact us
