Hieronder volgt een voorbeeld van de volledige code voor het maken van een Google-uitgeverstag (GPT) voor mobiele en desktopimplementaties. Gebruik de Google-taggenerator om automatisch tags te genereren.
Ontwikkelaars en mensen die geavanceerde implementaties van GPT nodig hebben: ga naar de API-referentie en de voorbeeldimplementaties (zoals lazy loading).
Geavanceerde GPT-voorbeelden bekijken
Voorbeeldcode van Google-uitgeverstag
Er zijn 2 gedeelten code geïmplementeerd voor GPT:
- GPT-configuratie wordt in het
<head>-gedeelte van de webpagina geplaatst. - Oproepen voor elke specifieke advertentieruimte worden in het relevante gedeelte van de
<body>geplaatst.
Dit voorbeeld is bedoeld ter informatie. We raden u aan een ontwikkelaar te vragen de code op uw website te implementeren.
GPT-configuratie
Het volgende codevoorbeeld omvat het aanroepen van de GPT JavaScript-bibliotheek, het definiëren van de advertentieruimtes, targeting op sleutel/waarden en meer.
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> |
|
Regel 3-6: De GPT-bibliotheek die wordt gebruikt door Ad Manager wordt asynchroon geladen via SSL/HTTPS. Hier wordt de opdrachtwachtrij gemaakt die de lijst met functies (gewoonlijk advertentieaanroepen) verwerkt die asynchroon moeten worden verwerkt. U hoeft dit gedeelte van de code niet te bewerken. |
|
| 7 | <script> |
| 8 | googletag.cmd.push(function() { |
| 9 | googletag.defineSlot("/1234/travel/asia", [728, 90], "div-gpt-ad-123456789-0") |
|
Regel 9: Met Met |
|
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"); |
|
Regel 11, 14 en 15: Hiermee wordt de sleutel/waarde-targeting op advertentieruimteniveau ingesteld met Meer informatie over hoe u targeting en formaten instelt met GPT. |
|
| 16 | googletag.pubads().setTargeting("topic","basketball"); |
|
Regel 16: Met Wanneer targeting is geconfigureerd met sleutel/waarden op paginaniveau, nemen alle advertentieruimten deze targeting over. Net als bij sleutel/waarden op advertentieruimteniveau kunt u meerdere waarden aan één sleutel koppelen: ( |
|
| 17 | googletag.pubads().enableSingleRequest(); |
|
Regel 17: Met |
|
| 18 | googletag.enableServices(); |
| 19 | }); |
20 |
</script> |
21 |
</head> |
22 |
<body> |
23 |
<div id="div-gpt-ad-123456789-0" style="width: 728px; height: 90px"> |
|
Regel 23 (optioneel): Als u tags voor meerdere formaten gebruikt, kunt u deze regel het beste weglaten (in dat geval wordt het formaat dat het element krijgt, het formaat van het geselecteerde advertentiemateriaal wanneer dit wordt weergegeven) of beide formaten groot genoeg maken voor het grootste, in aanmerking komende advertentiemateriaal. Voor advertentietags voor één formaat kan deze parameter worden gebruikt om het containerelement uit te breiden totdat het advertentiemateriaal wordt geladen, zodat andere pagina-elementen niet verschuiven wanneer het advertentiemateriaal wordt weergegeven. |
|
| 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() { |
|
Regel 8, 25 en 32: Functieaanroepen worden aan de opdrachtwachtrij toegevoegd om asynchroon te worden verwerkt als de pagina wordt geladen. |
|
33 |
googletag.display("div-gpt-ad-123456789-1"); |
|
Regel 9, 12, 23, 26, 30 en 33: Hoewel hier willekeurige cijfers zijn gebruikt, is dit niet hoe GPT een uniek advertentieverzoek identificeert. Dat wordt achter de schermen gedaan met de GPT-bibliotheek. Daarnaast kunnen deze namen hetzelfde blijven op elke pagina, op voorwaarde dat er niet meerdere instanties van dezelfde div-naam op dezelfde pagina staan. In het voorraadoverzicht vindt u meer informatie over de voorraadstructuur en advertentieblokhiërarchie in Ad Manager, en hoe advertentieblokken de targeting overnemen. |
|
| 34 | }); |
| 35 | </script> |
| 36 | </div> |
| 37 | </body> |
| 38 | </html> |
Geavanceerde GPT-voorbeelden bekijken
Als u de koptekst van uw webpagina's niet kunt bewerken
U kunt GPT gebruiken zonder de <header> van uw website aan te passen.
Optie 1: inline GPT
Gebruik een inline-tag om aan te geven waar het advertentieblok wordt weergegeven op de pagina, in plaats van de koptekst van de pagina te gebruiken. Met een inline-tag worden de volledige definitie van de GPT-advertentieruimte en het GPT-verzoek, inclusief het laden van de GPT-bibliotheek, opgenomen in één <script>-tag.
Omdat de advertentietag de GPT JavaScript-bibliotheek gebruikt, moet u de code waarmee de bibliotheek wordt geladen, opnemen voordat u de advertentietagcode opneemt.
Deze voorbeelden van inline GPT bieden geen ondersteuning voor SRA.
De GPT JavaScript-bibliotheek aanroepen
<script async="async" src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || {cmd: []};
</script>
Voorbeeld van een inline advertentietag
<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>
Optie 2: Alle code in de hoofdtekst van de webpagina plaatsen
Gebruik de conventionele GPT-implementatie, maar plaats de advertentieruimtedefinities in het hoofdgedeelte van uw html, in plaats van in de koptekst.
De code waarmee de bibliotheek wordt geladen en de advertentieruimten worden gedefinieerd, moet worden aangeroepen voordat u advertenties voor deze ruimten aanvraagt. Aangezien de code niet is gesegmenteerd in de koptekst en het hoofdgedeelte van uw pagina, moet u de volgorde van de code beheren. Hoewel deze methode ingewikkelder is, beschikt u wel over de flexibiliteit om SRA te gebruiken.
Een Tagless Request maken zonder JavaScript
Een Tagless Request kan in plaats van een advertentietag worden gebruikt om de onbewerkte code voor advertentiemateriaal op te vragen die is gedistribueerd in Ad Manager. Tagless Requests worden doorgaans gebruikt als aangepaste parsering en weergave is vereist, zoals voor settopboxen of andere omgevingen zonder Google-tags of SDK-support.