Søk
Slett søket
Lukk søket
Google-apper
Hovedmeny

Eksempler på Google Publisher-tagger

I denne artikkelen presenterer vi eksempler på Google Publisher-tagger for implementering på mobilenheter og stasjonære datamaskiner. Finn ut hvordan du bruker generatoren for Google-tagger for å generere GPT-tagger automatisk.

Denne artikkelen inneholder:

Eksempel på en asynkron Google Publisher-tag

Nedenfor ser du et eksempel på den fullstendige koden du kan bruke for å opprette en asynkron Google Publisher-tag. Denne taggen illustrerer mange av de vanlige funksjonene samt syntaksen som brukes i en asynkron annonseforespørsel fra Google Publisher-tagger.

Hvis du vil finne ut mer om hvordan du genererer Google Publisher-tagger, kan du lese gjennom artikkelen om generering av tagger i DFP.

1 <html>
  • Linje 3–8 er standardtekst som asynkront laster inn GPT-biblioteket som brukes av DFP, ved hjelp av SSL/HTTPS. Det er her kommandokøen blir organisert. Køen håndterer listen over funksjoner (stort sett annonseanrop) som skal håndteres asynkront. Publisister trenger ikke å endre denne delen av koden.

  • (Valgfritt:) Linje 9–13 angir attributter på sidenivå for annonsefelt som leverer til AdSense. Hvis disse angis her, overstyres eventuelle stilsett i DFP eller AdSense. Dette brukes vanligvis ikke ettersom du kan angi attributtene i DFP. For mer informasjon om hvordan du angir AdSense-parametere i GPT, kan du lese dokumentasjonen om .set()-funksjonen i utviklerdokumentasjonen.

  • Linje 10, 15, 32, 39: Hvis du bruker asynkron gjengivelse, pakker du alt av skript – etter mønsteret til det innledende standardtekstskriptet – i googletag.cmd.push-funksjonen på linje 10. Dette legger til funksjonen i kommandokøen, og der blir den behandlet asynkront hva gjelder sideinnlastingen. Finn ut mer om forskjellene mellom synkron og asynkron gjengivelse.

  • Linje 16: "/1234/travel/asia" angir nettverkskoden (1234) og den målrettede annonseenheten (travel/asia). Du kan finne nettverkskoden din i Administrator-fanen i DFP.

    728, 90 angir reklamestørrelsen til annonsefeltet. Her angir du hvilken reklamestørrelse eller hvilke reklamestørrelser som kan leveres til dette annonsefeltet. Angi flere størrelser ved hjelp av denne syntaksen (width = bredde): [[width1, height1], [width2, height2], [width3, height3]]. Alle størrelser her skal også være tilknyttet annonseenheten som er målrettet – på denne måten kan du avgrense listen basert på det spesifikke feltet. Når du bruker annonsefelter med flere størrelser, må størrelsene angis i samme rekkefølge som de vises i DFP. Finn ut mer om feltdefinisjoner og -rekkefølger.

  • Linje 16, 19, 30, 33, 37 og 40: "div-gpt-ad-123456789-0" – det er gjennom denne funksjonen vi sikrer samsvar mellom annonsefeltene som defineres i toppteksten, og annonsefeltene på siden (div-taggene i hovedteksten (body-delen) der reklamene vises). Disse kan navngis fritt, så lenge de stemmer overens. Tag-generatoren vår bruker imidlertid "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" og så videre. Dette er en ryddig metode for å få dem til å ligne på hverandre, samtidig som de blir forskjellige. Det er viktig at den samme <div>-ID-en brukes konsekvent for en gitt posisjon på en side, siden den brukes til optimalisering på en rekke områder.

    Selv om det her brukes vilkårlige tall, er ikke dette måten GPT unikt identifiserer en annonseforespørsel på. Det gjøres bak kulissene via GPT-biblioteket. Disse navnene kan i tillegg gjenbrukes på andre nettsider, forutsatt at det ikke finnes flere forekomster av det samme div-navnet på den samme siden.

    Finn ut mer om DFP-beholdningsstrukturen, annonseenhetshierarkiet og hvordan målretting overføres til annonseenhetene i beholdningsoversikten.

  • Linje 18, 21, 22 og 23: Angi målretting mot nøkkelverdi på annonsefeltnivå med .setTargeting()-funksjonen. Du kan knytte flere verdier til én nøkkel, som i det første eksempelet: ("key", ["value1", "value2", "value3"]). Hvis du vil angi målretting mot flere nøkler, kaller du opp funksjonen flere ganger, som vist i det andre eksempelet (gender=male og age=20-30). Hvis du vil finne ut mer om hvordan du angir nøkkelverdi-parametere i GPT, kan du lese gjennom dokumentasjonen for .setTargeting()-funksjonen samt artikkelen om hvordan du angir målretting og størrelser ved hjelp av GPT. 

  • Linje 23: googletag.pubads().setTargeting("topic","basketball"); angir målrettingen mot nøkkelverdier på sidenivå. Vær oppmerksom på at når målrettingen konfigureres med nøkkelverdier på sidenivå, overføres denne målrettingen til alle annonsefelt. På samme måte som med nøkkelverdier på feltnivå kan du knytte flere verdier til én nøkkel: ("key", ["value1", "value2", "value3"]). Hvis du vil finne ut mer om hvordan du angir nøkkelverdi-parametere i GPT, kan du lese utviklerdokumentasjonen for .setTargeting()-funksjonen samt artikkelen vår om hvordan du angir målretting og størrelser ved hjelp av GPT.

  • Linje 24: googletag.pubads().enableSingleRequest(); slår på enkeltforespørselarkitektur (SRA, Single Request Architecture). Ta med denne linjen hvis du vil kalle alle annonsefelt på siden i ett kall (åpner for garanterte veisperringer, og å samle annonser i ett kall kan medføre fordeler med tanke på ytelsen på nettsiden din). SRA støtter foreløpig ikke programmerbare Google-annonser (GPA).

  • Linje 30 (valgfritt): style="width: 728px; height: 90px" er størrelsen elementet har før reklamen gjengis. Hvis du bruker tagger i flere størrelser, er det best å utelate denne funksjonen (i så fall benyttes størrelsen på den valgte reklamen som størrelse for elementet, når reklamen er gjengitt). Hvis du eventuelt velger å bruke den, må du sørge for at begge dimensjonene er store nok til å inneholde den største av de kvalifiserte reklamene. For annonse-tager i én enkelt størrelse kan dette imidlertid brukes for å utvide beholderelementet frem til reklamen lastes inn, slik at andre sideelementer ikke forskyves når reklamen gjengis.

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

