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

Tool kit Tou.tv

Historique des modifications

Version	Date	Description	Modifié par

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

v7

16 mars 2023

Modifications au gabarit et assets

Rémi Lacorne

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 et un CSS.

En ce moment il vit ici :

HTML : https://ici.tou.tv/kit-commanditaire/index.html
CSS : https://ici.tou.tv/kit-commanditaire/css/style.css

Notes :

La plus récente version du kit (v7) se sert de la font radio-canada de google fonts (https://fonts.google.com/specimen/Radio+Canada ). Il n’est donc plus nécéssaire d’avoir ces fichiers en main. Les SVGs ont aussi été inlined afin de pouvoir les afficher localement. Le CSS est maintenant appelé directement du site web, et n’est plus nécéssaire à avoir en main pour développer.

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.

Repères