Kreację możesz tak skonfigurować, by rozwijała się w różnych kierunkach w zależności od miejsca, w którym reklama wyświetla się na stronie. Kod kreacji wykrywa jej położenie i określa, w którym kierunku ją rozwinąć. Po włączeniu funkcji rozwijania wielokierunkowego (MDE) ta sama kreacja wyświetlona na przykład w lewej części strony może rozwijać się w prawo, a wyświetlona w prawej części – w lewo.
- W pliku HTML utwórz trzy panele:
- Panel główny: zawiera zarówno panel zwinięty, jak i rozwinięty, z uwzględnieniem różnych kierunków rozwinięcia.
- Panel zwinięty: zawiera elementy panelu zwiniętego.
- Panel rozwinięty: zawiera elementy panelu rozwiniętego.
- W pliku CSS określ style trzech obiektów, by odzwierciedlić pozycję reklamy i kierunek rozwijania.
- W pliku JavaScript:
- Użyj metody
setExpandingPixelOffsetskomponentu Enabler, by określić odsunięcia zwiniętego panelu. Nie mają one wpływu na lokalne środowisko testowania, ale po wyświetleniu reklamy jej zwinięta część będzie widoczna w położeniu 0, 0. Ta metoda ustawia właściwości CSSmarginLeftimarginTopelementu umieszczonego względnie w treści strony. - Użyj metody
setIsMultiDirectionalkomponentu Enabler, by włączyć rozwijanie wielokierunkowe. - Użyj metody
getExpandDirectionkomponentu Enabler, by ustalić kierunek rozwijania reklamy oraz dynamicznie dostosować położenie i animację panelu rozwiniętego.
- Użyj metody
Przykładowy układ paneli |
700 x 350 – panel główny |
Utwórz trzy obiekty w pliku HTML, korzystając z tagów <div>, a następnie przypisz im identyfikatory.
Przykładowy plik HTML
<body>
<div id="main-panel">
<div id="collapsed-panel">
<!-- Tu dodaj zwiniętą zawartość. -->
</div>
<div id="expanded-panel">
<!-- Tu dodaj rozwiniętą zawartość. -->
</div>
</div>
</body>
W pliku CSS dostosuj style utworzonych obiektów, korzystając z przypisanych do nich identyfikatorów.
- Panel główny zawsze powinien mieć współrzędne 0, 0. Upewnij się, że jego wymiary są wystarczająco duże, by pomieścić panel zwinięty i wszystkie możliwe wersje panelu rozwiniętego. Rozmiar panelu głównego oblicz w ten sposób:
- Szerokość panelu głównego = szerokość panelu rozwiniętego + (szerokość panelu rozwiniętego - szerokość panelu zwiniętego)
- Wysokość panelu głównego = wysokość panelu rozwiniętego + (wysokość panelu rozwiniętego - wysokość panelu zwiniętego)
- Przykład
Zgodnie z ilustracją powyżej:- Szerokość = 500 pikseli + (500 pikseli - 300 pikseli) = 700 pikseli
- Wysokość = 300 pikseli + (300 pikseli - 250 pikseli) = 350 pikseli
- Obszar panelu zwiniętego zawsze powinien być na środku panelu głównego. Jego położenie oblicz w ten sposób:
- Wartość left panelu zwiniętego = szerokość panelu rozwiniętego - szerokość panelu zwiniętego
- Wartość top panelu zwiniętego = wysokość panelu rozwiniętego - wysokość panelu zwiniętego
- Przykład
Zgodnie z ilustracją powyżej:- left = 500 pikseli - 300 pikseli = 200 pikseli
- top = 300 pikseli - 250 pikseli = 50 pikseli
- Położenie panelu rozwiniętego zależy od kierunku rozwinięcia. Musi zmieniać się dynamicznie w kodzie JavaScript. W naszym przykładzie dodaliśmy klasy, które odpowiadają każdemu możliwemu kierunkowi oraz zawierają wartości left i top. Korzystamy z nich w JavaScripcie w zależności od kierunku wykrytego przez komponent 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;
}
Ustaw odsunięcie panelu zwiniętego i wymiary panelu rozwiniętego reklamy (w pikselach). To ułatwia Studio rozpoznanie zarówno pozycji reklamy na stronie, na której została ona wyświetlona, jak i kierunku jej rozwinięcia. Użyj do tego metody setExpandingPixelOffsets po zainicjowaniu komponentu Enabler:
Enabler.setExpandingPixelOffsets(left, top, opt_expandedWidth, opt_expandedHeight);
- Tak jak w przypadku stylu panelu zwiniętego, wartości ustawione w parametrach
leftitopmuszą umieszczać obszar panelu zwiniętego na środku panelu głównego. Możesz je obliczyć w ten sposób:- left = szerokość panelu rozwiniętego - szerokość panelu zwiniętego
- top = wysokość panelu rozwiniętego - wysokość panelu zwiniętego
- Wartości
opt_expandedWidthiopt_expandedHeightw przypadku MDE ustawia się inaczej niż w podstawowej kreacji rozwijanej. Zamiast ustawiać je zgodnie z wymiarami panelu rozwiniętego, dopasuj je do wymiarów panelu głównego. Oblicz je w ten sposób:opt_expandedWidth= szerokość panelu rozwiniętego + (szerokość panelu rozwiniętego - szerokość panelu zwiniętego)opt_expandedHeight= wysokość panelu rozwiniętego + (wysokość panelu rozwiniętego - wysokość panelu zwiniętego)
Enabler.setExpandingPixelOffsets(
200, // Odsunięcie rozwiniętej reklamy od lewej
100, // Odsunięcie rozwiniętej reklamy od góry
700, // Szerokość reklamy po rozwinięciu
350); // Wysokość reklamy po rozwinięciu
// Czy rozpocząć w stanie rozwiniętym. Wartością domyślną jest false (fałsz).
Enabler.setStartExpanded(false);
// Włącz rozwinięcie wielokierunkowe w „najlepszym dostępnym”
// kierunku określanym na podstawie położenia reklamy na stronie.
// Wartością domyślną jest false (fałsz).
Enabler.setIsMultiDirectional(true);
if (Enabler.isInitialized) {
enablerInitHandler();
} else {
Enabler.addEventListener(studio.events.StudioEvent.INIT, enablerInitHandler);
}
function enablerInitHandler() {
// Dodaj kod, by ładować elementy kreacji po zainicjowaniu
// komponentu Enabler.
}
Położenie panelu rozwiniętego na panelu głównym musi zmieniać się w zależności od kierunku rozwinięcia. W tym celu ustal kierunek rozwinięcia, korzystając z metody getExpandedDirection komponentu Enabler, a po wywołaniu zdarzenia EXPAND_START dostosuj odpowiednio kreację. W przykładowym kodzie CSS powyżej każdy kierunek rozwinięcia ma własną klasę. We fragmencie kodu poniżej obiekt panelu rozwiniętego otrzymuje właściwość className w zależności od kierunku rozwinięcia.
function expandAd(e) {
Enabler.requestExpand();
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_START,
function() {
document.getElementById('expanded-panel').className = 'direction-' + Enabler.getExpandDirection();
// Dodaj kod animacji rozwinięcia.
Enabler.finishExpand();
});
Enabler.addEventListener(studio.events.StudioEvent.EXPAND_FINISH,
function() {
// Dodaj kod, by wyświetlić rozwinięty panel i załadować elementy lub
// rozpocząć animację.
});
}
document.getElementById('expand-button').addEventListener('click', expandAd, false);
Gdy wyświetlisz podgląd kreacji MDE lokalnie, przy każdym rozwinięciu reklamy prezentowany jest kolejny możliwy kierunek rozwinięcia. Kolejność jest następująca:
- tl: lewo i góra
- tr: prawo i góra
- bl: lewo i dół
- br: prawo i dół
W przypadku podglądu w Studio prezentowany jest tylko kierunek wykryty przez Studio. Aby przetestować różne kierunki na podglądzie, musisz umieścić kreację na karcie podglądu odpowiednio do oczekiwanego kierunku.