Eksempel på en synkron Google Publisher-tag

Nedenfor ser du et eksempel på den fullstendig koden du må bruke for å opprette en synkron Google Publisher-tag. Denne taggen illustrerer mange av de vanlige funksjonene samt syntaksen som brukes i synkrone annonseforespørsler fra Google Publisher-tagger.

Vi anbefaler å ikke slå på synkrone forespørsler ettersom synkrone annonsetagger kan forsinke innlastingen av sideinnholdet. Vi anbefaler å bruke asynkrone tagger i stedet. Finn ut mer om asynkrone tagger og tilfeller der det er fortsatt er passende å bruke synkrone tagger.
For brukere med trege tilkoblinger, for eksempel 2G, kan eksterne skript som settes inn dynamisk med document.write(), forsinke visningen av hovedinnholdet på siden i flere titalls sekunder. Dette er en annen grunn til at vi anbefaler å bruke asynkrone tagger i stedet for synkron gjengivelse. Finn ut mer om problemer med 2G og document.write()
1 <html>
  • Linje 3–4 er standardtekst som asynkront laster inn – om nødvendig ved hjelp av SSL/HTTPS – JavaScript-biblioteket for GPT, som brukes av DFP. Det er her kommandokøen blir organisert. Køen håndterer listen over funksjoner (stort sett annonseanrop) som skal håndteres asynkront. Publisister trenger ikke å endre denne delen av koden.

  • (Valgfritt:) Linje 5–7 angir attributter på sidenivå for annonsefelt som leverer til AdSense. Hvis disse angis her, overstyres eventuelle stilsett i DFP eller AdSense. Dette brukes vanligvis ikke ettersom du kan angi attributtene i DFP. For mer informasjon om hvordan du angir AdSense-parametere i GPT, kan du lese dokumentasjonen om .set()-funksjonen i utviklerdokumentasjonen.

  • Linje 9 og 12: "/1234/travel/asia" angir nettverkskode (1234) og målrettet annonseenhet (travel/asia). Du kan finne nettverkskoden din i Administrator-fanen i DFP.

    728, 90 angir reklamestørrelsen til annonsefeltet. Her angir du hvilken reklamestørrelse eller hvilke reklamestørrelser som kan leveres til dette annonsefeltet. Angi flere størrelser ved hjelp av denne syntaksen (width = bredde): [[width1, height1], [width2, height2], [width3, height3]]. Alle størrelser her skal også være tilknyttet annonseenheten som er målrettet – på denne måten kan du avgrense listen basert på det spesifikke feltet. Når du bruker annonsefelt med flere størrelser, må størrelsene angis i samme rekkefølge som de vises i DFP. Finn ut mer om feltdefinisjoner og -rekkefølger.

    Linje 9, 12, 23, 25, 28 og 30: "div-gpt-ad-123456789-0" – det er gjennom denne funksjonen vi sikrer samsvar mellom annonsefeltene som defineres i toppteksten, og annonsefeltene på siden (div-tag-ene i hovedteksten (body-delen) der reklamene leveres). Disse kan navngis fritt, så lenge de stemmer overens. Tag-generatoren vår bruker imidlertid "div-gpt-ad-[random number]-0", "div-gpt-ad-[random number]-1" og så videre. Dette er en ryddig metode for å få dem til å ligne på hverandre, samtidig som de blir forskjellige. Det er viktig at den samme <div>-ID-en brukes konsekvent for en gitt posisjon på en side, siden den brukes til optimalisering på en rekke områder.

    Selv om det her brukes vilkårlige tall, er ikke dette måten GPT unikt identifiserer en annonseforespørsel på. Det gjøres bak kulissene via GPT-biblioteket. Disse navnene kan i tillegg gjenbrukes på andre nettsider, forutsatt at det ikke finnes flere forekomster av det samme div-navnet på den samme siden.

    Finn ut mer om DFP-beholdningsstrukturen, annonseenhetshierarkiet og hvordan målretting overføres til annonseenhetene i beholdningsoversikten.

  • Linje 11, 14, 15 og 16 (valgfritt): Angi målretting mot nøkkelverdi på annonsefeltnivå med .setTargeting()-funksjonen. Du kan knytte flere verdier til én nøkkel, som i det første eksempelet: ("key", ["value1", "value2", "value3"]). Hvis du vil angi målretting mot flere nøkler, kaller du opp funksjonen flere ganger, som vist i det andre eksempelet (gender=male og age=20-30). Hvis du vil finne ut mer om hvordan du angir nøkkelverdi-parametere i GPT, kan du lese gjennom dokumentasjonen for .setTargeting()-funksjonen samt artikkelen om hvordan du angir målretting og størrelser ved hjelp av GPT. 

  • Linje 16: googletag.pubads().setTargeting("topic","basketball"); angir målrettingen mot nøkkelverdier på sidenivå. Vær oppmerksom på at når målrettingen konfigureres med nøkkelverdier på sidenivå, overføres denne målrettingen til alle annonsefelt. På samme måte som med nøkkelverdier på feltnivå kan du knytte flere verdier til én nøkkel: ("key", ["value1", "value2", "value3"]). Hvis du vil finne ut mer om hvordan du angir nøkkelverdi-parametere i GPT, kan du lese utviklerdokumentasjonen for .setTargeting()-funksjonen samt artikkelen vår om hvordan du angir målretting og størrelser ved hjelp av GPT.

  • Linje 17: googletag.pubads().enableSingleRequest(); slår på enkeltforespørselarkitektur (SRA, Single Request Architecture). Ta med denne linjen hvis du vil kalle alle annonsefelt på siden i ett kall (åpner for garanterte veisperringer, og å samle annonser i ett kall kan medføre fordeler med tanke på ytelsen på nettsiden din). Hvorfor velger noen å ikke bruke SRA? SRA støtter foreløpig ikke programmerbare Google-annonser (GPA).

  • Linje 18: Du kan få gjengitt reklamer synkront ved å legge til googletag.pubads().enableSyncRendering();. Dette ber tjenesten om å vente på at hver enkelt annonseforespørsel skal fullføres før siden gjengis videre.

  • Linje 23: (valgfritt): style="width: 728px; height: 90px" er størrelsen elementet har før reklamen gjengis. Hvis du bruker tagger i flere størrelser, er det best å utelate denne funksjonen (i så fall benyttes størrelsen på den valgte reklamen som størrelse for elementet, når reklamen er gjengitt). Hvis du eventuelt velger å bruke den, må du sørge for at begge dimensjonene er store nok til å inneholde den største av de kvalifiserte reklamene. For annonse-tager i én enkelt størrelse kan dette imidlertid brukes for å utvide beholderelementet frem til reklamen lastes inn, slik at andre sideelementer ikke forskyves når reklamen gjengis.

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>
 

