HTML5 expanding build guide

Konfigurowanie paneli głównych, zwiniętych i rozwiniętych

Umieszczanie reklamy na stronie i ustawianie kierunku rozwijania

Kreacje rozwijane obejmują dwie podstawowe funkcje, które pozwalają stronie zidentyfikować w pliku obiekt przedstawiający zwinięty panel oraz określić kierunek jego rozwijania. Jako że obiekt główny w pliku jest większy od obszaru panelu zwiniętego, a kierunek rozwijania może być dowolny, trzeba zdefiniować obszar zwinięty, by strona „wiedziała”, jak ma wyświetlać reklamę.

W momencie wyświetlania reklamy strona witryny określa położenie kreacji na podstawie określonego w pikselach odsunięcia od lewej i od góry oraz dopasowuje jej rozmiar do boksu reklamowego. Następnie określa kierunek jej rozwijania. Aby mogła to zrobić, musisz odpowiednio skonfigurować swoje pliki:

W pliku HTML utwórz trzy panele:
- Panel główny: zawiera zarówno panel zwinięty, jak i rozwinięty.
- 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 setExpandingPixelOffsets komponentu Enabler, by wyrównać zwinięty panel do miejsca docelowego reklamy. W poniższym przykładzie przesunięcie od lewej wynosi 200 pikseli.

2-part expanding ad in a web page. Collapsed portion is a 300x250 inpage colored purple and exanded is a 500X300 expanding left and down over content colored blue

300x250 = zwinięta
500x300 = rozwinięta

Aby mieć pewność, że po wyświetleniu w aplikacji reklama rozwinie się prawidłowo, musisz zaprojektować kreację tak, by rozwijała się w dół lub na pełny ekran. Dowiedz się, jak włączyć rozwijanie na pełny ekran

Tworzenie obiektów

Utwórz trzy obiekty w pliku HTML, korzystając z tagów <div>, a następnie przypisz im unikalne identyfikatory.

Fragment kodu

<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>

Określanie stylów obiektów

W pliku CSS dostosuj styl utworzonych obiektów, korzystając z przypisanych do nich identyfikatorów.

Panel główny musi mieć takie same wymiary jak panel rozwinięty i musi zawsze znajdować się w położeniu 0,0.
Położenie panelu zwiniętego zależy od kierunku rozwijania:
- Rozwijanie w prawo lub w prawo i w dół
  - left = 0px
  - top = 0px
- Rozwijanie w lewo lub w lewo i w dół
  - left = szerokość panelu rozwiniętego - szerokość panelu zwiniętego (na przykład 500px - 300px = 200px)
  - top = 0px
- Rozwijanie w prawo i w górę
  - left = 0px
  - top = wysokość panelu rozwiniętego - wysokość panelu zwiniętego (na przykład 300px - 250px = 50px)
- Rozwijanie w lewo i w górę
  - left = szerokość panelu rozwiniętego - szerokość panelu zwiniętego (na przykład 500px - 300px = 200px)
  - top = wysokość panelu rozwiniętego - wysokość panelu zwiniętego (na przykład 300px - 250px = 50px)
Panel rozwinięty powinien być zawsze umieszczany w położeniu 0,0.

Fragment kodu

#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;
}

Ustawianie odsunięcia położenia

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 rozwijania. Aby to zrobić, użyj metody setExpandingPixelOffsets.

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

Podobnie jak w przypadku określania stylu panelu zwiniętego, wartości ustawiane dla parametrów left i top zależą od kierunku rozwijania:
- Rozwijanie w prawo lub w prawo i w dół
  - left = 0px
  - top = 0px
- Rozwijanie w lewo lub w lewo i w dół
  - left = szerokość panelu rozwiniętego - szerokość panelu zwiniętego (na przykład 500px - 300px = 200px)
  - top = 0px
- Rozwijanie w prawo i w górę
  - left = 0px
  - top = wysokość panelu rozwiniętego - wysokość panelu zwiniętego (na przykład 300px - 250px = 50px)
- Rozwijanie w lewo i w górę
  - left = szerokość panelu rozwiniętego - szerokość panelu zwiniętego (na przykład 500px - 300px = 200px)
  - top = wysokość panelu rozwiniętego - wysokość panelu zwiniętego (na przykład 300px - 250px = 50px)
Ustaw właściwości opt_expandedWidth i opt_expandedHeight, by dopasować wymiary panelu rozwiniętego.

Fragment kodu

// Metodę można wywołać przed zdarzeniem INIT komponentu Enabler.
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
  450); // wysokość reklamy po rozwinięciu

Te parametry możesz też ustawić w interfejsie internetowym Studio po przesłaniu zasobów. Przeczytaj też informacje o właściwościach podglądu kreacji rozwijanej.

Ta strona może zawierać treści przetłumaczone przy użyciu technologii AI. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Czy to było pomocne?

Jak możemy ją poprawić?