Get started with Google Publisher Tag

Példa Google megjelenítői címkére

Ebben a cikkben egy asztali és mobilos megvalósításban használható Google megjelenítői címke (GPT) létrehozásához szükséges teljes kód példája található. További információ arról, hogy miként használható a Google címkegenerátora GPT-címkék automatikus létrehozására.

A cikk a weboldalak fejlécének szerkesztésével kapcsolatos problémákra és az 1 × 1-es követési képpont JavaScript nélküli létrehozására vonatkozóan is tartalmaz utasításokat.

A GPT sebességének optimalizálása a tárolt könyvtár domainjének frissítésével

A Google megjelenítői címke (GPT) könyvtára mostantól a services.com domainen túl a https://securepubads.g.doubleclick.net/tag/js/gpt.js címen is megtalálható. Bár nem kötelező, kifejezetten javasolt, hogy az oldalain lévő összes GPT-re való hivatkozást frissítse az új domain használatára.

Ez a módosítás az összes hirdetésmegjelenítési kérelmet (kettő helyett) egyetlen domainre vonja össze, ami azt jelenti, hogy a böngészőnek csak egy domainhez kell kapcsolódnia. A könyvtár mindkét domainen pontosan ugyanaz.

Ez a címkék sebességének javulását okozza, illetve valamivel gyorsabbá teszi a hirdetések lekérését.

Példa a Google megjelenítői címkére

A kód tippek nélkül
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>

3–7. sor: Olyan sablont alkotnak, amely aszinkron módon betölti az Ad Manager által használt GPT-könyvtárat SSL-/HTTPS-kapcsolaton keresztül. Itt épül fel az aszinkron módon kezelendő függvények listáját (általában a hirdetéshívásokat) kezelő parancsok sora. Nem kell szerkesztenie a kód ezen szakaszát.

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

8–12. sor (nem kötelező): Ezek a sorok oldalszintű attribútumokat állítanak be az AdSense-hirdetéseket megjelenítő hirdetéshelyekhez. Ezen attribútumok módosítása felülírja az Ad Managerben, illetve az AdSense-ben beállított stílusokat. A függvény használata nem gyakori, mivel beállítható az Ad Managerben. A .set() függvény fejlesztői dokumentációja leírja, hogyan állíthatja be az AdSense-paramétereket a GPT-ben.

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

15. sor: A "/1234/travel/asia" meghatározza a hálózati kódot (1234) és a célzott hirdetési egységet (travel/asia). A hálózati kódot a következő útvonalon találja az Ad Managerben: Adminisztrálás majd Globális beállítások majd Hálózati kód.

A [728, 90] adja meg a hirdetéshely kreatívméretét. Több méretet a következő szintaxissal jelölhet: [[width1, height1], [width2, height2], [width3, height3]]. Az itt szereplő összes méretet társítsa a célzott hirdetési egységhez – ez lehetővé teszi, hogy az adott hirdetéshely alapján szűkítse a listát. Ha többféle méretű hirdetéshelyeket használ, a helyméreteket ugyanolyan sorrendben adja meg, ahogyan azok az Ad Managerben is megjelennek. További információ a hirdetéshelyek meghatározásáról és egymásutániságáról.

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");

17., 20. és 21. sor: A .setTargeting() függvénnyel állíthatja be a helyszintű kulcsértékcélzást. Egy kulcshoz több értéket is társíthat, ahogyan az az első példában is szerepel: ("key", ["value1", "value2", "value3"]). Ha több kulcsot szeretne megcélozni, többször hívja meg a függvényt, ahogy az a második esetben látható: (gender=male és age=20-30).

A .setTargeting() függvény fejlesztői dokumentációja leírja, hogyan állíthat be kulcsérték-paramétereket a GPT-ben. További információ a GPT-vel való célzás- és méretbeállításról.

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

22. sor: A googletag.pubads().setTargeting("topic","basketball"); az oldalszintű kulcsértékcélzást állítja be. Oldalszintű kulcsértékekkel való célzás konfigurálásakor az összes hirdetéshely ezt a célzást örökli meg. A helyszintű kulcsértékekhez hasonlóan egy kulcshoz több értéket is társíthat: ("key", ["value1", "value2", "value3"]).

23     googletag.pubads().enableSingleRequest();

23. sor: A googletag.pubads().enableSingleRequest(); engedélyezi az egykéréses architektúrát (SRA). Akkor vegye fel ezt a sort, ha egy hívással szeretné meghívni az oldalon lévő összes hirdetéshelyet (ez lehetővé teszi a garantált kizárólagos hirdetések használatát, valamint javíthatja az oldal teljesítményét).

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

