Vyhledávání
Vymazat vyhledávání
Zavřít vyhledávání
Aplikace Google
Hlavní nabídka

Ukázky značek Google Publisher Tag

V tomto článku naleznete ukázky značek Google Publisher Tag (GPT) k implementaci na mobilech a počítačích. Přečtěte si, jak pomocí Generátoru značek Google vygenerovat značky GPT automaticky.

Obsah tohoto článku:

Příklad asynchronní značky Google Publisher Tag

Zde je příklad úplného kódu k vytvoření asynchronní značky Google Publisher Tag, který ilustruje mnoho běžných funkcí a syntaxi v asynchronní žádosti o reklamy ze značky GPT. Další informace o generování značek ve službě DFP

1 <html>
  • Řádky 3 až 8 představují standardizovaný kód, který pomocí protokolu SSL/HTTPS asynchronně načítá knihovnu GPT používanou ve službě DFP. 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.

  • (Volitelné) Řádky 9 až 13 nastavují atributy na úrovni stránky pro reklamní bloky, které zobrazují reklamy AdSense. Změnou těchto atributů přepíšete všechny styly nastavené ve službě DFP nebo AdSense. Tato funkce se obvykle nepoužívá, protože nastavení lze provést ve službě DFP. Nastavení parametrů AdSense ve značce GPT je popsáno v dokumentaci funkce .set() pro vývojáře.

  • Řádky 10, 15, 32 a 39 u asynchronního vykreslování vkládají veškeré skripty za počátečním standardizovaným skriptem do fronty pomocí metody googletag.cmd.push. Skripty se tím ve formě funkcí přidají do fronty příkazů, které se budou asynchronně zpracovávat při načtení stránky. Viz další informace o rozdílech mezi synchronním a asynchronním vykreslováním.

  • Řádek 16: Řetězec "/1234/travel/asia" určuje kód sítě (1234) a cílenou reklamní jednotku (travel/asia). Kód své sítě naleznete ve službě DFP na kartě Správce.

    Řetězec [728, 90] nastavuje velikost kreativy v reklamním bloku. Více velikostí zadejte ve tvaru: [[width1, height1], [width2, height2], [width3, height3]]. K cílené reklamní jednotce zde přidružte všechny velikosti, abyste seznam mohli zúžit podle konkrétního bloku. Při použití reklamních bloků s několika velikostmi reklamní bloky deklarujte ve stejném pořadí, v jakém jsou uvedeny ve službě DFP. Viz další informace o definování bloků a sekvenčnosti.

  • Řádky 16, 19, 30, 33, 37 a 40: "div-gpt-ad-123456789-0" slouží k přiřazení reklamních bloků definovaných v záhlaví k reklamním blokům na stránce (značky div v těle stránky, ve kterých se kreativy zobrazují). Lze použít libovolné názvy, musejí se jen shodovat. Náš generátor značek používá názvy "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" a tak dále. Pro určitou pozici na stránce je potřeba používat konzistentně stejné ID prvku <div>. Používá se totiž k optimalizaci v celé řadě oblastí.

    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ě DFP, hierarchii reklamních jednotek a o tom, jak reklamní jednotky dědí cílení, naleznete v přehledu inventáře.

  • Řádky 18, 21, 22 a 23 nastavují cílení typu klíč–hodnota na úrovni reklamního bloku pomocí funkce .setTargeting(). K jednomu klíči můžete přiřadit více hodnot, jako v prvním příkladu: ("key", ["value1", "value2", "value3"]). Chcete-li cílit na několik klíčů, zavolejte funkci několikrát, jako v druhém příkladu: (gender=maleage=20-30).

    Postup nastavení parametrů párů klíč–hodnota ve značce GPT je popsán v dokumentaci funkce .setTargeting() pro vývojáře. Další informace o nastavení cílení a velikostí ve značce GPT

  • Řádek 23: googletag.pubads().setTargeting("topic","basketball"); nastavuje cílení na páry klíč–hodnota na úrovni stránky. 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: ("key", ["value1", "value2", "value3"]).

  • Řádek 24: googletag.pubads().enableSingleRequest(); zapíná architekturu Single Request Architecture (SRA). Tento řádek uveďte v případě, že chcete všechny reklamní bloky na stránce volat pomocí jednoho volání. (Umožňuje to zaručené blokování reklam třetích stran a může to mít pozitivní vliv na výkonnost stránky.) Architektura SRA v současné době nepodporuje reklamy GPA (Google Programmable Ads).

  • Řádek 30: (Volitelné) style="width: 728px; height: 90px" představuje velikost, kterou bude prvek mít před vykreslením kreativy. 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.

