Níže uvádíme ukázku úplného kódu k vytvoření značky Google Publisher Tag (GPT) k implementaci na počítačích a mobilech. Značku můžete vygenerovat automaticky pomocí Generátoru značek Google.
Pokud jste vývojář nebo potřebujete pokročilou implementaci značek GPT, přečtěte si referenční materiály k rozhraní API a ukázkové implementace (například líné načítání).
Zobrazení ukázky pokročilých značek GPT
Ukázkový kód značky Google Publisher Tag
U značek GPT je potřeba implementovat dvě části kódu:
- Konfigurace značky GPT se provádí v sekci
<head>webové stránky. - Volání pro jednotlivé konkrétní reklamní bloky jsou umístěna v příslušné části sekce
<body>.
Tato ukázka má pouze informativní charakter. Kód by na vašem webu měl implementovat vývojář.
Konfigurace značky GPT
Následující příklad kódu zahrnuje volání javascriptové knihovny GPT, definování reklamních bloků, cílení na páry klíč–hodnota a podobně.
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> |
|
Řádky 3–6: Asynchronně pomocí protokolu SSL/HTTPS načítají knihovnu GPT používanou ve službě Ad Manager. Na tomto místě se vytváří fronta příkazů ke zpracování seznamu funkcí (volání reklam), které se mají asynchronně zpracovat. Tuto část kódu není potřeba upravovat. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Řádek 9: Řetězec Řetězec |
|
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"); |
|
Řádky 11, 14 a 15: Nastavují cílení na páry klíč–hodnota na úrovni reklamního bloku pomocí funkce Další informace o nastavení cílení a velikostí ve značce GPT |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Řádek 16: Pokud nakonfigurujete cílení pomocí párů klíč–hodnota na úrovni stránky, zdědí jej všechny reklamní bloky na stránce. Stejně jako u párů klíč–hodnota na úrovni bloku můžete k jednomu klíči přiřadit několik hodnot: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Řádek 17: |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Řádek 23 (volitelné): Pokud používáte značky s více velikostmi, doporučujeme tento atribut buď vynechat (prvek pak po vykreslení převezme velikost vybrané kreativy), nebo oba rozměry nastavit tak, aby byly dostatečné pro největší možnou kreativu. V případě značek reklam jedné velikosti můžete tento parametr použít k rozbalení kontejnerového prvku v době načítání kreativy, aby se ostatní prvky stránky po vykreslení kreativy neposouvaly. |
|
| 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() { |
|
Řádky 8, 25 a 32: Volání funkcí se přidávají do fronty příkazů, které se budou asynchronně zpracovávat při načtení stránky. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Řádky 9, 12, 23, 26, 30 a 33: Přestože se zde používají náhodná čísla, nejde o způsob jednoznačné identifikace žádosti o reklamu ve značce GPT. Identifikace se provádí na pozadí pomocí knihovny GPT. Tyto názvy mohou být na různých stránkách stejné. Nikdy se však nesmí nacházet několik značek div se stejným názvem na jedné stránce. Další informace o struktuře inventáře ve službě Ad Manager, hierarchii reklamních jednotek a o tom, jak reklamní jednotky dědí cílení, naleznete v přehledu inventáře. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Zobrazení ukázky pokročilých značek GPT
Pokud nemůžete upravit záhlaví svých webových stránek
Značku GPT můžete používat i bez úpravy záhlaví <header> svého webu.
Možnost 1: Vložená značka GPT
Namísto v záhlaví stránky definujte vloženou značku přímo na místě, kde se reklamní jednotka na stránce zobrazuje. U vložené značky je celá definice a žádost reklamního bloku GPT, včetně načtení knihovny GPT, zahrnuta v jedné značce <script>.
Protože značka reklamy používá knihovnu jazyka JavaScript pro značky GPT, je nutné před kódem značky uvést kód, který tuto knihovnu načte (viz následující příklady).
Tyto ukázkové vložené značky GPT nepodporují architekturu SRA.
Volání knihovny jazyka JavaScript značky GPT
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Ukázka vložené značky reklamy
<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>
Možnost 2: Vložení veškerého kódu do hlavní části webové stránky
Použijte konvenční implementaci značky GPT, ale vložte definice reklamních bloků do těla kódu HTML, nikoli do záhlaví.
Kód, který načítá knihovnu a definuje reklamní bloky, je třeba zavolat předtím, než pro dané bloky požádáte o reklamy. Protože kód není rozdělen do záhlaví a těla stránky a je třeba zajistit spuštění kódu ve správném pořadí, implementace této metody může být náročnější. Získáte však flexibilitu architektury SRA.
Vytvoření požadavku bez kódu bez JavaScriptu
K odeslání žádosti o nezpracovaný kód kreativy nakonfigurovaný ve službě Ad Manager lze namísto značky reklamy použít požadavek bez kódu. Požadavky bez kódu se obvykle používají, když je potřeba vlastní analýza a zobrazení, jako například v set-top boxech nebo jiných prostředích bez podpory značek či sad SDK Google.