Ta strona została przetłumaczona przez Cloud Translation API.

Rozmiary reklam

W każdym zdefiniowanym boksie reklamowym musisz określić rozmiary reklam, które mogą być w nim wyświetlane. Sposób określania rozmiarów reklam zależy od typu wyświetlanych reklam oraz rozmiarów i elastyczności samych boksów reklamowych.

W niektórych przypadkach rozmiar reklamy może zostać zastąpiony na poziomie elementu zamówienia w usłudze Google Ad Manager. Aby dowiedzieć się więcej, odwiedź Centrum pomocy.

Pełny kod przykładów podanych w tym przewodniku znajdziesz na przykładowej stronie rozmiarów reklam.

Reklamy o stałym rozmiarze

Możesz zdefiniować boks reklamowy o 1 stałym rozmiarze.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

W tym przykładzie będą wyświetlane tylko kreacje o rozmiarze 300x250.

Co ważne, w przypadku korzystania z reklam o stałym rozmiarze zdecydowanie zalecamy zdefiniowanie rozmiaru elementu <div>, w którym będzie renderowana kreacja. Ponieważ kreacje są często renderowane asynchronicznie, mogą powodować przesunięcie innych elementów na stronie, jeśli jest dla nich niewystarczająca ilość miejsca.

Reklamy o wielu rozmiarach

Jeśli reklama obsługuje wiele rozmiarów, przy definiowaniu boksu reklamowego podaj listę obsługiwanych rozmiarów.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

W tym przykładzie mogą być wyświetlane kreacje o rozmiarach 300x250, 728x90 i 750x200. Ad Manager uwzględnia kreacje o tych rozmiarach tylko podczas procesu wyboru reklamy.

Jeśli nie określisz wymiarów boksu reklamowego <div> w CSS, GPT automatycznie ustawi wymiary równe najkrótszej zadeklarowanej wysokości i najszerszej zadeklarowanej szerokości ponad 1 piks. po wywołaniu elementu display(). W tym przypadku jest to 750x90. Jednak taki rozmiar może się zmienić po wczytaniu innych treści na stronie, co spowoduje ich przesunięcie. Aby uniknąć przesunięć układu, zarezerwuj miejsce za pomocą CSS w sposób podany w przewodniku po minimalizowaniu przesunięcia układu.

Gdy pracujesz z reklamami o wielu rozmiarach, upewnij się, że układ jest wystarczająco elastyczny, by obsłużyć reklamę o największym określonym rozmiarze. Pozwoli to uniknąć przypadkowego przycięcia kreacji.

Reklamy elastyczne

Reklamy elastyczne nie mają stałego rozmiaru, ale dostosowują się do wyświetlanych treści. Reklamy natywne to obecnie jedyny elastyczny typ reklamy obsługiwany w usłudze Ad Manager.

W przypadku reklam elastycznych można określić niestandardowy rozmiar fluid.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

W tym przykładzie boks reklamowy będzie miał szerokość swojego kontenera nadrzędnego i zmieni jego wysokość, by pasował do zawartości kreacji. Tag GPT zmienia rozmiar boksu reklamowego w następujący sposób:

Otrzymano odpowiedź na żądanie reklamy.
Treść kreacji jest zapisana w elemencie iframe z początkową wartością wysokości 0px i szerokością ustawioną na 100%.
Gdy wczytają się wszystkie zasoby w elemencie iframe, kreacja staje się widoczna. Aby to zrobić, ustaw wysokość tego elementu równą wysokości elementu <body> w elemencie iframe.

Reklamy elastyczne

Reklamy elastyczne rozszerzają reklamy o wielu rozmiarach i pozwalają określić rozmiar wyświetlanych kreacji w zależności od rozmiaru widocznego obszaru w przeglądarce wysyłającej żądanie. Dzięki tej funkcji możesz kontrolować rozmiar kreacji wyświetlanych na różnych typach urządzeń (komputerach, tabletach, urządzeniach mobilnych itp.).

Aby to zrobić, zdefiniuj mapowanie między rozmiarem widocznego obszaru a rozmiarem reklamy, a potem kojarzy to mapowanie z boksem reklamowym.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

W tym przykładzie mapowanie określa:

Jeśli widoczny obszar ma wartość >= 1024x768, mogą się wyświetlać reklamy o rozmiarach 750x200 lub 728x90.
Gdy 1024x768 > widoczny obszar >= 640x480, mogą się wyświetlać reklamy o rozmiarze 300x250.
Reklamy nie mogą się wyświetlać, gdy widoczny obszar < 640x480.

GPT wykryje rozmiar widocznego obszaru przeglądarki wysyłającej żądanie i użyje największego pasującego mapowania. Aby określić największe mapowanie GPT, najpierw bierze pod uwagę szerokość, a potem wysokość (czyli [100, 10] > [10, 100]). W przypadku błędu w mapowaniu lub gdy nie można określić rozmiaru widocznego obszaru, zostaną użyte rozmiary podane w polu defineSlot().

Mapowanie jest następnie powiązane z boksem reklamowym przez wywołanie metody Slot.defineSizeMapping(). Ta metoda akceptuje tablicę mapowań w tym formacie:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

Kolejność rozmiarów widocznego obszaru w tej tablicy określa ich priorytet. Element SizeMappingBuilder użyty w przykładzie powyżej to wygodny sposób na wygenerowanie tablicy w tym formacie, której rozmiary są automatycznie uporządkowane od największego do najmniejszego. W tym przykładzie dane wyjściowe funkcji SizeMappingBuilder.build() to:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]