2 <head>
3 <script async="async" src="https://www.googletagservices.com/tag/js/gpt.js">
4 </script>
5 <script>
6   var googletag = googletag || {};
7   googletag.cmd = googletag.cmd || [];
8 </script>
9 <script>
10   googletag.cmd.push(function() {
11     googletag.pubads().set("adsense_background_color", "FFFFFF");
12   });
13 </script>
14 <script>
15   googletag.cmd.push(function() {
16     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
17       .addService(googletag.pubads())
18       .setTargeting("interests", ["sports", "music", "movies"]);
19     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
20       .addService(googletag.pubads())
21       .setTargeting("gender", "male")
22       .setTargeting("age", "20-30");
23     googletag.pubads().setTargeting("topic","basketball");
24     googletag.pubads().enableSingleRequest();
25     googletag.enableServices();
26   });
27 </script>
28 </head>
29 <body>
30   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
31     <script>
32       googletag.cmd.push(function() {
33          googletag.display("div-gpt-ad-123456789-0");
34       });
35     </script>
36   </div>
37     <div id="div-gpt-ad-123456789-1">
38     <script>
39       googletag.cmd.push(function() {
40          googletag.display("div-gpt-ad-123456789-1");
41       });
42     </script>
43   </div>
44 </body>
45 </html>
 

Příklad synchronní značky Google Publisher Tag

Následuje ukázka úplného kódu k vytvoření synchronní značky Google Publisher Tag, která ilustruje mnoho běžných funkcí a syntaxe v synchronní žádosti o reklamy GPT.

Použití synchronních žádostí nedoporučujeme, protože mohou zpozdit načítání obsahu stránky. Doporučujeme používat namísto nich asynchronní značky. Další informace o asynchronních značkách a o tom, ve kterých případech je stále ještě vhodné použití synchronních značek.
U uživatelů s pomalým připojením, jako jsou sítě 2G, mohou externí skripty vložené dynamicky metodou document.write() zpozdit zobrazení hlavního obsahu stránky až o desítky sekund. Je to další důvod, proč namísto synchronního vykreslování doporučujeme používat asynchronní značky. Další informace o problémech se sítěmi 2G a metodou document.write()
1 <html>
  • Řádky 3–4 představují standardizovaný kód, který synchronně načítá knihovnu jazyka JavaScript značek GPT používanou ve službě DFP. (V případě potřeby se použije protokol SSL/HTTPS.) Na tomto místě se vytváří fronta příkazů ke zpracování seznamu funkcí (volání reklam), které se mají synchronně zpracovat. Tuto část kódu není potřeba upravovat.

  • (Volitelné) Řádky 5–7 nastavují atributy na úrovni stránky pro reklamní bloky, které zobrazují reklamy AdSense. Změnou těchto atributů přepíšete všechny styly nastavené ve službě DFP nebo AdSense. Tento přístup se obvykle nepoužívá, protože tyto atributy můžete nastavit ve službě DFP. Nastavení parametrů AdSense ve značce GPT je popsáno v dokumentaci funkce .set() pro vývojáře.

  • Řádky 9 a 12: "/1234/travel/asia" určuje kód sítě (1234) a cílenou reklamní jednotku (travel/asia). Kód své sítě naleznete ve službě DFP na kartě Správce.

    Řetězec [728, 90] nastavuje velikost kreativy, která se v tomto reklamním bloku může zobrazit. Více velikostí zadejte ve tvaru: [[width1, height1], [width2, height2], [width3, height3]]. K cílené reklamní jednotce zde přidružte všechny velikosti, abyste seznam mohli zúžit podle konkrétního bloku. Při použití reklamních bloků s několika velikostmi reklamní bloky deklarujte ve stejném pořadí, v jakém jsou uvedeny ve službě DFP. Viz další informace o definování bloků a sekvenčnosti.

    Řádky 9, 12, 23, 25, 28 a 30: "div-gpt-ad-123456789-0" slouží k přiřazení reklamních bloků definovaných v záhlaví k reklamním blokům na stránce (značky div v těle stránky, ve kterých se zobrazují kreativy). Lze použít libovolné názvy, musejí se jen shodovat. Náš generátor značek používá názvy "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" atd. Pro určitou pozici na stránce je potřeba používat konzistentně stejné ID prvku <div>. Používá se totiž k optimalizaci v celé řadě oblastí.

    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ě DFP, hierarchii reklamních jednotek a o tom, jak reklamní jednotky dědí cílení, naleznete v přehledu inventáře.

  • Řádky 11, 14, 15 a 16: (Volitelné) Nastavují cílení typu klíč–hodnota na úrovni reklamního bloku pomocí funkce .setTargeting(). K jednomu klíči můžete přiřadit více hodnot, jako v prvním příkladu: ("key", ["value1", "value2", "value3"]). Chcete-li cílit na několik klíčů, zavolejte funkci několikrát, jako v druhém příkladu: (gender=maleage=20-30).

    Postup nastavení parametrů párů klíč–hodnota ve značce GPT je popsán v dokumentaci funkce .setTargeting() pro vývojáře. Viz další informace o nastavení cílení a velikostí ve značce GPT.

  • Řádek 16: googletag.pubads().setTargeting("topic","basketball"); nastavuje cílení na páry klíč–hodnota na úrovni stránky. 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: ("key", ["value1", "value2", "value3"]).

  • Řádek 17: googletag.pubads().enableSingleRequest(); zapíná architekturu Single Request Architecture (SRA). Tento řádek uveďte v případě, že chcete všechny reklamní bloky na stránce volat pomocí jednoho volání. (Umožňuje to zaručené blokování reklam třetích stran a může to mít pozitivní vliv na výkonnost stránky.) Architektura SRA v současné době nepodporuje reklamy GPA (Google Programmable Ads).

  • Řádek 18: Chcete-li kreativy vykreslit synchronně, přidejte řádek googletag.pubads().enableSyncRendering();. Dává službě pokyn, aby počkala na dokončení každé žádosti o reklamy a teprve poté pokračovala ve vykreslování stránky.

  • Řádek 23: (Volitelné) style="width: 728px; height: 90px" představuje velikost, kterou bude prvek mít před vykreslením kreativy. 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.

