Размеры объявлений

Для каждого рекламного места, которое вы определяете, должны быть указаны размеры объявлений, которые могут показываться в этом рекламном месте. Способ указания размеров объявлений зависит от типа отображаемых объявлений, а также от размера и гибкости самих рекламных мест.

В некоторых случаях размер объявления может быть переопределен на уровне позиции в Google Ad Manager. Посетите справочный центр, чтобы узнать больше.

Полный код примеров, включенных в это руководство, можно найти на странице с образцами размеров объявлений .

Объявления фиксированного размера

Вы можете определить рекламное место с одним фиксированным размером.

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

В этом примере будут показываться только объявления размером 300x250 .

Ключевой момент: при работе с объявлениями фиксированного размера мы настоятельно рекомендуем вам определить размер элемента <div> , в котором будет отображаться креатив. Поскольку креативы часто отображаются асинхронно, они могут привести к смещению других элементов на странице, если для них зарезервировано недостаточно места.

Объявления разных размеров

Если объявление поддерживает несколько размеров, укажите список поддерживаемых размеров при определении рекламного места.

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

В этом примере можно показывать объявления размером 300x250 , 728x90 и 750x200 . При выборе объявлений Менеджер рекламы учитывает только креативы, соответствующие этим размерам.

Если размеры для рекламного места <div> не указаны в CSS, GPT автоматически устанавливает размеры, равные минимальной заявленной высоте и самой широкой объявленной ширине более 1 пикселя при вызове display() . В данном случае это будет 750x90 . Однако такое изменение размера может произойти после загрузки другого содержимого на странице, что приведет к его смещению. Чтобы избежать смещения макета, зарезервируйте место с помощью CSS, как показано в руководстве по минимизации макета .

При работе с объявлениями нескольких размеров убедитесь, что ваш макет достаточно гибок, чтобы поддерживать объявление максимального указанного размера. Это позволит избежать случайной обрезки объявлений.

Гибкие объявления

Гибкие объявления не имеют фиксированного размера, а скорее адаптируются к отображаемому креативному контенту. Нативные объявления в настоящее время являются единственным гибким типом объявлений, поддерживаемым Менеджером рекламы.

При работе с гибкими объявлениями можно указать fluid размер.

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

В этом примере рекламное место будет иметь ширину родительского контейнера, а его высота будет изменена в соответствии с содержимым объявления. Шаги, которые GPT предпринимает для изменения размера рекламного места, следующие:

  1. Ответ на объявление получен.
  2. Креативный контент записывается в iframe с начальной высотой 0px и шириной 100% .
  3. После завершения загрузки всех ресурсов в iframe креатив становится видимым, если установить высоту iframe, равную высоте элемента <body> iframe.

Адаптивная реклама

Адаптивные объявления расширяют возможности объявлений с разными размерами и позволяют указать размер отображаемых объявлений в зависимости от размера области просмотра браузера, отправляющего запрос. Эту функцию можно использовать для управления размером объявлений, отображаемых на различных типах устройств (настольные компьютеры, планшеты, мобильные устройства и т. д.).

Это достигается путем определения соответствия между размером области просмотра и размером объявления, а затем связывания этого сопоставления с рекламным местом.

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

В этом примере сопоставление указывает:

  • Если область просмотра >= 1024x768 , могут показываться объявления размером 750x200 или 728x90 .
  • Если 1024x768 > область просмотра >= 640x480 , могут показываться объявления размером 300x250 .
  • Если область просмотра < 640x480 , реклама показываться не может.

GPT определит размер области просмотра браузера, отправляющего запрос, и будет использовать максимально подходящее сопоставление. Чтобы определить наибольшее отображение, GPT сначала учитывает ширину, затем высоту (т. е. [100, 10] > [10, 100] ). В случае ошибки при сопоставлении или если размер области просмотра не может быть определен, будут использоваться размеры, указанные в defineSlot() .

Затем сопоставление связывается с рекламным местом путем вызова метода Slot.defineSizeMapping() . Этот метод принимает массив сопоставлений в следующем формате:

[
  [
    [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], ...]
  ],
  ...
]

Порядок размеров области просмотра в этом массиве определяет их приоритет. SizeMappingBuilder , используемый в приведенном выше примере, представляет собой удобный способ создания массива этого формата, размеры которого автоматически упорядочиваются от большего к меньшему. В этом примере выходные данные SizeMappingBuilder.build() :

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