Posizionare un annuncio sulla pagina e impostare la direzione di espansione
Due delle funzioni di base di una creatività espandibile sono quella di aiutare il sito web a individuare l'oggetto del file che rappresenta il riquadro nello stato compresso e quella di determinare la direzione di espansione. Poiché l'oggetto principale del file è più grande dell'area del riquadro compresso e l'espansione può essere impostata in qualsiasi direzione, è importante definire l'area compressa in modo che la pagina visualizzi correttamente l'annuncio.
Quando l'annuncio viene pubblicato sulla pagina di un sito, la pagina posiziona la creatività in base alle impostazioni dell'offset di pixel superiori e da sinistra, oltre a far corrispondere le dimensioni della creatività all'area annuncio. In seguito, determina la direzione di espansione. A tale scopo, imposta i file di conseguenza.
- Nel file HTML, crea tre riquadri:
- Riquadro principale. Contiene sia il riquadro compresso, sia quello espanso.
- Riquadro compresso. Contiene i contenuti del riquadro compresso.
- Riquadro espanso. Contiene i contenuti del riquadro espanso.
- Nel file CSS, definisci i tre oggetti in modo che riflettano la posizione annuncio e la direzione di espansione.
- Nel file JavaScript, utilizza il metodo di Enabler
setExpandingPixelOffsetsper allineare i riquadri compressi al posizionamento dell'annuncio. Nell'esempio sottostante, l'offset sinistro è 200 pixel.
300 x 250 = compresso
500 x 300 = espanso
Per garantire l'espansione corretta degli annunci pubblicati in-app, devi sviluppare la creatività in modo che si espanda verso il basso o a schermo intero. Scopri come attivare l'espansione a schermo intero
Crea tre oggetti nel file HTML utilizzando i tag <div>, quindi assegna gli opportuni ID.
Snippet di codice
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
</div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
</div>
</div>
</body>
Definisci gli oggetti creati nel file CSS utilizzando gli ID loro assegnati.
- Il riquadro principale deve avere le stesse dimensioni del riquadro espanso e deve essere sempre posizionato a 0,0.
- La posizione del riquadro compresso dipende dalla direzione di espansione:
- Espansione verso destra o verso destra/verso il basso
- left = 0px
- top = 0px
- Espansione verso sinistra o verso sinistra/verso il basso
- left = Larghezza del riquadro espanso [meno] Larghezza del riquadro compresso (ad esempio, 500 px - 300 px = 200 px)
- top = 0px
- Espansione verso destra/verso l'alto
- left = 0px
- top = Altezza del riquadro espanso [meno] Altezza del riquadro compresso (ad esempio, 300 px - 250 px = 50 px)
- Espansione verso sinistra/verso l'alto
- left = Larghezza del riquadro espanso [meno] Larghezza del riquadro compresso (ad esempio, 500 px - 300 px = 200 px)
- top = Altezza del riquadro espanso [meno] Altezza del riquadro compresso (ad esempio, 300 px - 250 px = 50 px)
- Espansione verso destra o verso destra/verso il basso
- Posiziona sempre il riquadro espanso a 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;
}
Imposta gli offset di pixel per il riquadro compresso dell'annuncio e le dimensioni per il riquadro espanso. In questo modo, Studio è in grado di individuare sia la posizione dell'annuncio nella pagina del sito in cui viene pubblicato, sia la direzione di espansione. A tal fine, utilizza il metodo setExpandingPixelOffsets.
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Come avviene per la definizione del riquadro compresso, i valori impostati per i parametri
leftetopdipendono dalla direzione di espansione:- Espansione verso destra o verso destra/verso il basso
- left = 0px
- top = 0px
- Espansione verso sinistra o verso sinistra/verso il basso
- left = Larghezza del riquadro espanso [meno] Larghezza del riquadro compresso (ad esempio, 500 px - 300 px = 200 px)
- top = 0px
- Espansione verso destra/verso l'alto
- left = 0px
- top = Altezza del riquadro espanso [meno] Altezza del riquadro compresso (ad esempio, 300 px - 250 px = 50 px)
- Espansione verso sinistra/verso l'alto
- left = Larghezza del riquadro espanso [meno] Larghezza del riquadro compresso (ad esempio, 500 px - 300 px = 200 px)
- top = Altezza del riquadro espanso [meno] Altezza del riquadro compresso (ad esempio, 300 px - 250 px = 50 px)
- Espansione verso destra o verso destra/verso il basso
- Imposta
opt_expandedWidtheopt_expandedHeightin modo che corrispondano alle dimensioni del riquadro espanso.
// Can be called before the Enabler's INIT event.
Enabler.setExpandingPixelOffsets(
200, // left offset of expanded ad
100, // top offset of expanded ad
700, // expanded width of ad
450); // expanded height of ad