Recherche
Effacer la recherche
Fermer la recherche
Applications Google
Menu principal

Guide de création du composant Expanding HTML5

Configurer une création expand multidirectionnelle

Vous pouvez configurer une création pour qu'elle se déplie dans différentes directions selon l'endroit où elle est diffusée sur une page. La création est capable de détecter sa position et de déterminer, en fonction de cette dernière, la direction dans laquelle elle doit se déplier. Par exemple, en activant la fonctionnalité d'expansion multidirectionnelle, vous pouvez faire en sorte qu'une même création se déplie vers la droite lorsqu'elle est diffusée sur le côté gauche de la page, et vers la gauche lorsqu'elle apparaît sur le côté droit.

2 expanding ad images, one on left with inpage ad that expands right, and one on right with inpage ad that expands left

blue letter a Expansion vers la droite    small green letter b Expansion vers la gauche

Configuration
  1. Dans le fichier HTML, créez trois panneaux :
    1. Panneau principal : contient les panneaux replié et déplié, y compris les différentes directions d'expansion.
    2. Panneau replié : comporte le contenu du panneau replié.
    3. Panneau déplié : comporte le contenu du panneau déplié.
  2. Dans le fichier CSS, appliquez un style aux trois objets pour représenter la position de l'annonce et la direction d'expansion.
  3. Dans le fichier JavaScript :
    1. Utilisez la méthode setExpandingPixelOffsets du composant Enabler pour définir des décalages pour le panneau replié. Ce décalage n'affecte pas l'environnement de test local, mais lorsque l'annonce est diffusée, la partie repliée de l'annonce apparaît à 0, 0. Cette méthode définit les propriétés CSS marginLeft et marginTop de l'élément "body" positionné de manière relative.
    2. Utilisez la méthode setIsMultiDirectional du composant Enabler pour activer les expansions multidirectionnelles.
    3. Utilisez la méthode getExpandDirection du composant Enabler pour déterminer la direction d'expansion de l'annonce. Ensuite, modifiez en conséquence de façon dynamique la position et l'animation du panneau déplié.

Exemple de mise en page du panneau

Multidirectional: Main page in bright green 700x350; collapsed inpage in brown 300x250; expanding in turquoise bottom and left, 500x300

 

 

 

700x350 – Panneau principal
300x250 – Panneau replié
500x300 – Panneau déplié

Créer des objets

Créez trois objets dans le fichier HTML à l'aide de tags <div>, puis attribuez-leur des ID.

Exemple HTML

<body>
  <div id="main-panel">
     <div id="collapsed-panel">
       <!-- Ajouter le contenu replié ici. -->
     </div>
     <div id="expanded-panel">
       <!-- Ajouter le contenu déplié ici. -->
     </div>
   </div>
</body>
Appliquer un style aux objets

Appliquez un style aux objets que vous avez créés dans le fichier CSS en utilisant les ID que vous leur avez attribués.

  • Positionnez systématiquement le panneau principal à l'emplacement 0,0. Veillez par ailleurs à ce que sa taille lui permette d'inclure le panneau replié, ainsi que toutes les directions possibles pour le panneau déplié. Calculez la taille du panneau principal comme suit :
    • Largeur du panneau principal = Largeur du panneau déplié + (Largeur du panneau déplié - Largeur du panneau replié)
    • Hauteur du panneau principal = Hauteur du panneau déplié + (Hauteur du panneau déplié - Hauteur du panneau replié)
    • Exemple
      Selon l'image présentée ci-dessus :
      • largeur = 500px + (500px - 300px) = 700px
      • hauteur = 300px + (300px - 250px) = 350px
  • Positionnez systématiquement la zone du panneau replié au centre du panneau principal. Calculez cette position comme suit :
    • Position gauche du panneau replié = Largeur du panneau déplié [moins] Largeur du panneau replié
    • Position supérieure du panneau replié = Hauteur du panneau déplié [moins] Hauteur du panneau replié
    • Exemple
      Selon l'image présentée ci-dessus :
      • position gauche = 500px - 300px = 200px
      • position supérieure = 300px - 250px = 50px
  • La position du panneau déplié dépend de la direction d'expansion, mais doit être modifiée de façon dynamique à l'aide de JavaScript. Dans cet exemple, des classes ont été ajoutées pour chaque direction possible, y compris les positions gauche et supérieure. Ces classes sont ensuite utilisées dans le fichier JavaScript en fonction de la direction détectée par le composant Enabler.
Exemples de styles
#main-panel {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 700px;
  height: 350px;
}
   
