Przykłady zaawansowanych tagów wydawcy Google
W tym artykule znajdziesz przykłady zaawansowanych tagów wydawcy Google (GPT) używanych na komputerach i urządzeniach mobilnych.
Więcej dowiesz się z przewodnika po interfejsie API tagów wydawcy Google. Informacje o podstawowej implementacji tagów GPT zawiera artykuł Przykładowe tagi wydawcy Google.
W przedstawionych przykładach są używane testowe konfiguracje sieci, boksów reklamowych i kierowania. Własną implementację musisz dostosować do swojej sieci i konfiguracji.
Elementy wewnętrzne GPT często się zmieniają, a nieudokumentowane właściwości mogą zostać usunięte bez ostrzeżenia. Jeśli kod opiera się na takich elementach wewnętrznych, w każdej chwili może dojść do jego uszkodzenia.
Tagowanie stron z nieskończoną ilością treści
Za pomocą tagów wydawcy Google możesz dynamicznie generować nowe treści reklamowe.
Wykluczenia kategorii i reklamy na wyłączność są uwzględniane tylko w przypadku reklam wyświetlanych w odpowiedzi na to samo żądanie architektury z pojedynczym żądaniem. Uwzględnianie wielu wywołań architektury z pojedynczym żądaniem w jednym wczytywaniu strony może spowodować wyświetlenie na niej reklam konkurencyjnych.
Poniżej znajdziesz przykład pełnego kodu, który można zastosować do zaimplementowania tagów przy nieskończonej ilości treści na stronie. Przykład zawiera przycisk u dołu strony, który dynamicznie generuje nową treść.
<html>
<head>
<title>Przykład przewijania w nieskończoność</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
<script>
var adslot0;
googletag.cmd.push(function() {
// Deklarujemy wszystkie boksy obecne od początku na stronie.
adslot0 = googletag.defineSlot('/6355419/Travel', [728, 90], 'leaderboard').
setTargeting("test","infinitescroll").
addService(googletag.pubads());
// Nieskończone przewijanie wymaga architektury SRA.
googletag.pubads().enableSingleRequest();
// Wyłączamy wczytywanie początkowe, do pobierania reklam użyjemy funkcji refresh().
// Wywołanie tej funkcji oznacza, że wywołania funkcji display()
// rejestrują boks jako gotowy, ale nie pobierają do niego reklam.
googletag.pubads().disableInitialLoad();
// Włączamy usługi.
googletag.enableServices();
});
// Funkcja, która generuje unikalne nazwy boksów.
var nextSlotId = 1;
function generateNextSlotName() {
var id = nextSlotId++;
return 'adslot' + id;
}
// Funkcja, która dodaje treści do strony i naśladuje rzeczywiste
// nieskończone przewijanie, ale znacznie upraszcza je od strony kodu.
function moreContent() {
// Generujemy nazwę następnego boksu.
var slotName = generateNextSlotName();
// Tworzymy element div z boksem.
var slotDiv = document.createElement('div');
slotDiv.id = slotName; // Identyfikator musi być taki sam jak nazwa boksu.
document.body.appendChild(slotDiv);
// Tworzymy i dodajemy atrapę treści 1.
var h1=document.createElement("H2")
var text1=document.createTextNode("Dynamic Fake Content 1");
h1.appendChild(text1);
document.body.appendChild(h1);
// Tworzymy i dodajemy atrapę treści 2.
var h2=document.createElement("H2")
var text2=document.createTextNode("Dynamic Fake Content 2");
h2.appendChild(text2);
document.body.appendChild(h2);
// Definiujemy sam boks, wywołujemy funkcję display(),
// by zarejestrować element div, oraz funkcję refresh(), by pobrać reklamę.
googletag.cmd.push(function() {
var slot = googletag.defineSlot('/6355419/Travel', [728, 90], slotName).
setTargeting("test","infinitescroll").
addService(googletag.pubads());
// Funkcję display trzeba wywołać po dodaniu
// elementu div z boksem do strony i przed funkcją refresh.
googletag.display(slotName);
googletag.pubads().refresh([slot]);
});
}
</script>
<style>
body > div {
margin-bottom: 1em;
border: solid 1px black;
width: 728px
}
body > img {
margin-bottom: 1em;
display: block
}
body > button {
position: fixed;
bottom: 10px;
}
</style>
</head>
<body>
<h1>Strona testowa z tagiem GPT – nieskończone przewijanie</h1>
<!-- Pierwsza atrapa treści -->
<text>
<h2> Początkowa atrapa treści </h2>
</text>
<!-- Pierwsza reklama -->
<div id="leaderboard">
<script>
// Wywołujemy funkcję display(), by zarejestrować boks jako gotowy,
// oraz funkcję refresh(), by pobrać reklamę.
googletag.cmd.push(function() {
googletag.display('leaderboard');
googletag.pubads().refresh([adslot0]);
});
</script>
</div>
<!-- Inne początkowe atrapy treści -->
<text>
<h2> Początkowa atrapa treści 1 </h2>
<h2> Początkowa atrapa treści 2 </h2>
</text>
<!-- Przycisk dynamicznie wczytujący więcej treści. -->
<button onclick="moreContent()">Więcej treści</button>
</body>
</html>
Odświeżanie konkretnych boksów reklamowych
Możesz użyć funkcji odświeżania asynchronicznego tagu wydawcy Google do dynamicznego ponownego ładowania reklam bez odświeżania całej treści strony.
Aby zaimplementować tę funkcję, musisz wygenerować asynchroniczny tag GPT i wprowadzić pewne zmiany. W tej przykładowej implementacji pokazano dwa boksy reklamowe i odpowiednie przyciski umieszczające w boksach nowe reklamy.
<html>
<head>
<title>Szkolenie z tagów GPT – odświeżanie boksów</title>
<script>
// Wczytujemy tag GPT asynchronicznie.
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
gads.type = 'text/javascript';
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//securepubads.g.doubleclick.net/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script>
// Boksy GPT
var gptAdSlots = [];
googletag.cmd.push(function() {
// Definiujemy pierwszy boks.
gptAdSlots[0] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard0').
setTargeting('test', 'refresh').
addService(googletag.pubads());
// Definiujemy drugi boks.
gptAdSlots[1] = googletag.defineSlot('/6355419/Travel',[728, 90],'leaderboard1').
setTargeting('test', 'refresh').
addService(googletag.pubads());
// Konfigurujemy architekturę SRA.
googletag.pubads().enableSingleRequest();
// Zaczynamy pobieranie reklamy.
googletag.enableServices();
});
// Funkcja przycisku, który odświeża pierwszy boks.
var refreshFirstSlot = function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0]]);
});
};
// Funkcja przycisku, który odświeża drugi boks.
var refreshSecondSlot = function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[1]]);
});
};
// Funkcja przycisku, który odświeża oba boksy.
var refreshBothSlots = function() {
googletag.cmd.push(function() {
googletag.pubads().refresh([gptAdSlots[0], gptAdSlots[1]]);
});
};
// Funkcja przycisku, który czyści wszystkie boksy.
var clearAllSlots = function() {
googletag.cmd.push(function() {
googletag.pubads().clear();
});
};
</script>
</head>
<body>
<div>
<h1>Szkolenie z tagów GPT – odświeżanie boksów</h1>
<div id='leaderboard0' style="width:728px;height:90px;">
<script>
googletag.cmd.push(function() {
googletag.display('leaderboard0');
});
</script>
</div>
<div id='leaderboard1' style="width:728px;height:90px;">
<script>
googletag.cmd.push(function() {
googletag.display('leaderboard1');
});
</script>
</div>
</div>
<div>
<!-- Odświeżenie pierwszego boksu -->
<button onclick="refreshFirstSlot();">Odśwież górną reklamę</button>
<!-- Odświeżenie drugiego boksu -->
<button onclick="refreshSecondSlot();">Odśwież dolną reklamę</button>
<!-- Odświeżenie obu boksów -->
<button onclick="refreshBothSlots();">Odśwież obie reklamy</button>
<!-- Czyszczenie boksów -->
<button onclick="clearAllSlots();">Wyczyść reklamy</button>
</div>
</body>
</html>
Ręczne testowanie funkcji refresh()
Aby ręcznie przetestować funkcję refresh(), możesz tymczasowo dodać do swojej strony przycisk odśwież. W tym celu wklej poniższy fragment kodu bezpośrednio przed tagiem </body>. Po kliknięciu przycisku wszystkie boksy reklamowe na stronie zostaną odświeżone, ale sama strona nie.
<form onsubmit="googletag.pubads().refresh();return false;">
<input type="submit" value="refresh" />
</form> Więcej informacji o sposobie działania funkcji odświeżania w GPT znajdziesz w Przewodniku po interfejsie API tagów wydawcy Google.
Tagowanie w przypadku elastycznego projektowania stron
Używając tagów wydawcy Google, możesz pisać kod zgodny z zasadami elastycznego projektowania stron. Poniżej znajdziesz przykład pełnego kodu implementującego te zasady. Aby przetestować działanie elastycznego projektu z przykładu, zmień rozmiar okna i odśwież stronę.
W tym przykładzie elastyczne reklamy z tagami GPT nie zmieniają rozmiaru, gdy zmienia się rozmiar przeglądarki. Możesz dodać własny kod, by odświeżać boksy reklamowe przy zmianie rozmiaru.
<html>
<head>
<title>Szkolenie z tagów GPT – elastyczna strona testowa</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
<script>
// Boksy GPT
var gptAdSlots = [];
googletag.cmd.push(function() {
// Definiujemy obiekt mapowania rozmiaru. Pierwszy parametr funkcji addSize
// to rozmiar widocznego obszaru, a drugi – lista dozwolonych rozmiarów reklam.
var mapping = googletag.sizeMapping().
// Mała reklama
addSize([100, 100], [88, 31]).
// Dwa typowe formaty banerów na urządzenia mobilne
addSize([320, 400], [[320, 50], [300, 50]]).
// Ta sama szerokość co poprzednio, ale większa wysokość
addSize([320, 700], [300, 250]).
// Orientacja pozioma na tablecie
addSize([750, 200], [728, 90]).
// Komputer
addSize([1050, 200], [1024, 120]).build();
// Definiujemy boks z tagiem GPT.
gptAdSlots[0] = googletag.defineSlot('/6355419/travel', [320, 50], 'ad-slot').
defineSizeMapping(mapping).
addService(googletag.pubads());
googletag.pubads().setTargeting("test","responsive");
// Zaczynamy pobierać reklamę.
googletag.enableServices();
});
</script>
</head>
<body>
<h1>Szkolenie z tagów GPT – elastyczna strona testowa</h1>
<div id="ad-slot">
<script>
googletag.cmd.push(function() {
googletag.display('ad-slot');
});
</script>
</div>
<p><span>Elastyczne reklamy z tagami GPT nie zmieniają rozmiaru, gdy zmienia się rozmiar przeglądarki.
Możesz dodać własny kod, by odświeżać boksy reklamowe przy zmianie rozmiaru.
Aby sprawdzić możliwości elastycznego projektu, zmień rozmiar okna i odśwież stronę.</span></p>
</body>
</html>
Dowiedz się więcej o tworzeniu reklam elastycznych.
Dodawanie tagów na potrzeby reklam o rozmiarze elastycznym
Tag wydawcy Google można skonfigurować tak, by wyświetlał reklamę natywną o niestandardowym rozmiarze „elastycznym”. W takim przypadku boks reklamowy będzie miał szerokość swojego kontenera nadrzędnego, a jego wysokość będzie się zmieniała tak, by pomieścić zawartość kreacji natywnej. Poniżej znajdziesz przykład pełnego kodu, który pozwala zaimplementować tę funkcję.
Jeśli dodajesz rozmiar „elastyczny” do istniejącego tagu wydawcy Google, pamiętaj, by jako żądany rozmiar dodać parametr „fluid”. Na przykład:
.addSize([640, 480], 'fluid')
<html>
<head>
<title>Szkolenie z tagów GPT – reklamy natywne i rozmiar elastyczny</title>
<script>
// Wczytujemy tag GPT asynchronicznie.
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];
(function() {
var gads = document.createElement('script');
gads.async = true;
var useSSL = 'https:' == document.location.protocol;
gads.src = (useSSL ? 'https:' : 'http:') +
'//securepubads.g.doubleclick.net/tag/js/gpt.js';
var node = document.getElementsByTagName('script')[0];
node.parentNode.insertBefore(gads, node);
})();
</script>
<script>
// Boksy GPT
var gptAdSlots = [];
googletag.cmd.push(function() {
// Definiujemy boks GPT.
gptAdSlots[0] = googletag.defineSlot('/6355419/travel', 'fluid', 'ad-slot').
addService(googletag.pubads());
// Zaczynamy pobierać reklamę.
googletag.enableServices();
});
</script>
</head>
<body>
<h1>Szkolenie z tagów GPT – natywna strona testowa</h1>
<div id="ad-slot" style=”width:600px;”>
<script>
googletag.cmd.push(function() {
googletag.display('ad-slot');
});
</script>
</div>
</body>
</html>
Dowiedz się więcej o reklamach natywnych.
Żądanie i renderowanie reklam zależne od zdarzeń
Za pomocą tagów wydawcy Google możesz wysyłać żądania reklam na podstawie zdarzeń. Możesz na przykład określić, że reklama ma się wyświetlać, gdy użytkownik kliknie przycisk.
<html>
<head>
<meta charset="utf-8">
<title>Żądanie i renderowanie reklam zależne od zdarzeń</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
(window.googletag || (googletag = {cmd: []})).cmd.push(function() {
googletag
.defineSlot('/6075/gpttraining', [300, 250], 'div-for-slot')
.addService(googletag.pubads());
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
</head>
<body>
<div id="div-for-slot" style="width: 300px; height: 250px;">
<script>
googletag.cmd.push(function() {
// Ta funkcja tylko rejestruje boks.
// Reklama zostanie pobrana dopiero po wywołaniu funkcji refresh.
googletag.display('div-for-slot');
});
</script>
</div>
<button
onclick="
googletag.cmd.push(function() {
googletag.pubads().refresh();
});
this.parentNode.removeChild(this);
">
Show Ad
</button>
</body>
</html>
Leniwe ładowanie
Leniwe ładowanie umożliwia szybsze wczytywanie stron, zmniejsza zużycie zasobów i rywalizację o nie oraz podnosi współczynnik widoczności dzięki wstrzymaniu żądania i wyświetlania reklam, dopóki te nie znajdą się w pobliżu obszaru widocznego dla użytkownika.
W przypadku leniwego ładowania w architekturze SRA wywołanie reklamy i wszystkich pozostałych boksów reklamowych następuje wtedy, gdy pierwszy boks reklamowy znajdzie się w widocznym obszarze określonym przez parametr fetchMarginPercent. Spowoduje to rozbieżności między liczbą pobranych wyświetleń i wyświetleń w Widoku aktywnym.
Leniwe ładowanie nie jest obecnie w pełni zgodne z metodą collapseEmptyDivs().
<html>
<head>
<script>var googletag = window.googletag || {cmd: []};</script>
<script async src="//securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
googletag.cmd.push(function() {
googletag.defineSlot('/1234567/sports', [728,90], 'div-1').
addService(googletag.pubads());
googletag.defineSlot('/1234567/news', 'fluid', 'div-2').
addService(googletag.pubads());
googletag.defineSlot('/1234567/weather', [160, 600], 'div-3').
addService(googletag.pubads());
// Some examples of ways to enable below. Normally, only one of these
// methods should be used.
// A) Enable with defaults.
googletag.pubads().enableLazyLoad();
// B) Enable without lazy fetching. Additional calls override previous
// ones.
googletag.pubads().enableLazyLoad({fetchMarginPercent: -1});
// C) Enable lazy loading with...
googletag.pubads().enableLazyLoad({
fetchMarginPercent: 500, // Fetch slots within 5 viewports.
renderMarginPercent: 200, // Render slots within 2 viewports.
mobileScaling: 2.0 // Double the above values on mobile.
});
googletag.enableServices();
});
</script>
</head>
<body>
<!--
As defined by lazy load settings, initially Slot 1 will be fetched and
rendered on mobile and desktop. Slot 2 will be fetched, on mobile and
desktop, but will not be rendered on desktop. Slot 3 will not be fetched
or rendered on mobile and desktop.
-->
<div id="div-1">
<script>
googletag.cmd.push(function() {googletag.display('div-1');});
</script>
</div>
<!-- 3 viewport tall div to place next slot 3 viewports away. -->
<div style="height:300vh"></div>
<div id="div-2">
<script>
googletag.cmd.push(function() {googletag.display('div-2');});
</script>
</div>
<!-- 9 viewport tall div to place next slot 12 viewports away. -->
<div style="height:900vh"></div>
<div id="div-3">
<script>
googletag.cmd.push(function() {googletag.display('div-3');});
</script>
</div>
</body>
</html>
Kontrola zachowania kontenera SafeFrame przy użyciu tagów GPT
Tagi GPT umożliwiają precyzyjną kontrolę zachowania kontenera SafeFrame przez metodę setSafeFrameConfig. Traktuje ona obiekt JSON jako dane wejściowe i pozwala skonfigurować określone zachowania kontenerów SafeFrame utworzonych przez tagi GPT.
Ta metoda wpływa tylko na zachowanie reklam renderowanych w SafeFrame. Nie określa ona, czy dana reklama jest renderowana w SafeFrame – jest to zależne od typu kreacji oraz ustawień SafeFrame.
sandbox. Pozwoli to zapobiec nawigacji na najwyższym poziomie. Możesz użyć parametru setForceSafeFrame w interfejsie API GPT, by wymusić renderowanie w SafeFrame reklam z określonego boksu.
- Na poziomie strony ta metoda wpływa na zachowanie wszystkich boksów na tej stronie.
- Na poziomie boksu ta metoda zastępuje ustawienia obowiązujące na poziomie strony.
Metoda setSafeFrameConfig zwraca wartość logiczną określającą, czy ustawienia konfiguracyjne zostały prawidłowo przeanalizowane.
Jako dane wejściowe obiekt konfiguracji przyjmuje prosty obiekt JSON zawierający mapę kluczy i wartości (prawidłowe wartości są opisane poniżej).
Wszystkie pozostałe klucze są ignorowane. Jeśli wykryte zostaną wartości inne niż true/false, konfiguracja zostanie odrzucona i wystąpi błąd.
| Nazwa klucza | Opis | Prawidłowe wartości |
|---|---|---|
allowOverlayExpansion |
Kreacje mogą się rozwijać, używając trybu Overlay (nakładka) w interfejsie API SafeFrame. Rozwinięta kreacja zakrywa zawartość pozostałej części strony. | true |
allowPushExpansion |
Kreacje mogą się rozwijać, używając trybu Push (przesuwanie) w interfejsie API SafeFrame. Rozwinięta kreacja przesuwa do dołu zawartość pozostałej części strony. | true |
sandbox |
Tworzy instancję kontenera SafeFrame z ustawionym atrybutem sandbox, by uniemożliwić nawigację na najwyższym poziomie. Jeśli używasz tego atrybutu, upewnij się, że kliknięcia reklamy nie powodują nawigacji z bieżącej strony, lecz otwierają stronę docelową w nowej karcie. Maksymalizuje to zgodność reklam w różnych przeglądarkach z różną obsługą trybu piaskownicy.Działa tylko w przeglądarkach, które obsługują nowy, dostępny w języku HTML5 atrybut
sandbox w elementach iframe.Ustawienie tego klucza blokuje reklamy używające wtyczek (np. Flasha) i może spowodować nieprawidłowe wyświetlanie reklam lub stron docelowych w określonych przeglądarkach, szczególnie na komputerze. |
true |
| Przykład | Opis |
|---|---|
googletag.pubads().setSafeFrameConfig({sandbox: true}); |
Wszystkie reklamy na stronie wyrenderowanej w SafeFrame będą używać atrybutu sandbox. |
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad'); |
W SafeFrame z ustawionym atrybutem sandbox zostanie wyrenderowany tylko boks slot1. Nie ma to wpływu na inne boksy reklamowe. |
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad'); |
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z nakładką. |
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad'); |
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z nakładką. Ustawia też atrybut sandbox. |
slot1=googletag.defineSlot('/123/sports', [468, 80], 'ad'); |
Reklamy wyrenderowane w SafeFrame w boksie slot1 nie będą się mogły rozwijać z przesuwaniem. |
Więcej informacji o renderowaniu kreacji przy użyciu SafeFrame.
