Pierwsze kroki z tagiem wydawcy Google

Tag wydawcy Google (GPT) to biblioteka tagów reklam Google Ad Manager,

Tagów GPT możesz używać do dynamicznego tworzenia żądań reklam. GPT pobiera kluczowe informacje, takie jak kod jednostki reklamowej, rozmiar reklamy kierowania niestandardowego, tworzy żądanie i wyświetla reklamę na stronach internetowych.

Więcej informacji o GPT: Centrum pomocy Ad Managera.

Oto kilka przykładów, od których możesz zacząć korzystać z GPT. Jeśli jeśli potrzebujesz dodatkowej pomocy dotyczącej GPT, zapoznaj się z pomocą .

Wyświetlanie reklamy testowej

Z przykładu poniżej dowiesz się, jak utworzyć stronę testową, używa tagu GPT do wczytywania reklamy ogólnej z sieci testowej Google.

Pełny kod tego przykładu znajdziesz na stronie wyświetlić przykładową stronę reklamy testowej.

Tworzenie podstawowego dokumentu HTML

W edytorze tekstu utwórz podstawowy dokument HTML o nazwie hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
  </body>
</html>

Wczytywanie biblioteki GPT

Wczytaj bibliotekę GPT, dodając ten kod do sekcji <head> dokumentu HTML.

Ten kod wczytuje bibliotekę GPT z https://securepubads.g.doubleclick.net/tag/js/gpt.js. Gdy biblioteka w pełni załadowany, przetwarza wszystkie polecenia znajdujące się w kolejce googletag.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

Zdefiniuj boks reklamowy

Zdefiniuj boks reklamowy i zainicjuj tag GPT za pomocą parametru googletag.enableServices().

Ten kod najpierw upewnia się, że obiekt googletag jest dostępny, a następnie umieszcza w kolejce które tworzy boks reklamowy i włącza GPT.

Boks reklamowy w tym przykładzie wczyta z reklamy reklamę o rozmiarze 300x250 jednostka określona przez ścieżkę /6355419/Travel/Europe/France/Paris. Reklama będzie wyświetlane w elemencie <div id="banner-ad"> w treści strony, co zostaną dodane w następnym kroku.
Ścieżka jednostki reklamowej ma format /network-code/[parent-ad-unit-code/.../]ad-unit-code, gdzie:
- network-code to unikalny identyfikator Sieć w usłudze Ad Manager, do której należy jednostka reklamowa
- parent-ad-unit-code to kody wszystkich nadrzędnych jednostek reklamowych (tylko dotyczy jednostek reklamowych innych niż najwyższego poziomu)
- ad-unit-code to kod jednostki reklamowej, która ma się wyświetlać
Pamiętaj, że wszystkie kody jednostek reklamowych zawarte w ścieżce jednostki reklamowej muszą być zgodne z reguł formatowania określonych przez Ad Manager,
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```

Określ, gdzie reklama będzie się wyświetlać

Określ, gdzie na stronie pojawi się reklama, dodając ten kod do <body> dokumentu HTML.

Pamiętaj, że identyfikator tego elementu (<div>) jest zgodny z identyfikatorem określonym podczas definiowania parametru boks reklamowy.

<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

Podgląd strony testowej

Zapisz plik hello-gpt.html i otwórz go w przeglądarce. Po wczytaniu reklama testowa pojawi się w treści strony.

Uwaga: jeśli nie widzisz reklamy, upewnij się, że identyfikator div w polu <head> strony pasuje do identyfikatora elementu <div> dodanego do <body> strony.

Wyświetlanie własnej reklamy

Aby wyświetlić własną reklamę, użyj pliku hello-gpt.html z sekcji Wyświetlanie testu ad, a potem zastąp kod w nagłówku kodem zasobów reklamowych z Twojej sieci Ad Managera.

Wygeneruj tag reklamy dla jednostki reklamowej, którą chcesz wyświetlać. Więcej informacji o tagów reklam w tagu Centrum pomocy Ad Managera.

Skopiuj kod tagu reklamy podany w sekcji Nagłówek dokumentu i użyj go. w celu zastąpienia odpowiedniego kodu w sekcji <head> dokumentu HTML.

<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag
          .defineSlot("ad-unit-path", [width, height], "div-id")
          .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>

Zapisz zaktualizowany plik hello-gpt.html i otwórz go w przeglądarce.

Dalej

Dla początkujących