#collapsed-panel {
  position: absolute;
  left: 200px;
  top: 50px;
  width: 300px;
  height: 250px;
}
      
#expanded-panel {
  position: absolute;
  width: 500px;
  height: 300px;
}
      
.direction-tl {
  left: 0px;
  top: 0px;
}
      
.direction-tr {
  left: 100px;
  top: 0px;
}
      
.direction-bl {
  left: 0px;
  top: 200px;
}
      
.direction-br {
  left: 100px;
  top: 200px;
}
Définir des décalages de positionnement

Définissez les décalages de pixels du panneau replié de l'annonce et les dimensions du panneau déplié. Cela permet à Studio d'identifier la position de l'annonce sur la page Web où elle est diffusée, ainsi que la direction d'expansion. Pour cela, utilisez la méthode setExpandingPixelOffsets une fois le composant Enabler initialisé :

Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);

  • De la même façon que pour l'application d'un style au panneau replié, les valeurs que vous définissez pour les paramètres left (position gauche) et top (position supérieure) doivent positionner la zone correspondant au panneau replié au centre du panneau principal. Calculez ces positions comme suit :
    • position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié
    • position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié
  • La définition des valeurs des paramètres opt_expandedWidth et opt_expandedHeight pour l'expansion multidirectionnelle ne s'effectue pas de la même manière que la configuration de l'expansion standard. Ces valeurs doivent être définies de façon à correspondre aux dimensions du panneau principal, et non pas à celles du panneau déplié. Calculez-les comme suit :
    • opt_expandedWidth = Largeur du panneau déplié + (Largeur du panneau déplié - Largeur du panneau replié)
    • opt_expandedHeight = Hauteur du panneau déplié + (Hauteur du panneau déplié - Hauteur du panneau replié)
Exemple de code
Enabler.setExpandingPixelOffsets(
    200,  // Décalage gauche de l'annonce dépliée
    100,  // Décalage supérieur de l'annonce dépliée
    700,  // Largeur développée d'une annonce
    350); // Hauteur développée d'une annonce
      
// Afficher ou non à l'état déplié. La valeur par défaut est false.
Enabler.setStartExpanded(false);

// Permettre une expansion multidirectionnelle dans la
// meilleure direction possible en fonction de la position de l'annonce sur la page.
// La valeur par défaut est false.
Enabler.setIsMultiDirectional(true);

if (Enabler.isInitialized) {
  enablerInitHandler();
} else {
  Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}

function enablerInitHandler() {
  // Ajouter du code pour charger les éléments de la création une fois que la méthode Enabler
  // a été initialisée.
}
Vous pouvez par ailleurs définir ces paramètres dans l'interface utilisateur de DoubleClick Studio après avoir importé vos éléments. Consultez également la page Propriétés de l'aperçu d'une création expand.
Modifier de façon dynamique la position du panneau déplié

Vous devez modifier la position du panneau déplié sur le panneau principal en fonction de la direction d'expansion. Pour cela, déterminez la direction d'expansion au moyen de la méthode getExpandedDirection du composant Enabler et modifiez la création en conséquence lorsque l'événement EXPAND_START est déclenché. Dans l'exemple CSS ci-dessus, différentes classes sont définies pour chaque direction d'expansion. Dans l'extrait de code ci-dessous, un élément className est affecté à l'objet du panneau déplié en fonction de la direction d'expansion.

Exemple de code
function expandAd(e) {
  Enabler.requestExpand();
  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
      function() {
        document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
        // Ajouter du code pour l'animation d'expansion souhaitée.
        Enabler.finishExpand();
  });

  Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
      function() {
        // Ajouter du code pour afficher le panneau déplié et charger des éléments ou
        // lancer l'animation.
  });
}

document.getElementById('expand-button').addEventListener('click', expandAd, false); 
Aperçu

Lorsque vous prévisualisez localement une création expand multidirectionnelle, toutes les directions d'expansion possibles s'affichent chaque fois que vous dépliez l'annonce. Elles sont indiquées dans l'ordre suivant :

  • tl : vers le haut et la gauche
  • tr : vers le haut et la droite
  • bl : vers le bas et la gauche
  • br : vers le bas et la droite

Lorsque vous prévisualisez une création dans DoucleClick Studio, seule la direction détectée par DoubleClick Studio est indiquée. Pour tester et prévisualiser la création dans les différentes directions, vous devez la positionner en conséquence dans l'onglet d'aperçu. Pour en savoir plus, consultez la section Création expand multidirectionnelle sur la page d'aperçu dynamique personnalisée.

Cet article vous a-t-il été utile ?