Get started with Google Publisher Tag

Ukázka značky Google Publisher Tag

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. Přečtěte si, jak pomocí Generátoru značek Google vygenerovat značky GPT automaticky.

Tento článek také zahrnuje pokyny k řešení problémů s úpravou záhlaví webových stránekvytvoření měřicího pixelu 1 × 1 bez použití JavaScriptu.

Optimalizace rychlosti značek GPT aktualizací domény hostované knihovny

Knihovna značek Google Publisher Tag je nyní kromě domény googletagservices.com hostována také na adrese https://securepubads.g.doubleclick.net/tag/js/gpt.js. Ačkoli to není povinné, důrazně doporučujeme všechny odkazy na knihovnu GPT na stránkách aktualizovat na tuto novou doménu.

Touto změnou všechny požadavky související se zobrazováním reklam zkonsolidujete do jedné domény (namísto dvou) a prohlížeč se tak bude muset připojovat jen k jedné doméně. Knihovna je v obou doménách naprosto identická.

Výsledkem bude zlepšení rychlosti značek a o něco rychlejší načítání reklam.

Příklad značky Google Publisher Tag

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

Řádky 3–7: Standardizovaný kód, který pomocí protokolu SSL/HTTPS asynchronně načítá 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.

8 <script>
9   googletag.cmd.push(function() {
10     googletag.pubads().set("adsense_background_color", "FFFFFF");
11   });
12 </script>

Řádky 8–12 (volitelné): 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ě Ad Manager nebo AdSense. Tato funkce se obvykle nepoužívá, protože nastavení lze provést ve službě Ad Manager. Nastavení parametrů AdSense ve značce GPT je popsáno v dokumentaci metody .set() pro vývojáře.

13 <script>
14   googletag.cmd.push(function() {
15     googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")

Řádek 15: Ř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ě Ad Manager v sekci Správce a pak Globální nastavení a pak Kód sítě.

Ř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ě Ad Manager. Viz další informace o definování bloků a sekvenčnosti.

16       .addService(googletag.pubads())
17       .setTargeting("interests", ["sports", "music", "movies"]);
18     googletag.defineSlot("/1234/travel/asia", [[468, 60], [728, 90], [300, 250]], "div-gpt-ad-123456789-1")
19       .addService(googletag.pubads())
20       .setTargeting("gender", "male")
21       .setTargeting("age", "20-30");

Řádky 17, 20 a 21: Nastavují cílení na páry 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

22     googletag.pubads().setTargeting("topic","basketball");

Řádek 22: 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"]).

23     googletag.pubads().enableSingleRequest();

Řádek 23: googletag.pubads().enableSingleRequest(); povoluje architekturu jednoho požadavku (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.)

24     googletag.enableServices();
25   });
26 </script>
27 </head>
28 <body>
29   <div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">

Řádek 29 (volitelné): style="width: 728px; height: 90px" představuje velikost, která se pro prvek nastaví 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.

30     <script>
31       googletag.cmd.push(function() {
32          googletag.display("div-gpt-ad-123456789-0");
33       });
34     </script>
35   </div>
36     <div id="div-gpt-ad-123456789-1">
37     <script>
38       googletag.cmd.push(function() {

Řádky 9, l4, 31 a 38: Volání funkcí se přidávají do fronty příkazů, které se budou asynchronně zpracovávat při načtení stránky.

39          googletag.display("div-gpt-ad-123456789-1");

Řádky 15, 18, 29, 32, 36 a 39: "div-gpt-ad-123456789-0" určuje způsob, jakým se reklamní bloky definované v záhlaví přiřazují 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-[náhodné číslo]-0", "div-gpt-ad-[náhodné číslo]-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ě Ad Manager, hierarchii reklamních jednotek a o tom, jak reklamní jednotky dědí cílení, naleznete v přehledu inventáře.

40       });
41     </script>
42   </div>
43 </body>
44 </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://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

Ukázková značka reklamy 1: 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: 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>

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.

Pomohly vám tyto informace?
Jak bychom článek mohli vylepšit?