Rozmiary reklam

Każdy zdefiniowany przez Ciebie boks reklamowy musi określać rozmiary reklam odpowiednie do wyświetlania w nim gniazdo. Sposób określania rozmiarów reklam zależy od ich typu a także rozmiar i elastyczność samych boksów reklamowych.

W niektórych przypadkach rozmiar reklamy może zostać zastąpiony na poziomie elementu zamówienia w Google Ad Manager, Więcej informacji znajdziesz w Centrum pomocy i innych.

Pełny kod przykładów uwzględnionych w tym przewodniku można znaleźć na stronie reklamy rozmiary.

Reklamy o stałym rozmiarze

Możesz zdefiniować boks reklamowy o jednym 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, jeśli pracujesz z reklamami o stałym rozmiarze, określać rozmiar elementu <div>, w którym zostanie wyrenderowana kreacja. Od są często renderowane asynchronicznie, mogą powodować, że inne elementy zmieni się, jeśli zostanie dla nich za mało miejsca.

Reklamy w wielu rozmiarach

Jeśli reklama obsługuje wiele rozmiarów, podczas definiując boks reklamowy.

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

W tym przykładzie kreacje o rozmiarach 300x250, 728x90 i 750x200 mogą zostać . Ad Manager uwzględnia tylko kreacje pasujące do tych rozmiarów podczas procesu wyboru reklamy.

Jeśli nie określono wymiarów boksu reklamowego <div> w kodzie CSS, GPT automatycznie ustawia takie same wymiary jak najkrótszy zadeklarowana wysokość i najszersza zadeklarowana szerokość powyżej 1 piksela przy wywołaniu funkcji display(). W tym przypadku jest to 750x90. Jednak ten rozmiar może wystąpić po upływie inne treści na stronie, powodując przesunięcie tych treści. Aby unikać dla przesunięć układu, rezerwuj przestrzeń za pomocą CSS, jak pokazano na ilustracji Przewodnik po minimalizowaniu przesunięcia układu.

Podczas pracy z reklamami o wielu rozmiarach upewnij się, że układ jest wystarczająco elastyczny, obsługiwać reklamę o największym podanym rozmiarze. Dzięki temu kreacje nie będą przypadkowo przycięte.

Reklamy elastyczne

Reklamy elastyczne nie mają stałego rozmiaru, ale dostosowują się do treści kreacji. wyświetlacz. Reklamy natywne są obecnie jedyną reklamą elastyczną obsługiwane przez Ad Managera.

W przypadku reklam elastycznych możesz 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, zmieni rozmiar tak, by pasował do treści kreacji. Czynności GPT aby zmienić rozmiar boksu reklamowego w następujący sposób:

  1. Otrzymano odpowiedź na reklamę.
  2. Treść kreacji jest zapisywana w elemencie iframe, którego początkowa wysokość jest ustawiona na 0px a szerokość ustawiona na 100%.
  3. Po zakończeniu wczytywania wszystkich zasobów elementu iframe kreacja jest tworzona widoczna przez ustawienie wysokości elementu iframe równej wysokości Element <body> w elemencie iframe.
.

Reklamy elastyczne

Reklamy elastyczne rozszerzają reklamy o wielu rozmiarach i umożliwiają określanie rozmiaru do wyświetlenia w zależności od rozmiaru widocznego obszaru przeglądarki użytkownika. Ta funkcja może służyć do kontrolowania rozmiaru wyświetlanych kreacji. na różne rodzaje urządzeń (komputery, tablety, komórki itp.).

Jest to możliwe, definiując mapowanie między rozmiarem widocznego obszaru i rozmiarem reklamy. a następnie skojarzenie tego mapowania 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:

  • Gdy widoczny obszar jest większy niż 1024x768, mogą się wyświetlać reklamy o rozmiarze 750x200 lub 728x90.
  • Gdy 1024x768 > widoczny obszar >= 640x480, mogą być wyświetlane reklamy o rozmiarze 300x250.
  • Gdy widoczny obszar < 640x480, nie mogą się wyświetlać żadne reklamy.

GPT wykrywa rozmiar widocznego obszaru przeglądarki, i użyć największego pasującego mapowania. Aby określić największą mapowanie GPT najpierw uwzględnia szerokość, a potem wysokość (tzn. [100, 10] [10, 100]). W przypadku błędu mapowania lub jeśli widoczny obszar nie można określić rozmiaru, zostanie użyty rozmiar podany w atrybucie defineSlot().

Mapowanie jest następnie powiązane z boksem reklamowym przez wywołanie metody Slot.defineSizeMapping(). Ta metoda akceptuje tablicę mapowań w następującym 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. SizeMappingBuilder używane w przykład powyżej to wygodny sposób na wygenerowanie tablicy w tym formacie, gdzie rozmiary są automatycznie uporządkowane od największego do najmniejszego. Pod tym kątem dane wyjściowe funkcji SizeMappingBuilder.build() to:

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