Hvis du ikke kan redigere toppteksten på nettsidene dine

Du kan bruke GPT uten å endre toppteksten (head-delen) på nettsidene dine.

Alternativ 1: Angi annonseenhetene på selve siden der de vises, i stedet for å gjøre dette i toppteksten på siden. Dette kalles en integrert tag. Med en integrert tag er hele definisjonen og forespørselen for GPT-annonsefeltet, samt innlastingen av GPT-biblioteket, samlet i én <script>-tag. En viktig begrensning når det gjelder integrerte tagger, er at de ikke støtter SRA. Bruk følgende eksempler for å angi et integrert annonsefelt.

Eksempel på en integrert asynkron GPT

Dette eksempelet med integrert GPT støtter ikke SRA.

Kall JavaScript-biblioteket for GPT

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

Annonse-tag, eksempel 1: asynkron integrert tag

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

Annonse-tag, eksempel 2: asynkron og komprimert integrert tag (denne metoden støtter ikke målretting på annonsefeltnivå)

<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>
Eksempel på en integrert synkron GPT

Dette eksempelet med integrert GPT støtter ikke SRA.

Anrop til JavaScript-biblioteket for 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>

Annonse-tag, eksempel 1: integrerte tagger, komprimert format (denne metoden støtter ikke målretting på annonsefeltnivå)

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

