Pierwsze kroki z tagiem wydawcy Google

Tag wydawcy Google (GPT) to biblioteka tagów reklam na potrzeby Google Ad Managera.

Tagów GPT możesz używać do dynamicznego tworzenia żądań reklamy. GPT pobiera kluczowe szczegóły, takie jak kod jednostki reklamowej, rozmiar reklamy i kierowanie niestandardowe, a potem tworzy żądanie i wyświetla reklamę na stronach internetowych.

Więcej informacji o GPT znajdziesz w Centrum pomocy Ad Managera.

Oto kilka przykładów, które ułatwią Ci rozpoczęcie korzystania z tagów GPT. Jeśli potrzebujesz dodatkowej pomocy dotyczącej GPT, zapoznaj się z opcjami pomocy.

Wyświetl reklamę testową

Z przykładu poniżej dowiesz się, jak utworzyć stronę testową za pomocą tagu GPT, by wczytać ogólną reklamę z sieci testowej Google.

Pełny kod tego przykładu znajdziesz na przykładowej stronie wyświetlania reklamy testowej.

  1. 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>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. Wczytywanie biblioteki GPT

    Aby wczytać bibliotekę GPT, dodaj ten kod do <head> dokumentu HTML.

    Ten kod wczytuje bibliotekę GPT z https://securepubads.g.doubleclick.net/tag/js/gpt.js. Po pełnym wczytaniu biblioteki przetwarza wszystkie polecenia w kolejce w obiekcie 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"></script>
      <style></style>
    </head>
    
  3. Zdefiniuj boks reklamowy

    Zdefiniuj boks reklamowy i zainicjuj tag GPT metodą googletag.enableServices().

    Ten kod najpierw sprawdza dostępność obiektu googletag, a potem umieszcza w kolejce polecenie, które tworzy boks reklamowy i włącza tag GPT.

    Boks reklamowy w tym przykładzie wczyta reklamę o rozmiarze 300x250 z jednostki reklamowej określonej przez ścieżkę /6355419/Travel/Europe/France/Paris. Reklama będzie się wyświetlać w treści strony w elemencie <div id="banner-ad">, który zostanie dodany w następnej kolejności.

    <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"></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>
    
  4. Określ, gdzie reklama będzie się wyświetlać

    Określ, gdzie na stronie będzie wyświetlać się reklama, dodając ten kod do <body> dokumentu HTML.

    Pamiętaj, że identyfikator tego elementu (<div>) odpowiada identyfikatorowi określonemu podczas definiowania boksu reklamowego.

    <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>
    
  5. Podgląd strony testowej

    Zapisz plik hello-gpt.html i otwórz go w przeglądarce. Po załadowaniu strony w treści strony wyświetli się reklama testowa.

Wyświetlanie własnej reklamy

Aby wyświetlać własną reklamę, użyj pliku hello-gpt.html w sekcji Wyświetl reklamę testową, a potem zastąp kod w nagłówku kodem określającym zasoby reklamowe z Twojej sieci Ad Managera.

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

  2. Skopiuj kod tagu reklamy podany w sekcji Nagłówek dokumentu i zastąp nim odpowiedni kod w sekcji <head> dokumentu HTML.

    <head>
     <meta charset="utf-8">
     <title>Hello GPT</title>
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></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>
    
  3. Zapisz zaktualizowany plik hello-gpt.html i otwórz go w przeglądarce.