29. sor (nem kötelező): A style="width: 728px; height: 90px" az a méret, amelyet az elem a kreatív megjelenítése előtt felvesz. Többméretű címkék használata esetén azt ajánljuk, hogy hagyja ezt ki (ebben az esetben az elem mérete a kiválasztott kreatív méretét veszi fel a megjelenítésekor), vagy elég nagyként adja meg mindkét méretet ahhoz, hogy tartalmazhassák a legnagyobb használható kreatívot. Egyetlen mérettel rendelkező hirdetéscímkék esetén használja ezt a paramétert, hogy kibővítse a tároló elemet, amíg betölt a kreatív, így az oldal más elemei nem tolódnak el a kreatív megjelenítésekor.

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() {

9., 14., 31. és 38. sor: A függvényhívások hozzá vannak adva a parancsok sorához, hogy aszinkron módon menjen végbe a feldolgozásuk az oldal betöltésekor.

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

15., 18., 29., 32., 36. és 39. sor: A "div-gpt-ad-123456789-0" határozza meg, hogy hogyan egyeztetjük a fejlécben megadott hirdetéshelyeket az oldalon lévő hirdetéshelyekkel (a törzsben lévő div címkékkel, ahol a kreatívok megjelennek). Ha egyeznek, bármi lehet a nevük, de a mi címkegenerátorunk a "div-gpt-ad-[véletlen szám]-0", "div-gpt-ad-[véletlen szám]-1" stb. elnevezéseket használja. Következetesen ugyanazt a <div> azonosítót használja az oldal adott pozíciójához, mivel ez számos területen segíti az optimalizálást.

Noha itt véletlen számokat használunk, a GPT nem így azonosítja egyedileg a hirdetési kérelmeket, hanem a háttérben, a GPT-könyvtárral. Ezek a nevek továbbá oldalról oldalra ugyanazok lehetnek, amennyiben nincs több ugyanolyan nevű div példány ugyanazon az oldalon.

További információt találhat a készlet áttekintésében az Ad Manager készletstruktúrájáról, a hirdetési egységek hierarchiájáról és arról, miként öröklik a hirdetési egységek a célzást.

40       });
41     </script>
42   </div>
43 </body>
44 </html>

Ha nem tudja szerkeszteni weboldalai fejlécét

A GPT-t a weboldalak fejlécének módosítása nélkül is használhatja.

1. lehetőség: Az oldal fejlécének használata helyett meghatározhatja soron belüli címkével, hogy hol jelenjen meg a hirdetési egység. Soron belüli címke használata esetén a GPT-hirdetéshely teljes meghatározása és kérése (beleértve a GPT-könyvtár betöltését is) egyetlen <script> címkén belül van. Itt példákat láthat a hirdetéshely soron belüli meghatározására.

Mivel a hirdetési címke a GPT JavaScript könyvtárát használja, a hirdetési címke kódja elé kell beillesztenie a könyvtárat betöltő kódot (lásd a következő példákat).

Példa a soron belüli, aszinkron GPT-re

Ezek a soron belüli GPT-példák nem támogatják az SRA-t.

A GPT JavaScript könyvtárának hívása

<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
 window.googletag = window.googletag || {cmd: []};
</script>

1. minta-hirdetéscímke: soron belüli címke

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

2. minta-hirdetéscímke: tömörített, soron belüli címke (nem támogatja a hirdetéshelyszintű célzást)

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

2. lehetőség: Használhatja a hagyományos GPT-megvalósítást; azonban ahelyett, hogy a hirdetéshely-meghatározásokat a fejlécben helyezné el, tegye őket a HTML-kód törzsébe. A könyvtárat betöltő és a hirdetéshelyeket meghatározó kódot még azelőtt kell meghívni, hogy Ön hirdetéseket kérne az adott helyekre. Mivel a kód nincs szegmentálva az oldal fejlécére és törzsére, és Önnek kell kezelnie a kód szekvenciáját, ez komplexebb megközelítés, de rendelkezik az SRA rugalmasságával.

1 × 1-es követési képpont létrehozása nem JavaScript GPT-címke használatával

Megjelenítéskövető létrehozása GPT-vel:

  1. Hozzon létre új hirdetési egységet vagy válasszon egy meglévőt, amellyel követni szeretné a megjelenítésszámot.

  2. Hozzon létre 1 × 1 méretű sort, és adjon hozzá átlátszó képpontból álló képes kreatívot.

  3. Célozza az 1 × 1 méretű sort az első lépésben létrehozott hirdetési egységre.

  4. Hozzon létre nem JavaScript GPT-címkét, amely a megjelenítési képpontot hívja, és az első lépésben létrehozott hirdetési egységet határozza meg. Például:

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

    További információ nem JavaScript-alapú URL-ek generálásáról.

  5. A megjelenítésiképpont-címkét a következő két mód egyikeként használhatja:

    • Adja hozzá a címkét valamelyik egyéni, vagy harmadik féltől származó hirdetéshez, amely megjelenik az oldalon: a hirdetés „Beállítások” oldalán adja a címkét a „Kódrészlet” mező tetejéhez.

    • Adja a címkét közvetlenül a weboldalhoz.

Hasznosnak találta?
Hogyan fejleszthetnénk?