INTEGRATION WEB

Owned by ANNICK LALIBERTE
Last updated: Jul 14, 2021 by LAURENCE BOURQUE (Deactivated)
5 min read
Attention les informations suivantes ne sont plus à jour, veuillez contacter Laurence Bourque pour plus de détails.
Table des matières

Guide d'intégration de la publicité

Étapes à suivre pour l’intégration par page de la publicité
  1. Inclure les méta-tags fournis par le gestionnaire de publicité.
  2. Inclure JQuery 1.7.2+ ( tout en restant en version 1 )
  3. Inclure le script de géolocalisation.
  4. Inclure l’enveloppe du script de publicité dans le <HEAD>.
    Si une     version antérieure était déjà présente, il faut remplacer le fichier par l’enveloppe (lien externe.)
  5. Ajouter les formats de publicité fournis par le gestionnaire de publicité.
  6. Effectuer  la réduction du domaine (Nécessaire pour activer le maquillage)

Voici un exemple d’intégration du script de publicité pour un site externe:

<head>


<title>Exemple d’intégration de la publicité</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<!-- Étape 1 -->

<!-- Ajouter méta-tags fournis par le gestionnaire de publicité -->

<!-- Étape 2 (JQuery) -->

        <script src="jquery-1.7.2.js" type="text/javascript"></script>

<!-- Étape 3 (Géolocalisation) →

<script src="https://geoip.radio-canada.ca/geoip.js"

type="text/javascript"></script>

