Google megjelenítői címke – kódminta

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ó. Használja a Google címkegenerátort a címke automatikus létrehozásához.

A fejlesztők, valamint azok, akiknek a GPT speciális megvalósítására van szükségük, tekintsék meg az API-referenciát és a példamegvalósításokat (például a késleltetett betöltést).

Speciális GPT-minták megtekintése

Példakód a Google megjelenítői címkéhez

A GPT esetében két kódszakasz van megvalósítva:

A GPT konfigurálása a weboldal <head> elemében történik.
Az egyes hirdetési helyekre vonatkozó hívások a <body> megfelelő szakaszába kerülnek.

Ez a példa tájékoztató jellegű, és azt javasoljuk, hogy kérjen meg egy fejlesztőt a kód elhelyezésére az Ön webhelyén.

GPT-konfiguráció

A következő példakód tartalmazza a GPT JavaScript könyvtárának meghívását, a hirdetéshelyek meghatározását, a kulcsértékcélzást és egyebeket.

`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>`
3–6. sor: aszinkron módon betölti az Ad Manager által használt GPT-könyvtárat SSL/HTTPS használatával. Itt épül fel az aszinkron módon kezelendő funkciók listáját (általában a hirdetési kérelmeket) kezelő parancsok sora. Nem kell szerkesztenie a kód ezen szakaszát.
7	`<script>`
8	`googletag.cmd.push(function() {`
9	`googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0")`
9. 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 Globális beállítások 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.
`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");`
11., 14. és 15. 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`). További információ a GPT-vel való célzás- és méretbeállításról.
16	`googletag.pubads().setTargeting("topic","basketball");`
16. 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"]`).
17	`googletag.pubads().enableSingleRequest();`
17. 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, így biztosítva, hogy a rendszer az oldalon lévő összes hirdetéshelyet figyelembe veszi a kizárólagos hirdetések és a versenytárskizárások értékelésekor.
18	`googletag.enableServices();`
19	`});`
`20`	`</script>`
`21`	`</head>`
`22`	`<body>`
`23`	`<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px">`
23. sor (nem kötelező): A `style="width: 728px; height: 90px"` a kreatív megjelenítése előtti, a div számára fenntartott hely kezdeti mérete. 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.
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() {`
8., 25. és 32. 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.
`33`	`googletag.display("div-gpt-ad-123456789-1");`
9., 12., 23. 26., 30. és 33. 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. Bár itt véletlen számokat használunk, a GPT nem így azonosítja egyedileg a hirdetési kérelmeket. Ez a háttérben, a GPT-könyvtárral történik. 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.
34	`});`
35	`</script>`
36	`</div>`
37	`</body>`
38	`</html>`

Speciális GPT-minták megtekintése

Ha nem tudja szerkeszteni weboldalai fejlécét

A GPT-t a webhely <header> elemének módosítása nélkül is használhatja.

1. lehetőség: szövegközi GPT

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.

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.

Példa szövegközi 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>

Példa szövegközi hirdetési címkére

<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. lehetőség: a teljes kód elhelyezése a weboldal törzsében

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.

Címke nélküli kérelem létrehozása JavaScript nélkül

A hirdetéscímkék helyett címke nélküli kérelmeket is használhat az Ad Managerben forgalmazott nyers kreatívkód kérésére. Általában akkor használják a címke nélküli kérelmeket, amikor egyéni elemzésre és megjelenítésre van szükség, például set-top boxok esetén, vagy olyan egyéb környezetekben, ahol nem áll rendelkezésre Google-címkézés vagy SDK-támogatás.

Hasznosnak találta?

Hogyan fejleszthetnénk?