2 <head>
3 <script src="https://www.googletagservices.com/tag/js/gpt.js"> 
4 </script>
5 <script type="text/javascript">
6     googletag.pubads().set("adsense_background_color", "FFFFFF");
7 </script>
8 <script>
9     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")
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");
16     googletag.pubads().setTargeting("topic","basketball");
17     googletag.pubads().enableSingleRequest();
18     googletag.pubads().enableSyncRendering();
19     googletag.enableServices();
20 </script>
21 </head>
22 <body>
23   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">
24     <script type="text/javascript">
25       googletag.display("div-gpt-ad-123456789-0");
26     </script>
27   </div>
28   <div id="div-gpt-ad-123456789-1">
29     <script type="text/javascript">
30       googletag.display("div-gpt-ad-123456789-1");
31     </script>
32   </div>
33 </body>
34 </html>
 

Pokud nemůžete upravit záhlaví svých webových stránek

Značku GPT můžete použít i bez provádění změn v záhlaví svých webových stránek.

Možnost 1: 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>. Zde jsou příklady definování vloženého reklamního bloku přímo v kódu.

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).

Příklad vložené asynchronní značky GPT

Tyto ukázkové vložené značky GPT nepodporují architekturu SRA.

Volání knihovny jazyka JavaScript značky GPT

<script async="async" src="https://www.googletagservices.com/tag/js/gpt.js"></script>
<script>
 var googletag = googletag || {};
 googletag.cmd = googletag.cmd || [];
</script>

Ukázková značka reklamy 1: asynchronní vložená značka

<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>

Ukázková značka reklamy 2: asynchronní kondenzovaná vložená značka (nepodporuje cílení na úrovní reklamního bloku)

<div id='div-gpt-ad-1234567891234-0'>
  <script>
    googletag.cmd.push(function() {
      googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
    });
  </script>
</div>
Příklad vložené synchronní značky GPT

Tyto ukázkové vložené značky GPT nepodporují architekturu SRA.

Volání knihovny jazyka JavaScript značky GPT

<script type="text/javascript">
 (function() {
   var useSSL = 'https:' == document.location.protocol;
   var src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
   document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
 })();
</script>

Ukázková značka reklamy 1: synchronní vložená značka

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.defineSlot('/1234/sports/football', [728, 90],'div-gpt-ad-1234567891234-0')
      .addService(googletag.pubads())
      .setTargeting("Gender", "Male");
    googletag.pubads().enableSyncRendering();
    googletag.enableServices();googletag.display('div-gpt-ad-1234567891234-0');
  </script>
</div>

Ukázková značka reklamy 2: Vložené značky, kondenzovaná forma (nepodporuje cílení na úrovní reklamního bloku)

<div id='div-gpt-ad-1234567891234-0'>
  <script type='text/javascript'>
    googletag.pubads().enableSyncRendering();
    googletag.pubads().display('/1234/sports/football', [728, 90], 'div-gpt-ad-1234567891234-0');
  </script>
</div>

Možnost 2: 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.

Použití nejavascriptové značky GPT k vytvoření měřicího pixelu 1 × 1

Postup vytvoření měřicího kódu pomocí značky GPT:

  1. Vytvořte novou reklamní jednotku nebo vyberte nějakou existující, pomocí které chcete měřit počet zobrazení.

  2. Vytvořte řádkovou položku 1 × 1 a přidejte do ní obrázkovou kreativu v podobě průhledného pixelu.

  3. Zacilte řádkovou položku 1 × 1 na reklamní jednotku vytvořenou v kroku 1.

  4. Vytvořte nejavascriptovou značku GPT, která bude volat pixel zobrazení a bude v ní určena reklamní jednotka vytvořená v kroku 1. Příklad:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>

    Přečtěte si, jak vygenerovat nejavascriptové adresy URL.

  5. Pixelovou značku na měření zobrazení můžete použít dvěma způsoby:

    • Přidat ji do vlastní kreativy nebo do kreativy třetí strany, která se zobrazí na stránce: na kartě Nastavení kreativy přidejte značku do horní části pole Fragment kódu.

    • Přidat ji přímo na webovou stránku.

Pomohl vám tento článek?
Jak bychom článek mohli vylepšit?