Come creare unità pubblicitarie DFP reattive

Pubblicato: 2016-01-22

annunci reattivi di google dfp - esempio di tag doubleclick

Questo post è stato aggiornato di recente il 31 agosto 2021

Quindi hai un tema reattivo e ora vuoi passare a Google Ad Manager (GAM) da AdSense. La prima cosa che vedi è che non ci sono più unità pubblicitarie reattive come quelle che normalmente trovi in AdSense.

Le istruzioni di supporto di Google potrebbero essere un po' complicate o complicate. Quindi oggi ti mostrerò come puoi rendere i codici GAM reattivi in pochi semplici passaggi.

Personalizzare il codice DFP per rendere gli annunci adattabili di Google Ad Manager non è un compito facile.Se non hai esperienza di programmazione, sarebbe più prudente che gli esperti lo facciano correttamente per te la prima volta.Non vuoi rischiare di perdere le tue entrate pubblicitarie!

Se hai bisogno di aiuto , contattaci qui.

Prima di iniziare, assicurati di fare quanto segue:

Imposta il tuo inventario. Configura tutte le dimensioni pertinenti per unità pubblicitaria. Leggi: Best practice per l'integrazione di Adsense e GAM
Consulta il nostro tutorial su come generare più tag Ad Manager qui: https://youtu.be/s74dMDzczyc
Ora crea due file di testo e salvali. Usa un buon editor di testo (preferisco usare Notepad++ perché è gratuito e facile da usare).
Creane uno per la testa e un altro per le etichette del corpo.
Salva i tag del corpo.
Apri il file head.txt che hai creato.

Rendere reattivo il tag head

Passaggio 1: apri head.txt in Notepad ++.Innanzitutto, facciamolo passo dopo passo. Il tuo codice di intestazione sarà simile a questo:

<!– Avvia tag GPT –>

finestra.googletag = finestra.googletag || {cmd: []};

