Z tego przewodnika dowiesz się, jak wyświetlać reklamę testową, i poznasz podstawowe zagadnienia, które pozwolą Ci w pełni wykorzystać możliwości biblioteki tagów wydawcy Google (GPT). Pojęcia te obejmują:
- Rozmiar reklamy
- Kierowanie na pary klucz-wartość
- Architektura z pojedynczym żądaniem
Wczytywanie biblioteki GPT
Zacznij od wczytania i zainicjowania biblioteki GPT. Dodaj ten ciąg znaków do <head> dokumentu HTML:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Spowoduje to wczytanie biblioteki GPT i zainicjowanie obiektów googletag oraz CommandArray. Dzięki zainicjowaniu tych obiektów możesz od razu zacząć używać tablicy poleceń GPT. Dodaj kod JavaScript, który występuje poniżej, do pustej funkcji zdefiniowanej w tym fragmencie.
Zdefiniuj boksy reklamowe
Po wczytaniu GPT możesz zdefiniować boksy reklamowe. W podanym niżej przykładzie zdefiniowano 3 boksy reklamowe z różnymi formatami reklam oraz opcjami rozmiarów i kierowania.
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, rozmiaru i identyfikatora <div> kontenera jednostki reklamowej ten fragment kodu zawiera też wiele opcji kierowania. Te opcje ograniczają i różnicują reklamy, które mogą być wyświetlane w tym boksie. Dowiedz się więcej o kierowaniu według par klucz-wartość.
Zakotwiczony boks reklamowy
Oto boks reklamy zakotwiczonej umieszczony 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.";
}
Boksy zakotwiczone to typ formatu poza stroną, który jest definiowane za pomocą metody defineOutOfPageSlot, a nie zwykłej metody defineSlot. Dowiedz się więcej o kreacjach poza stroną.
Formaty poza stroną często mają ograniczenia dotyczące rodzajów stron i urządzeń, na których można je wyświetlać. Ze względu na te ograniczenia przed interakcją z boksem musisz sprawdzić, czy został on prawidłowo zdefiniowany. Więcej informacji znajdziesz w przykładowym artykule Wyświetlanie reklamy zakotwiczonej.
Elastyczny boks reklamowy
Oto elastyczny boks reklamowy na reklamę natywną:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
Elastyczne boksy reklamowe nie mają stałego rozmiaru. Elastyczne boksy reklamowe
dopasowują się do zawartości kreacji. Elastyczne boksy reklamowe definiujesz za pomocą opcji rozmiaru fluid. Dowiedz się więcej o rozmiarach reklam i dostępnych opcjach rozmiarów.
Skonfiguruj ustawienia na poziomie strony
Niektóre opcje konfiguracji GPT są stosowane globalnie, a nie do konkretnych boksów reklamowych. Są to tzw. ustawienia na poziomie strony.
Oto przykład konfiguracji 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 spełnia trzy funkcje:
- 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 grupuje żądania wielu boksów reklamowych w jedno żądanie reklamy. SRA zwiększa wydajność oraz jest niezbędna do zagwarantowania uwzględniania wykluczeń konkurencji i reklam na wyłączność. Zalecamy więc, by zawsze je włączać. Dowiedz się więcej o prawidłowym używaniu architektury z pojedynczym żądaniem.
- Włącza usługi powiązane z boksami reklamowymi, które umożliwiają wysyłanie żądań reklamy.
Reklamy displayowe
Na koniec dodaj następujący fragment kodu do sekcji <body> strony:
<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 to 2 kontenery boksów reklamowych: banner-ad i native-ad. Te wartości id kontenera odpowiadają wartościom podanym podczas definiowania boksów reklamowych wcześniej w tym przykładzie.
Po zdefiniowaniu wszystkich boksów reklamowych wykonywane jest wywołanie wyświetlające banner-ad. Ponieważ włączona jest architektura z pojedynczym żądaniem, to wywołanie pojedynczego displayowego jest włączone i wyrenderowane są wszystkie boksy reklamowe zdefiniowane do tej pory. W razie potrzeby możesz dokładniej sterować wczytywaniem i odświeżaniem reklam oraz zbiorczym działaniem przy włączonej architekturze SRA.
Pełny przykład
Poniżej znajduje się pełny kod źródłowy strony przykładowej, na której opiera się ten przewodnik. Możesz też zobaczyć interaktywną demonstrację tej strony.