Positionner une annonce sur la page et définir la direction d'expansion
Deux des fonctions de base d'une création expand consistent à permettre au site Web d'identifier l'objet de votre fichier qui représente le panneau replié et à déterminer la direction d'expansion. La taille de l'objet principal du fichier est supérieure à celle de la zone du panneau replié. Par ailleurs, l'expansion peut être définie dans n'importe quelle direction. Il est donc important de configurer la zone repliée de sorte que la page puisse interpréter comment afficher l'annonce.
Lorsque l'annonce est diffusée sur une page Web, elle se positionne selon les décalages de pixels gauche et droit que vous définissez. De plus, la taille de la création est ajustée en fonction de l'espace publicitaire. La direction d'expansion est ensuite déterminée. Pour que ces opérations puissent être effectuées, vous devez configurer vos fichiers en conséquence comme suit :
- Dans le fichier HTML, créez trois panneaux :
- Panneau principal : contient les panneaux replié et déplié.
- Panneau replié : comporte le contenu du panneau replié.
- Panneau déplié : comporte le contenu du panneau déplié.
- Dans le fichier CSS, appliquez un style aux trois objets pour représenter la position de l'annonce et la direction d'expansion.
- Dans le fichier JavaScript, utilisez la méthode
setExpandingPixelOffsetsdu composant Enabler pour aligner le panneau replié sur l'emplacement de l'annonce. Dans l'exemple ci-dessous, le décalage vers la gauche est de 200 pixels.
300 x 250 = panneau replié
500 x 300 = panneau déplié
Pour vous assurer que l'expansion de votre annonce s'effectue correctement lors de sa diffusion dans une application, vous devez concevoir votre création de façon qu'elle se déplie vers le bas ou s'affiche en plein écran. Découvrez comment activer la mise en plein écran.
Créez trois objets dans le fichier HTML en utilisant des tags <div>, puis attribuez-leur des ID appropriés.
Extrait de code
<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>
Appliquez un style aux objets que vous avez créés dans le fichier CSS en utilisant les ID que vous leur avez attribués.
- Le panneau principal doit avoir les mêmes dimensions que le panneau déplié et être toujours positionné à l'emplacement 0,0.
- La position du panneau replié dépend de la direction d'expansion :
- Expansion vers la droite ou vers la droite/le bas
- position gauche = 0px
- position supérieure = 0px
- Expansion vers la gauche ou vers la gauche/le bas
- position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié (par exemple, 500px - 300px = 200px)
- position supérieure = 0px
- Expansion vers la droite/le haut
- position gauche = 0px
- position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié (par exemple, 300px - 250px = 50px)
- Expansion vers la gauche/le haut
- position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié (par exemple, 500px - 300px = 200px)
- position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié (par exemple, 300px - 250px = 50px)
- Expansion vers la droite ou vers la droite/le bas
- Veillez à toujours positionner le panneau déplié à l'emplacement 0,0.
#main-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
#collapsed-panel {
position: absolute;
left: 200px;
top: 0px;
width: 300px;
height: 250px;
}
#expanded-panel {
position: absolute;
left: 0px;
top: 0px;
width: 500px;
height: 300px;
}
Définissez les décalages de pixels du panneau replié de l'annonce et les dimensions du panneau déplié. Cela permettra à Studio d'identifier la position de l'annonce sur la page Web où elle est diffusée, ainsi que la direction d'expansion. Pour ce faire, utilisez la méthode setExpandingPixelOffsets.
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) ettop(position supérieure) dépendent de la direction d'expansion :- Expansion vers la droite ou vers la droite/le bas
- position gauche = 0px
- position supérieure = 0px
- Expansion vers la gauche ou vers la gauche/le bas
- position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié (par exemple, 500px - 300px = 200px)
- position supérieure = 0px
- Expansion vers la droite/le haut
- position gauche = 0px
- position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié (par exemple, 300px - 250px = 50px)
- Expansion vers la gauche/le haut
- position gauche = Largeur du panneau déplié [moins] Largeur du panneau replié (par exemple, 500px - 300px = 200px)
- position supérieure = Hauteur du panneau déplié [moins] Hauteur du panneau replié (par exemple, 300px - 250px = 50px)
- Expansion vers la droite ou vers la droite/le bas
- Définissez
opt_expandedWidthetopt_expandedHeighten fonction des dimensions du panneau déplié.
// Peut être appelé avant l'événement INIT du composant Enabler.
Enabler.setExpandingPixelOffsets(
200, // Décalage vers la gauche de l'annonce dépliée
100, // Décalage vers le haut de l'annonce dépliée
700, // Largeur développée d'une annonce
450); // Hauteur développée d'une annonce