googletag.cmd.push(funzione() {

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– Fine tag GPT –>

Passaggio 2: ho evidenziato un pezzo di codice lì:

googletag.cmd.push(funzione() {

Devi aggiungere un po' di codice dopo la riga evidenziata. Di seguito è riportato il codice che devi aggiungere. Incolla tutte le istanze (copie) corrispondenti a qualsiasi percorso tu scelga tra i seguenti:

Il numero di mappe di dimensioni. Puoi riutilizzare la stessa mappa delle dimensioni su più unità pubblicitarie, se applicabile
Il numero di unità pubblicitarie che hai
Il numero di unità pubblicitarie che desideri rendere reattive

var mappingadunitname = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //altro

costruire();

Passaggio 3: ho evidenziato un altro bit di codice.Questo è il nome della mappatura che tra poco passeremo nell'unità pubblicitaria. Preferisco farlo in questo modo,mappando adunitname quindi per il nostro esempio sopra, sto scegliendo di creare 1 mappa di dimensioni per unità, il che significa che avremo bisogno di 4 istanze di essa e posizionarla dopo:

googletag.cmd.push(funzione() {

Passaggio 4: dopo aver aggiunto la mappatura, il codice dell'intestazione dovrebbe essere simile a questo:

<!– Avvia tag GPT –>

finestra.googletag = finestra.googletag || {cmd: []};

googletag.cmd.push(funzione() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tavoletta

addSize([0, 0], [1, 1]). //altro

costruire();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //altro

costruire();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //altro

costruire();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tavoletta

addSize([0, 0], [1, 1]). //altro

costruire();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– Fine tag GPT –>

Passaggio 5: ora un ultimo passaggio: devi definire o assegnare la mappatura delle dimensioni per ciascuna delle unità pubblicitarie.Prendiamone uno qui e poi ti mostrerò cosa aggiungere e dove.

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.addService(googletag.pubads());

Passo 6: Ora devi aggiungere questo pezzo di codice .defineSizeMapping(mappingadunitname)tra la parte blu e quella rossa del codice sopra. cioè prima del punto

L'importante è che le parole tra parentesi corrispondano alla mappa delle dimensioni che desideri aggiungere all'interno dell'unità pubblicitaria. Per il nostro esempio qui, RightRail_Ad1 dovrebbe avere questo aspetto:

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

Passaggio 7: l'aggiunta di una mappatura simile per tutte le altre unità pubblicitarie ti darà il codice finale.

<!– Avvia tag GPT –>

finestra.googletag = finestra.googletag || {cmd: []};

googletag.cmd.push(funzione() {

var mappingheaderad1 = googletag.sizeMapping().

addSize([992, 0], [[970, 90], [970, 250], [970, 66], [980, 120], [728, 90], [300, 250], [1, 1] ]). //desktop

addSize([768, 0], [[300, 250], [728, 90], [1, 1]]). //tavoletta

addSize([0, 0], [1, 1]). //altro

costruire();

var mappingcontentad1 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [1, 1]]). //mobile

addSize([0, 0], [[320, 50], [1, 1]]). //altro

costruire();

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //altro

costruire();

var mappingrightrail1 = googletag.sizeMapping().

addSize([992, 0], [[300, 250], [1, 1]]). //desktop

addSize([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tavoletta

addSize([0, 0], [1, 1]). //altro

costruire();

googletag.defineSlot('/1234567/Header_Ad1', [[970,90],[970,250],[728,90],[300,250]], 'div-gpt-ad-9386839-1')

.defineSizeMapping(mappingheaderad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/content_Ad1', [[728,90],[320,50],[320,100]], 'div-gpt-ad-9386839-2')

.defineSizeMapping(mappingcontentad1).addService(googletag.pubads());

googletag.defineSlot('/1234567/Content_Ad2', [[728,90],[336,280],[300,250],[320,100],[320,50]], 'div-gpt-ad-9386839-3')

.defineSizeMapping(mappingcontentad2).addService(googletag.pubads());

googletag.defineSlot('/1234567/RightRail_Ad1', [[300,250],[320,50],[320,100]], 'div-gpt-ad-9386839-4')

.defineSizeMapping(mappingrightrail1).addService(googletag.pubads());

googletag.pubads().enableSingleRequest();

googletag.pubads().collapseEmptyDivs();

googletag.enableServices();

});

</script>

<!– Fine tag GPT –>

Nota: parti del codice evidenziate per evidenziare quale mappa delle dimensioni è stata utilizzata per quale unità pubblicitaria.

Passaggio 8: ora diamo un'occhiata alla mappatura delle dimensioni:

var mappingcontentad2 = googletag.sizeMapping().

addSize([992, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //desktop

addSize([768, 0], [[728, 280], [728, 90], [336, 280], [300, 250], [1, 1]]). //tavoletta

addSize([320, 0], [[320, 50], [320, 100], [320, 200], [300, 250], [1, 1]]). //mobile

addSize([0, 0], [[300, 250], [1, 1]]). //altro

costruire();

Il codice in rosso definisce la larghezza e l'altezza del browser. Di solito l'altezza non è importante perché viene presa in considerazione solo quando abbiamo larghezze uguali per 2 righe nel codice sopra.

Passo 9: Ora stiamo dicendo questo nella prima riga:

Se la larghezza del browser è uguale o superiore a 992px, mostra le dimensioni degli annunci 728×280 o 728×90 o 336×280 o 300×250 o 1×1

E nell'ultima riga stiamo dicendo:

Se la larghezza del browser è uguale o superiore a 320px, mostra le dimensioni dell'annuncio 320×50 o 320×100 o 320×200 o 300×250 o 1×1

I numeri, 992px, 768px e 320px funzioneranno per la maggior parte dei siti Web poiché seguono le dimensioni convenzionali dei browser desktop, tablet e mobili.

Tuttavia, se disponi di un sito Web con un tema per tablet e dispositivi mobili, puoi chiedere al tuo sviluppatore quale dimensione del browser viene attivata la transizione del tema e quindi puoi aggiungere quella dimensione al posto rispettivamente di 768px e 320px.

Qual è la tua strategia di entrate programmatiche per il 2019?

Noi di MonetizeMore aiutiamo gli editori a ottenere maggiori entrate dal loro spazio pubblicitario esistente.Siamo uno dei principali partner per i publisher di Google e disponiamo di una suite di soluzioni di monetizzazione per i publisher che aiutano i nostri clienti a raggiungere i loro obiettivi di guadagno e a risolvere i loro grattacapi relativi alle operazioni pubblicitarie.

Anche se è assolutamente possibile configurare autonomamente le unità pubblicitarie reattive di DFP, è importante considerare il costo opportunità.Vale la pena spendere il tempo che potresti spendere per far crescere la tua attività e rischiare di perdere entrate a causa di una configurazione difettosa?

Se sei interessato a ricevere assistenza per configurare le unità pubblicitarie reattive di DFP.Registrati per un account Premium su MonetizeMore oggi stesso!

Letture correlate:

AdSense offre unità pubblicitarie reattive
I migliori tipi di annunci per dispositivi mobili per il 2016
I vantaggi delle pagine mobili accelerate di Doubleclick per gli editori
Come rendere gli editori pronti mentre la spesa pubblicitaria per dispositivi mobili supera il desktop
Doubleclick Now offre il monitoraggio cross-device e la pubblicità nativa a inserzionisti e editori mobili