Poniżej znajdziesz przykład pełnego kodu umożliwiającego utworzenie tagu wydawcy Google (GPT) używanego na komputerach i urządzeniach mobilnych. Użyj generatora tagów Google, aby automatycznie wygenerować tag.
Deweloperzy, którzy potrzebują zaawansowanych tagów GPT, powinni zapoznać się z dokumentacją API i przykładowymi implementacjami (takimi jak leniwe ładowanie).
Zobacz przykładowe zaawansowane tagi GPT
Przykładowy kod tagu wydawcy Google
Implementacja kodu na potrzeby GPT składa się z 2 sekcji:
- konfiguracji GPT, którą należy umieścić w sekcji
<head>strony internetowej; - wywołań poszczególnych boksów reklamowych, które należy umieścić w odpowiednim obszarze sekcji
<body>.
Ten przykładowy kod ma charakter informacyjny. Zalecamy, aby kod na stronie internetowej zaimplementował deweloper.
Konfiguracja GPT
Poniższy przykładowy kod obejmuje wywołanie biblioteki JavaScript GPT, definiowanie boksów reklamowych, kierowanie według par klucz-wartość i inne działania.
1 |
<html> |
2 |
<head> |
3 |
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script> |
4 |
<script> |
5 |
window.googletag = window.googletag || {cmd: []}; |
6 |
</script> |
|
Wiersze 3–6: asynchronicznie wczytuje bibliotekę GPT używaną w usłudze Ad Manager, korzystając z protokołu SSL/HTTPS. Tu powstaje kolejka poleceń, która obsługuje listę funkcji (zwykle wywołań reklam) wykonywanych asynchronicznie. Tej części kodu nie musisz edytować. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Wiersz 9:
|
|
10 |
.addService(googletag.pubads()) |
11 |
.setTargeting("interests", ["sports", "music", "movies"]); |
12 |
googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1") |
13 |
.addService(googletag.pubads()) |
14 |
.setTargeting("gender", "male") |
| 15 | .setTargeting("age", "20-30"); |
|
Wiersze 11, 14 i 15: ustawiają kierowanie według pary klucz-wartość na poziomie boksu reklamowego, korzystając z funkcji Dowiedz się więcej o ustawianiu kierowania i rozmiarów za pomocą tagów wydawcy Google. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Wiersz 16: Dziedziczą je wszystkie boksy reklamowe. Tak jak w przypadku par klucz-wartość na poziomie boksu, z jednym kluczem możesz powiązać wiele wartości: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Wiersz 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Wiersz 23 (opcjonalnie): Jeśli korzystasz z tagów z wieloma rozmiarami, zalecamy pominięcie tego parametru (element przyjmie wtedy rozmiar wybranej kreacji po wyrenderowaniu) lub ustawienie obu rozmiarów na tyle dużych, by zmieściła się w nich największa dopuszczalna kreacja. W przypadku tagów reklam z jednym rozmiarem ten parametr pozwala rozwinąć element kontenera przed wczytaniem kreacji, dzięki czemu jej wyświetlenie nie spowoduje przesunięcia innych elementów strony. |
|
| 24 | <script> |
| 25 | googletag.cmd.push(function() { |
| 26 | googletag.display("div-gpt-ad-123456789-0"); |
| 27 | }); |
| 28 | </script> |
29 |
</div> |
30 |
<div id="div-gpt-ad-123456789-1"> |
31 |
<script> |
32 |
googletag.cmd.push(function() { |
|
Wiersze 8, 25 i 32: wywołania funkcji są dodawane do kolejki poleceń, gdzie zostaną wykonane asynchronicznie podczas wczytywania strony. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Wiersze 9, 12, 23, 26, 30 i 33: nazwy typu Używamy tu losowych liczb, ale nie mają one znaczenia w jednoznacznym identyfikowaniu żądania reklamy w tagu GPT. Dzieje się to w sposób niewidoczny dzięki bibliotece GPT. Poza tym te nazwy mogą być jednakowe na różnych stronach, o ile jedna nazwa div nie występuje wielokrotnie na tej samej stronie. Więcej informacji o strukturze zasobów reklamowych i hierarchii jednostek reklamowych w usłudze Ad Manager oraz o sposobie dziedziczenia kierowania przez jednostki reklamowe znajdziesz w omówieniu zasobów reklamowych. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Zobacz przykładowe zaawansowane tagi GPT
Jeśli nie możesz edytować nagłówków stron
Aby używać GPT, nie musisz modyfikować tagu <header> na swojej stronie.
Opcja 1. Wbudowany tag GPT
Miejsce, w którym jednostka reklamowa ma pojawiać się na stronie, określ w tagu wbudowanym, a nie w nagłówku strony. Cała definicja boksu reklamowego i żądanie GPT, wraz z wczytywaniem biblioteki GPT, zostanie wtedy zawarta w jednym tagu <script>.
Tag reklamy korzysta z biblioteki JavaScript GPT, dlatego musisz umieścić przed nim kod, który ją wczytuje.
Te przykładowe wbudowane tagi GPT nie obsługują architektury z pojedynczym żądaniem (SRA).
Wywołanie biblioteki JavaScript GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Przykładowy tag reklamy wbudowanej
<div id="div-gpt-ad-1234567891234-0">
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
.addService(googletag.pubads())
.setTargeting("Gender", "Male");
googletag.enableServices();
googletag.display('div-gpt-ad-1234567891234-0');
});
</script>
</div>
Opcja 2. Umieszczenie całego kodu w treści strony internetowej
Zastosuj konwencjonalną implementację tagu GPT, ale zamiast umieszczać definicje boksów reklamowych w nagłówku kodu HTML, umieść je w jego treści.
Kod wczytujący bibliotekę i definiujący boksy reklamowe musi być wywoływany przed wysłaniem żądania reklam dla tych boksów. Jako że nie jest on podzielony na nagłówek i treść strony oraz musisz pilnować jego kolejności, ten sposób jest bardziej skomplikowany, ale daje możliwość elastycznego używania architektury z pojedynczym żądaniem.
Tworzenie żądania bez tagów bez JavaScriptu
Zamiast tagu reklamy można użyć żądania bez tagów, aby wysłać żądanie nieprzetworzonego kodu kreacji trafikowanego w usłudze Ad Manager. Żądania bez tagów są zwykle używane, gdy potrzebne jest niestandardowe analizowanie i wyświetlanie, jak w przypadku dekoderów lub innych środowisk bez obsługi tagowania Google ani pakietu SDK.