W tym przewodniku omówimy wyświetlanie reklamy testowej oraz przedstawimy 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. Dodaj do <head> dokumentu HTML te elementy:
<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 inicjowanie 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 poza stroną często mają ograniczenia dotyczące rodzajó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ładowej reklamie zakotwiczonej.
Elastyczny boks reklamowy
Oto elastyczne miejsce wyświetlania reklamy natywnej:
// 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 reklam i dostępnych opcjach rozmiarów.
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 skuteczność i jest niezbędne do zapewnienia przestrzegania wykluczeń konkurencji i reklam na wyłączność, dlatego zalecamy zawsze włączanie SRA. Dowiedz się więcej o prawidłowym korzystaniu z tej funkcji.
- Umożliwia usługi powiązane z boksami reklamowymi, które umożliwiają wysyłanie żądań reklamy.
Reklamy displayowe
Na koniec dodaj do <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ż włączona jest architektura z pojedynczym żądaniem, to pojedyncze żądanie wyświetlania powoduje wyświetlenie wszystkich boksów reklamowych zdefiniowanych 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.