W tym przewodniku znajdziesz więcej informacji o wyświetlaniu reklamy testowej oraz poznasz podstawowe pojęcia, które pomogą Ci w najlepszym wykorzystaniu biblioteki tagów wydawcy Google (GPT). Te zagadnienia obejmują:
- Dobieranie rozmiaru reklam
- Kierowanie według par klucz-wartość
- Architektura z pojedynczym żądaniem
Wczytywanie biblioteki GPT
Zacznij od załadowania i inicjalizacji biblioteki GPT. Do sekcji <head> dokumentu HTML dodaj:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>Spowoduje to wczytanie biblioteki GPT i zainicjowanie obiektów googletag oraz CommandArray. Inicjowanie tych obiektów umożliwia natychmiastowe korzystanie z tablicy poleceń GPT. Dodaj kod JavaScriptu podany poniżej do treści pustej funkcji zdefiniowanej w tym fragmencie kodu.
Definiowanie boksów reklamowych
Po załadowaniu GPT możesz zdefiniować boksy reklamowe. W tym przykładzie zdefiniowano 3 miejsca docelowe reklamy z różnymi formatami reklam, opcjami rozmiarów i docelowania.
Boks reklamowy o stałym rozmiarze
Oto prosty boks reklamowy o stałym rozmiarze:
// Define a fixed size ad slot, customized with key-value targeting. googletag .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad") .addService(googletag.pubads()) .setTargeting("color", "red") .setTargeting("position", "atf");
Oprócz ścieżki jednostki reklamowej, rozmiaru i identyfikatora kontenera <div>snippet zawiera też wiele opcji kierowania. Te opcje ograniczają i różnicują reklamy, które mogą się wyświetlać w tym miejscu. Dowiedz się więcej o kierowaniu na pary klucz-wartość.
Boks reklamowy zakotwiczony
Oto boks reklamy zakotwiczonej przymocowany u dołu widocznego obszaru:
// Define an anchor ad slot that sticks to the bottom of the viewport. const anchorSlot = googletag.defineOutOfPageSlot( "/6355419/Travel", googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR, ); // The slot will be null if the page or device does not support anchors. if (anchorSlot) { anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads()); document.getElementById("status").textContent = "Anchor ad is initialized. Scroll page to activate."; }
Miejsca docelowe to rodzaj formatu poza stroną, który jest definiowany za pomocą metody defineOutOfPageSlot, a nie zwykłej metody defineSlot. Dowiedz się więcej o kreacjach poza stroną.
Formaty reklam poza stroną mają często ograniczenia dotyczące typów stron i urządzeń, na których mogą się wyświetlać. Z tego powodu przed rozpoczęciem interakcji ze slotem musisz sprawdzić, czy został on zdefiniowany. Szczegółowe informacje znajdziesz w przykładzie wyświetlania reklamy zakotwiczonej.
Elastyczny boks reklamowy
Oto elastyczny boks reklamowy na reklamę natywną:
// Define a fluid ad slot that fills the width of the enclosing column and // adjusts the height as defined by the native creative delivered. googletag .defineSlot("/6355419/Travel", ["fluid"], "native-ad") .addService(googletag.pubads());
Elastyczne boksy reklamowe nie mają stałego rozmiaru. Elastyczne boksy reklamowe dostosowują się do treści kreacji reklamy. Boksy reklamowe o rozmiarze elastycznym definiujesz za pomocą opcji fluid. Dowiedz się więcej o rozmiarach i dostępnych opcjach rozmiarów reklam.
Konfigurowanie ustawień na poziomie strony
Niektóre opcje konfiguracji GPT mają zastosowanie globalne, a nie do poszczególnych boksów reklamowych. Nazywamy je ustawieniami na poziomie strony.
Oto przykład konfigurowania ustawień na poziomie strony:
// Configure page-level targeting. googletag.pubads().setTargeting("interests", "basketball"); // Enable SRA and services. googletag.pubads().enableSingleRequest(); googletag.enableServices();
Ten fragment kodu wykonuje 3 działania:
- Konfiguruje opcje kierowania na poziomie strony, które są stosowane do każdego boksu reklamowego na stronie.
- Włącza tryb architektury z pojedynczym żądaniem (SRA), który łączy żądania dotyczące wielu boksów reklamowych w pojedyncze żądanie reklamy. SRA zwiększa wydajność i jest niezbędne, aby zagwarantować uwzględnianie wykluczeń konkurencji i reklam na wyłączność, dlatego zalecamy, aby zawsze ją włączać. Dowiedz się więcej o prawidłowym używaniu tego trybu.
- Umożliwia usługi powiązane z boksami reklamowymi, które umożliwiają wysyłanie żądań reklamy.
Reklamy displayowe
Na koniec dodaj do sekcji <body> strony ten fragment kodu:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>Definiuje 2 kontenery boksów reklamowych: banner-ad i native-ad. Te wartości kontenera id odpowiadają wartościom podanym podczas definiowania miejsc na reklamę we wcześniejszym przykładzie.
Po zdefiniowaniu wszystkich boksów reklamowych następuje wywołanie funkcji banner-ad. Ponieważ architektura SRA jest włączona, to pojedyncze wywołanie reklamy displayowej wysyła żądania i renderuje wszystkie boksy reklamowe zdefiniowane do tego momentu. W razie potrzeby możesz dokładniej kontrolować wczytywanie i odświeżanie reklam oraz zachowanie zbiorcze po włączeniu SRA.
Pełny przykład
Poniżej znajduje się pełny kod źródłowy przykładowej strony, na której opiera się ten przewodnik. Możesz też wyświetlić interaktywne demo tej strony.