Annonse-tag, eksempel 2: synkron integrert tag

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

Siden annonse-taggen bruker JavaScript-biblioteket til GPT, må du sørge for at du tar med koden som laster inn biblioteket, før du inkluderer koden for annonse-taggen. Koden som laster inn biblioteket, er tatt med i eksemplene.

Alternativ 2: Bruk den konvensjonelle GPT-implementeringen, men i stedet for å plassere annonsefeltdefinisjonene i toppteksten til HTML-en, plasserer du dem i hovedteksten. Med dette alternativet må du sørge for at rekkefølgen er riktig. Koden som laster inn biblioteket og definerer annonsefeltene, må kalles opp før du sender forespørsler om annonser for disse feltene. Fordi koden ikke er segmentert inn i toppteksten og hovedteksten på siden din, og du må styre rekkefølgen til koden, kan denne tilnærmingen være mer komplisert å gjennomføre, men du får fleksibiliteten ved å kunne bruke SRA.

Overstyring av AdSense-formatering på sidenivå (valgfritt)

I de fleste tilfeller har du alt angitt formatering for AdSense-annonsene dine i DFP eller AdSense. Hvis du ønsker å overstyre denne formateringen på det individuelle sidenivået, må du imidlertid sette inn den følgende koden i taggene dine.

For asynkrone tagger:

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

 

For synkrone tagger:

<script>
  googletag.pubads().set("adsense_background_color", "FFFFFF");
</script>

Bruk av Google Publisher-tagger uten JavaScript for å opprette sporingspiksler i formatet 1 x 1

Slik oppretter du en visningssporer med GPT:

  1. Opprett en ny eller ta i bruk en eksisterende annonseenhet, og bruk denne til å spore visningstellingen.

  2. Opprett en ordrelinje i formatet 1 x 1, og legg til en bildereklame med en gjennomsiktig piksel.

  3. Målrett ordrelinjen på 1 x 1 mot annonseenheten du bruker for sporing.

  4. Opprett en Google Publisher-tag uten JavaScript, som kaller opp visningspikselen.

    Nedenfor vises et eksempel på koden du skal legge til i reklamekoden for å opprette en visningssporer i formatet 1 x 1, ved hjelp av tag-formatet uten JavaScript:

    <img src='http://pubads.g.doubleclick.net/gampad/ad?iu=/1234/ad_unit&sz=1x1&t=&c=12345678'/>
  5. Bruk piksel-taggen for visning på én av to måter:

    • Legg til taggen i en tilpasset reklame eller tredjepartsreklame som skal leveres på siden. I reklamens Innstillinger-fane legger du til taggen øverst i Kodebit-feltet.

    • Legg til taggen direkte på nettsiden.

Hvis du vil finne ut mer om hvordan du genererer nettadresser som ikke er basert på JavaScript, kan du lese gjennom artikkelen om annonsevisning i miljøer uten JavaScript.

Var denne artikkelen nyttig?
Hvordan kan vi forbedre den?