<!-- Étape 4 (Enveloppe du script de publicité →

<script language="javascript" type="text/javascript"

src="https://s.radio-canada.ca/_js/modules/modules.pub.js"></script>

<!-- Étape 6 – Effectuer la réduction de domaine →

<script language="javascript" type="text/javascript">

</script>

</head>

<body>

        

        <!-- Étape 5 – Ajouter les formats de publicité -->

<!-- Îlot colonne de droite 300x250,300x600 -->

1er:

<div class="srcPubZone" id="bigbox_resp_externe_1"></div>

2e:

<div class="srcPubZone" id="bigbox_resp_externe_2"></div>

<!-- Îlot colonne de gauche 300x250,300x600 →

1er:

<div class="srcPubZone" id="bigbox_resp_left_externe_1"></div>

2e:

<div class="srcPubZone" id="bigbox_resp_left_externe_2"></div>


</body>

Pour la version Mobile (Responsive)

Pour l’affichage des pubs sur la version mobile, les formats doivent s’afficher en format catfish.

Pour les téléphones:

  • le format bannière devient un 320x50 (en catfish).
  • les formats bigbox, ne sont plus affichés ni appelés.

Pour les Tablettes:

  • le format bannière sera seulement le 728x90 (en catfish)
  • les formats bigbox, sera seulement le 1er 300x250 (intégré dans la page), le 2e s'il y était dans la page desktop, ne doit pas s’afficher ni appelé.


Rafraîchir toutes les publicités


<!-- Pour recharger toutes les publicités présentes dans la page, il suffit de faire l’appel à la méthode srcPubLoad() -->
<script type="text/javascript">
        srcPubLoad();
</script>

Afficher/Rafraîchir une publicité spécifique


<!-- Pour recharger une publicité à la fois ou encore afficher une nouvelle publicité après le chargement initial, il suffit de faire l’appel à la méthode srcPubLoad() avec l’identifiant de la publicité à rafraîchir ou à afficher -->
<script type="text/javascript">
        srcPubLoad("#bigbox_resp_externe_1");

</script>


Contraintes d’intégration

Le script de publicité utilise la classe CSS srcPubZone. Vous pouvez utiliser cette classe pour votre intégration. Néanmoins, voici quelques contraintes à respecter :

  1. Il est important de ne plus spécifier de taille fixe pour cette classe et pour les conteneurs qui peuvent englober les publicités. Les tailles fixes empêchent les publicités de faire décaler de la page.
  2. Les publicités seront cachées initialement et s'afficheront au cours du chargement de la page. Dans le cas où il n'y a pas de publicité pour un ou plusieurs emplacements publicitaires de la page, le site décalera en conséquence. Par exemple, s'il n'y a pas de super-bannière, l'en-tête du site remplacera la place occupée par la super-bannière.
Publicité

Lors de la conception de site web adaptatif (responsive), il est important de mettre en place différents breakpoints et de s'assurer d'optimiser les formats publicitaires dans les différents breakpoints.


À titre d'exemple, en version mobile sur Radio-Canada.ca (correspond à nos breakpoints XS de 0 à 640 px et SM de 641 à 1023 px) la colonne de droite n'est pas visible ( ex: display:none }. Lors de la conception de projets, il est important de retirer la colonne de droite et de s'assurer que la publicité ne soit pas dans le DOM afin d'éviter des impressions avec une mauvaise "viewability".
Toujours sur Radio-Canada.ca, en version desktop ( XL / LG / MD ) une publicité doit être chargée dans la colonne de droite.
Les formats publicitaires inclus dans les sites web de Radio-Canada doivent être des formats qui répondent aux normes de "Viewability".
Pour plus d'informations sur ce qu'est la "viewability" visitez la page web suivante :
https://support.google.com/admanager/answer/4524488?hl=en

Voici un exemple de ce qui est fait pour les pages articles de Radio-Canada.ca pour s'assurer de répondre à la "viewability" en version desktop si la colonne de droite présente un trou dans le bas, par manque de contenu, nous ajoutons une fonctionnalité (smart sticky) :



Voici quelques captures d’écran pour montrer des exemples d’intégration :

Figure 1 - Déclinaison de la page d'accueil



Déploiement du fichier pour activer les publicités sur-demande.

Le fichier srcPubiframebusting.html doit être déployé dans le répertoire pub de la racine du serveur. Ce fichier doit être accessible de l’externe.

Par exemple :

Avant de déployer le fichier, il est important d’effectuer la réduction du nom de domaine dans l’entête du fichier.  Cette réduction est nécessaire pour que le fichier srcPubiframebusting.html puisse communiquer avec la page principale. Le domaine de la page principale et du fichier srcPubiframebusting.html doivent correspondre pour contourner la limitation du same-origin-policy.

<html>

<body onLoad="srcPubParentAction()">          

    <script type="text/javascript" language="javascript">

       

        document.domain = "nomdudomaine.ca";


        [...]

    </script>    

</body>

</html>

Exemple de réduction de domaine

Retour d’appel

Les retours d’appel doivent être insérés avant l’inclusion du script publicitaire. Voici des exemples de retour d’appel :

 // Après chaque chargement de publicité

        RadioCanada.Mod.oPub.afterEachAdLoaded = function (adUnit) {

            if ($(adUnit).hasClass('display-none')) {

                // Publicité non trouvée

            } else {

                // Publicité trouvée

            }

        };

        // Après que toutes les publicités aient été chargées

        RadioCanada.Mod.oPub.afterAllAdsLoaded = function (adUnits) {


        };

        // Avant chaque chargement de publicité

        RadioCanada.Mod.oPub.beforeEachAdLoaded = function (adunit) {

        };



Formats publicitaires obligatoires


RADIO-CANADA.CA

  • Îlots (big box, 300 x 250)
  • 1er îlot (300x250 ou 300x600* ou 300x1050**)
  • 2e îlot (300x250 ou 300x600*)
  • Emplacements logo pour les commanditaires (page émission)


TOU.TV

  • Îlot (300 x 250 ou 300x600*)
  • Interstitiel (1x1) [ Maquillage de la page ]
  • Emplacements logo pour les commanditaires (page émission)


ICIMUSIQUE.CA

  • Îlots (big box, 300 x 250)
  • 1er îlot (300x250 ou 300x600)
  • 2e îlot (300x250)
  • Interstitiel (1x1) [ Maquillage de la page ]
  • Logo du commanditaire dans le bouton de la webradio
  • Logo du commanditaire cliquable dans la console pendant l’écoute
  • Logo du commanditaire cliquable dans un genre musical


RDI

  • Super bannière (leaderboard, 728 x 90 ou 990x90 ou 990x250)
  • Îlots (big box, 300 x 250)
  • 1er îlot (300x250 ou 300x600 ou 300x1050**)
  • 2e îlot (300x250)


EXPLORA / ARTV

  • Super bannière (leaderboard, 728 x 90 ou 990x90 ou 990x250)
  • Îlots (big box, 300 x 250)
  • 1er îlot (300x250 ou 300x600* ou 300x1050**)


Notes importante:

* Pour le format pavé (billboard, 300 x 600), il utilise l’emplacement du premier big box pour s’afficher.

** Pour le format portrait (300 x 1 050), il utilise l’emplacement du premier big box pour s’afficher et accepté sur certaines pages seulement.


NOTE : Cette liste de formats doit être respectée lors de la production de toutes les nouvelles pages. Nous conseillons fortement d’en tenir compte dès le début d’un nouveau projet afin d’éviter d’avoir à modifier les maquettes par la suite.


Au cas ou l'intégration publicitaire se passerait mal, voici un lien exemple d'intégration, ne pas oublier de désactiver son adblock
https://jsfiddle.net/g4pfr7bk/

Dernières mises à jour:

Version

Date

Changements

Auteur

1.8

2015-06-25

Modification de la méthode d’intégration des pubs dans la page. Inclus, le mode responsive, la spécification de la colonne (droite ou gauche) et le changement de numérotation des pubs dans le cas ou il y a plusieurs pubs du même format dans la même page.

Laurence Morin-Daoust


Eric Chevrette

1.92019-06-04

Mise à jour incluant la notion de "Viewability"

Charles-Jeremy Colnet
2.02021-02-23Ajout JsfiddleCharles-Jeremy Colnet