В этой статье я покажу, как реализовать DFP в различных интерфейсных фреймворках, включая React.js, Vue.js и AMP.
Вы можете найти все примеры здесь.

Что такое DFP (DoubleClick for Publishers)?

DFP - это рекламная платформа, приобретенная Google в 2007 году.
Если у вас есть веб-сайт и вы хотите разместить рекламу, чтобы заработать деньги, вы можете использовать Google AdSense. Но если вы хотите продавать рекламу самостоятельно, DFP - мощный инструмент, который поможет вам управлять рекламой.

Как использовать DFP для управления рекламой на вашем сайте?

Во-первых, вам нужно создать рекламные блоки в консоли DFP (рекламный менеджер). и установите именно то место, где вы хотите показывать рекламу на своем веб-сайте.
Затем вы можете создать заказ объявлений для своего клиента в admanager и указать рекламный блок, в котором вы хотите отображать заказ. DFP автоматически отобразит созданный вами материал на основе заказа в зависимости от позиции рекламного блока.

В admanager есть множество настроек, которые помогут вам контролировать свою рекламу. Вы можете определить период отображения, максимальное количество показов и кликов, а также частоту для каждого отдельного пользователя (например, показывать только два раза в неделю) и т. Д.

В этой статье я остановлюсь на том, как интегрировать рекламный блок на ваш сайт. Если вы не знакомы с тем, как использовать admanager для создания рекламного блока и заказа рекламы, вы можете проверить официальный документ здесь.

Реализуйте DFP с помощью ванильного JavaScript.

[Пример]
Как и в Google Analytics, мы можем сгенерировать скрипт в консоли DFP:
1. перейти к инвентарю ›Рекламные блоки› Выберите рекламный блок
2. Нажмите СОЗДАТЬ ТЭГИ

Скрипты, включающие три шага, перечислены ниже:

  1. загрузить скрипт gpt (Google Publisher Tag)
<script async="async"
src="https://www.googletagservices.com/tag/js/gpt.js"></script>

2. определить рекламное место

<script>
  var googletag = googletag || {};
  googletag.cmd = googletag.cmd || [];
</script>
<script>
  googletag.cmd.push(function() {
    googletag.defineSlot(
      '/21737763597/adunit-1',
      [320, 100],
      'div-gpt-ad-1559997122392–0',
    ).addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
  });
</script>

3. отображать рекламный элемент и медийную рекламу.

<div
  id="div-gpt-ad-1559997122392–0"
  style="height:100px; width:320px;"
>
  <script>
    googletag.cmd.push(function() {
      googletag.display('div-gpt-ad-1559997122392–0');
    });
  </script>
</div>

React.js (хук)

["пример"]

Используя DFP в React, просто выполните три шага, как указано выше: загрузите скрипт gpt, определите рекламное место, обработайте элемент объявления и покажите рекламу.

Здесь мы используем перехватчик React для реализации DFP. Если вы не знакомы с хуком, вы можете проверить документ здесь.

  1. загрузить скрипт gpt
@public/index.html
<script
  async="async"
  src="https://www.googletagservices.com/tag/js/gpt.js"
></script>

2. Создайте настраиваемую ловушку для определения и отображения рекламного места.

@src/useDfpSlot.js
const useDfpSlot = ({ path, size, id }) => {
  useEffect(() => {
    const googletag = window.googletag || {};
    googletag.cmd = googletag.cmd || [];
    googletag.cmd.push(function() {
      googletag.defineSlot(path, size, id)
        .addService(googletag.pubads());
      googletag.pubads().enableSingleRequest();
      googletag.enableServices();
    });
    googletag.cmd.push(function() {
      googletag.display(id);
    });
  }, [path, size, id]);
};

3. отображать рекламный элемент.

@src/App.js
const App = () => {
   useDfpSlot({
    path: '/21737763597/adunit-1',
    size: [320, 100],
    id: 'div-gpt-ad-1559997122392–0',
   });
  return (
    <div
      id="div-gpt-ad-1559997122392–0"
      style={{ width: '320px', height: '100px' }}
    />
  )
};

Vue.js

["пример"]

Поскольку у нас еще нет хуков в Vue.js, поэтому здесь мы используем хуки жизненного цикла компонентов для обработки DFP.

  1. загрузить скрипт gpt
@public/index.html
<script
  async="async"
  src="https://www.googletagservices.com/tag/js/gpt.js"
></script>
<script type="text/javascript">
  window.googletag = window.googletag || {};
  window.googletag.cmd = window.googletag.cmd || [];
</script>

2. отобразить рекламный элемент, определить и отобразить рекламное место в установленном крючке.

PS. destroySlots в обработчике beforeCreate для предотвращения дублирования adUnit во время горячей перезагрузки

@src/components/DfpSlot.vue
<template>
  <div :id="id"></div>
</template>
<script>
  export default {
    name: 'DfpSlot',
    props: { size: Array, path: String, id: String },
    beforeCreate() {
      window.googletag.cmd.push(() => {
        window.googletag.destroySlots();
      });
    },
    mounted() {
      const { path, size, id } = this;
      window.googletag.cmd.push(() => {
        window.googletag.defineSlot(path, size, id)
          .addService(window.googletag.pubads());
        window.googletag.pubads().enableSingleRequest();
        window.googletag.enableServices();
        window.googletag.display(id);
      });
    },
  };
</script>

3. примените компонент DfpSlot

<dfp-slot
  path="/21737763597/adunit-1"
  :size="[320, 100]" id="div-gpt-ad-1559997122392–0"
/>

AMP

["пример"]

Внедрить DFP в AMP довольно просто, просто используйте amp-ad, как показано ниже:

  1. импортировать компонент amp-ad
<script async custom-element="amp-ad"
src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

2. добавить рекламный элемент

<amp-ad
  width="320"
  height="100"
  type="doubleclick"
  data-slot="/21737763597/adunit-1"
></amp-ad>

Но некоторые форматы DFP не поддерживаются в AMP.

- Межстраничные объявления

- Вспышка

- Креативы обслуживаются по HTTP.

GPT API

Вот API GPT, который мы использовали в наших примерах. Для получения дополнительной информации ознакомьтесь с документом.

  • googletag.cmd | Ссылка на глобальную очередь команд для асинхронного выполнения вызовов, связанных с GPT.
  • googletag.defineSlot (путь, размер, [div]) | Создает рекламное место с заданным путем и размером рекламного блока и связывает его с идентификатором элемента div на странице, которая будет содержать объявление.
  • googletag.enableServices () | Включает все службы GPT, определенные для рекламных мест на странице.
  • googletag.pubads () | Возвращает ссылку на службу pubads.
  • googletag.display (divOrSlot) | Дает указание сервисам слотов визуализировать слот.
  • googletag.destroySlots ([слоты]) | Уничтожает указанные слоты, удаляя все связанные объекты и ссылки на эти слоты из GPT.

Вывод

DFP - это мощная платформа для управления рекламой на вашем веб-сайте, которую легко интегрировать со всеми современными интерфейсными фреймворками. Но консоли DFP (admanager) может потребоваться время, чтобы ознакомиться со всеми сложными настройками.

Если у вас есть какие-либо вопросы или отзывы, не стесняйтесь оставлять свои комментарии.
Спасибо за чтение.

—

Ссылка