Création de page de type “Contenu publicitaire” ICI TOU.TV

Tool kit Tou.tv

Historique des modifications

Version

Date

Description

Modifié par

V1

V2

V3

V4

v5

v6

21 novembre 2019

17 décembre 2019

15 septembre 2020

19 octobre 2020

28 avril 2020

1 mars 2022

Création du document

Mathieu Corriveau

Marie-Christine Daigneault

Philippe Roy

Daniel Martel-Gauthier

Contexte

Une page de type “Contenu annonceur” comprend :

Une vignette, placée par un édimestre sur un lineup de l’accueil de Tou.tv
Une page de type contenu, produite par l'équipe de la Créativité Média dont certains “assets” sont mises à jour par l'équipe de Tou.tv

Vignette

Le nouveau format est .jpg, 3840x2160 px doit être produit par l'équipe de la Créativité Média. Voici le .psd à titre de guide.

Contenu

Le kit contient principalement :

le <head> du site (s’assurer d’avoir: <meta name="robots" content="sponsored" /> ),
un <header>
une mention "CONTENU PUBLICITAIRE"
une mention légale
un <footer>.

Code

Un kit, incluant un HTML de base, un CSS et les Fonts de Radio-Canada est construit pour les contenus commandités.

En ce moment il vit ici :

HTML : https://ici.tou.tv/kit-commanditaires/index.html
CSS : https://ici.tou.tv/kit-commanditaires/style/base.css
Font : https://ici.tou.tv/kit-commanditaires/fonts/

Notes :

Pour obtenir les fonts de Radio-Canada, il faudra contacter Laurence Bourque au laurence.bourque@radio-canada.ca .

Ce kit sera sporadiquement mis à jour.
Il est de la responsabilité du producteur de contenus de débuter les travaux avec la dernière mise à jour de ces documents.

La navigation simplifiée a été faite pour être incorporée sur les sites externes de Tou.tv..
Au clique, l'utilisateur est redirigé sur la page d'accueil de TouTv.

Mention "CONTENU PUBLICITAIRE"

Cette mention, et son modal, ne doivent pas être déplacée ou retirée.

<div id="contenu-annonceur" class="banner">
   <span class="pleasenote-title">Contenu publicitaire</span>
   <div class="pleasenote-button">
      <button type="button" title="Plus d'informations sur le contenu annonceur">
         <svg
            aria-hidden="true"
            class="svg-icon icon-info_outlined"
            height="18"
            icon="info_outlined"
            width="18"
            >
            <use xlink:href="/kit-commanditaires/svg/toutv-icons-sprite.svg#info_outlined" />
         </svg>
         <svg
            aria-hidden="true"
            class="svg-icon icon-close_outlined"
            height="18"
            icon="close_outlined"
            width="18"
            >
            <use xlink:href="/kit-commanditaires/svg/toutv-icons-sprite.svg#close_outlined" />
         </svg>
      </button>
   </div>
   <div class="pleasenote-overlay"></div>
   <div class="pleasenote-container">
      <div class="pleasenote-inner">
         Ce contenu est payé par un annonceur. Il ne s'agit pas d'un contenu journalistique de Radio-Canada. 
         <a href="//solutionsmedia.cbcrc.ca/fr/page/contenu-publicitaire-transparence/" target="_blank" rel="noopener noreferrer">
            Consultez ce lien pour en savoir davantage&nbsp;
            <svg
               aria-hidden="true"
               class="svg-icon icon-link_external"
               height="14"
               icon="link_external"
               width="14"
               >
               <use xlink:href="/kit-commanditaires/svg/toutv-icons-sprite.svg#link_external" />
            </svg>
         </a>
      </div>
   </div>
</div>

Commentaires

Des commentaires ont été ajoutés dans le HTML pour indiquer à quels endroits il faut modifier le code pour inclure la mention "CONTENU PUBLICITAIRE".
Ces commentaires seront semblables à celui-ci:

<!--
  [METAS ICI] // Retirer les marqueurs de commentaire si vous ajoutez des metas
-->

<!--
  [Reste des fichiers ici]
-->

Mention légale (obligatoire, à ajouter)

La mention légale ne fait pas partie de ce tool kit car doit être contextualisée à l'annonceur, mais doit OBLIGATOIREMENT être inclus au bas de la page de l'annonceur. :

Ce contenu est payé par [nom de l’annonceur]. Il ne s'agit pas d'un contenu de Radio-Canada. Consultez ce lien pour en savoir davantage [icône lien externe]

Le footer pour sa part est le même que le site principal.

Restrictions

Les contenus des annonceurs doivent être approuvés par la direction de TOU.TV.

Les couleurs de TOU.TV ne doivent pas être utilisées pour la production de ces pages.

Ces pages ne doivent pas ressembler à une page de type Émission de TOU.TV.