Puoi impostare una creatività in modo che si espanda in direzioni diverse, a seconda della posizione in cui l'annuncio viene pubblicato nella pagina. Puoi programmare la creatività in modo che sia in grado di rilevare la propria posizione e determinare in che direzione espandersi. Ad esempio, abilitando la funzionalità di espansione multidirezionale (MDE), puoi impostare la stessa creatività in modo che si espanda verso destra quando è pubblicata sul lato sinistro della pagina e verso sinistra quando si trova sul lato destro.
- Nel file HTML, crea tre riquadri:
- Riquadro principale. Contiene sia il riquadro compresso sia quello espanso, incluse le diverse direzioni di espansione
- Riquadro compresso. Include i contenuti del riquadro compresso
- Riquadro espanso. Include 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 impostare gli offset per il riquadro compresso. Questo offset non interessa l'ambiente di test locale, quando l'annuncio viene attivato, la relativa porzione compressa verrà mostrata alle coordinate 0, 0. Questo metodo imposta le proprietà CSSmarginLeftemarginTopdel relativo elemento body posizionato. - Utilizza il metodo di Enabler
setIsMultiDirectionalper attivare le espansioni multidirezionali. - Utilizza il metodo Enabler
getExpandDirectionper determinare la direzione di espansione dell'annuncio e modificare in modo dinamico la posizione e l'animazione del riquadro espanso di conseguenza.
- Utilizza il metodo di Enabler
Esempio di layout del riquadro |
700 x 350: riquadro principale |
Crea tre oggetti nel file HTML utilizzando i tag <div>, quindi assegna gli ID.
Esempio di HTML
<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.
- Posiziona sempre il riquadro principale a 0,0 e assicurati che le dimensioni impostate siano sufficientemente grandi per contenere il riquadro compresso e tutte le possibili direzioni del riquadro espanso. Calcola le dimensioni del riquadro principale nel seguente modo:
- Larghezza del riquadro principale = Larghezza del riquadro espanso + (Larghezza del riquadro espanso - Larghezza del riquadro compresso)
- Altezza del riquadro principale = Altezza del riquadro espanso + (Altezza del riquadro espanso - Altezza del riquadro compresso)
- Esempio
Utilizzando l'immagine indicata in precedenza:- larghezza = 500 px + (500 px - 300 px) = 700 px
- altezza = 300 px + (300 px - 250 px) = 350 px
- Posiziona sempre l'area del riquadro compresso al centro del riquadro principale. Calcola questa posizione come indicato di seguito:
- left riquadro compresso= Larghezza del riquadro espanso [meno] Larghezza del riquadro compresso
- top riquadro compresso= Altezza del riquadro espanso [meno] Altezza del riquadro compresso
- Esempio
Utilizzando l'immagine indicata in precedenza:- left = 500 px - 300 px = 200 px
- top = 300 px - 250 px = 50 px
- La posizione del riquadro espanso dipende dalla direzione di espansione, ma deve essere modificata in modo dinamico utilizzando JavaScript. In questo esempio, sono state aggiunte classi per ogni direzione possibile, incluse le posizioni left e top. Successivamente, l'accesso a queste classi in JavaScript viene eseguito in base alla direzione rilevata dall'Enabler.
#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;
}
Imposta gli offset di pixel per il riquadro compresso dell'annuncio e le dimensioni del 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 questo scopo, utilizza il metodo setExpandingPixelOffsets dopo l'inizializzazione dell'Enabler:
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Come avviene per la definizione del riquadro compresso, anche i valori impostati per i parametri
leftetopdevono posizionare l'area del riquadro compresso al centro del riquadro principale. Calcola queste posizioni come indicato di seguito:- left = Larghezza del riquadro espanso meno Larghezza del riquadro compresso
- top = Altezza del riquadro espanso meno Altezza del riquadro compresso
- L'impostazione dei valori per
opt_expandedWidtheopt_expandedHeightrelativi alla funzionalità MDE è diversa dall'impostazione dell'espansione di base. Invece di impostare tali valori in modo che corrispondano alle dimensioni del riquadro espanso, li imposti affinché corrispondano alle dimensioni del riquadro principale. Calcola tali valori come indicato di seguito:opt_expandedWidth= Larghezza del riquadro espanso + (Larghezza del riquadro espanso - Larghezza del riquadro compresso)opt_expandedHeight= Altezza del riquadro espanso + (Altezza del riquadro espanso - Altezza del riquadro compresso)
Enabler.setExpandingPixelOffsets(
200, // Left offset of expanded ad
100, // Top offset of expanded ad
700, // Expanded width of ad
350); // Expanded height of ad
// Whether to start in expanded state. The default is false.
Enabler.setStartExpanded(false);
// Enable multidirectional expand in the "best available"
// direction based on the ad's position on the page.
// The default is false.
Enabler.setIsMultiDirectional(true);
if (Enabler.isInitialized) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
function enablerInitHandler() {
// Add code to load creative elements after the Enabler
// is initialized.
.
Devi modificare la posizione del riquadro espanso in quello principale a seconda della direzione di espansione. A tal fine, determina la direzione espansa utilizzando il metodo Enabler getExpandedDirection e modifica la creatività a seconda del momento di inizio dell'evento EXPAND_START. Nel file CSS di esempio riportato in precedenza, sono state impostate classi diverse per ogni direzione di espansione. Nello snippet seguente viene assegnata una classe className all'oggetto del riquadro espanso, in base alla direzione di espansione.
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
function() {
document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
// Add code for desired expansion animation.
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
function() {
// Add code to show expanded panel and load elements or
// start animation.
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
Quando visualizzi l'anteprima della creatività MDE a livello locale, vengono mostrate tutte le direzioni di espansione possibili ogni volta che espandi l'annuncio. Tali direzioni vengono visualizzate nel seguente ordine:
- tl: in alto a sinistra
- tr: in alto a destra
- bl: in basso a sinistra
- br: in basso a destra
Quando visualizzi l'anteprima in Studio, viene mostrata solo la direzione rilevata da Studio. Per eseguire test e visualizzare l'anteprima delle diverse direzioni, devi posizionare la creatività nella scheda Anteprima ed eseguire il test di ogni direzione.