Comment créer des blocs d'annonces DFP réactifs

Publié: 2016-01-22
annonces responsives google dfp - exemple de tag doubleclick

Ce message a été mis à jour pour la dernière fois le 31 août 2021

Vous avez donc un thème réactif et vous souhaitez maintenant passer à Google Ad Manager (GAM) depuis AdSense. La première chose que vous voyez est qu'il n'y a plus de blocs d'annonces réactifs comme ce que vous trouvez généralement dans AdSense.

Les instructions d'assistance de Google peuvent être un peu délicates ou compliquées. Donc, aujourd'hui, je vais vous montrer comment rendre les codes GAM réactifs en quelques étapes simples.

Personnaliser le code DFP pour créer des annonces réactives Google Ad Manager n'est pas une tâche facile.Si vous n'avez pas d'expérience en codage, il serait plus prudent que les experts le fassent correctement pour vous la première fois.Vous ne voulez pas risquer de perdre vos revenus publicitaires !

Si vous avez besoin d'aide , contactez-nous ici.

Avant de commencer, assurez-vous de faire ce qui suit :

  1. Configurez votre inventaire. Configurez toutes les tailles pertinentes par bloc d'annonces. Lire : Bonnes pratiques d'intégration Adsense et GAM
  2. Consultez notre tutoriel sur la façon de générer plusieurs balises Ad Manager ici : https://youtu.be/s74dMDzczyc
  3. Créez maintenant deux fichiers texte et enregistrez-les. Utilisez un bon éditeur de texte (je préfère utiliser Notepad++ car il est gratuit et facile à utiliser).
  4. Faites-en un pour la tête et un autre pour les balises du corps.
  5. Enregistrez les balises du corps.
  6. Ouvrez le fichier head.txt que vous avez créé.

Rendre la balise principale réactive

Étape 1 : Ouvrez le head.txt dans Notepad ++.Tout d'abord, procédons étape par étape. Votre code d'en-tête ressemblera à ceci :

<!– Démarrer la balise GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<script>

fenêtre.googletag = fenêtre.googletag || {cmd : []} ;

googletag.cmd.push(fonction() {

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>

<!– Terminer la balise GPT –>

Étape 2 : J'ai mis en surbrillance un morceau de code ici :

googletag.cmd.push(fonction() {

Vous devez ajouter un peu de code après la ligne en surbrillance. Vous trouverez ci-dessous le code donné que vous devez ajouter. Collez autant d'instances (copies) correspondant à l'itinéraire que vous choisissez parmi les suivants :

  • Le nombre de cartes de taille. Vous pouvez réutiliser la même carte de taille sur plusieurs blocs d'annonces, le cas échéant
  • Le nombre de blocs d'annonces dont vous disposez
  • Le nombre de blocs d'annonces que vous souhaitez rendre réactifs
var mappingadunitname = googletag.sizeMapping().

ajouterTaille([992, 0], [[970, 90], [728, 90], [300, 250], [1, 1]]). //bureau

ajouterTaille([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablette

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

ajouterTaille([0, 0], [[320, 50], [1, 1]]). //autre

construire();

Étape 3 : J'ai mis en surbrillance un autre morceau de code.C'est le nom du mapping que nous allons passer dans le bloc d'annonces dans un instant. Je préfère le faire comme ça,mappingadunitname donc pour notre exemple ci-dessus, je choisis de créer 1 carte de taille par unité, ce qui signifie que nous aurons besoin de 4 instances de celle-ci et de la placer après :

googletag.cmd.push(fonction() {

Étape 4 : Après avoir ajouté le mappage, votre code d'en-tête devrait ressembler à ceci :

<!– Démarrer la balise GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<script>

fenêtre.googletag = fenêtre.googletag || {cmd : []} ;

googletag.cmd.push(fonction() {

var mappingheaderad1 = googletag.sizeMapping().

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

ajouterTaille([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablette

ajouterTaille([0, 0], [1, 1]). //autre

construire();

var mappingcontentad1 = googletag.sizeMapping().

ajouterTaille([992, 0], [[728, 280], [728, 90], [1, 1]]). //bureau

ajouterTaille([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablette

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

ajouterTaille([0, 0], [[320, 50], [1, 1]]). //autre

construire();

var mappingcontentad2 = googletag.sizeMapping().

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

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

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

ajouterTaille([0, 0], [[300, 250], [1, 1]]). //autre

construire();

var mappingrightrail1 = googletag.sizeMapping().

ajouterTaille([992, 0], [[300, 250], [1, 1]]). //bureau

ajouterTaille([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablette

ajouterTaille([0, 0], [1, 1]). //autre

construire();

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>

<!– Terminer la balise GPT –>

Étape 5 : Une dernière étape : vous devez définir ou attribuer un mappage de taille pour chacun des blocs d'annonces.Prenons-en un ici, puis je vous montrerai ce qu'il faut ajouter et où.

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

.addService(googletag.pubads());

Étape 6 : Vous devez maintenant ajouter ce morceau de code .defineSizeMapping(mappingadunitname)entre la partie bleue et la partie rouge du code ci-dessus. c'est à dire avant le point

L'important ici est que les mots entre parenthèses correspondent à la carte de taille que vous souhaitez ajouter à l'intérieur du bloc d'annonces. Pour notre exemple ici, RightRail_Ad1 devrait avoir cette apparence :

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

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

Étape 7 : L'ajout d'un mappage similaire pour tous les autres blocs d'annonces vous donnera votre code final.

<!– Démarrer la balise GPT –>

<script async src='https://securepubads.g.doubleclick.net/tag/js/gpt.js'></script>

<script>

fenêtre.googletag = fenêtre.googletag || {cmd : []} ;

googletag.cmd.push(fonction() {

var mappingheaderad1 = googletag.sizeMapping().

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

ajouterTaille([768, 0], [[300, 250], [728, 90], [1, 1]]). //tablette

ajouterTaille([0, 0], [1, 1]). //autre

construire();

var mappingcontentad1 = googletag.sizeMapping().

ajouterTaille([992, 0], [[728, 280], [728, 90], [1, 1]]). //bureau

ajouterTaille([768, 0], [[728, 280], [728, 90], [1, 1]]). //tablette

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

ajouterTaille([0, 0], [[320, 50], [1, 1]]). //autre

construire();

var mappingcontentad2 = googletag.sizeMapping().

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

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

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

ajouterTaille([0, 0], [[300, 250], [1, 1]]). //autre

construire();

var mappingrightrail1 = googletag.sizeMapping().

ajouterTaille([992, 0], [[300, 250], [1, 1]]). //bureau

ajouterTaille([768, 0], [[300, 250], [320, 100], [320, 50], [1, 1]]). //tablette

ajouterTaille([0, 0], [1, 1]). //autre

construire();

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>

<!– Terminer la balise GPT –>

Remarque : Certaines parties du code sont mises en surbrillance pour souligner quelle taille a été utilisée pour quel bloc d'annonces.

Étape 8 : Examinons maintenant le mappage des tailles :

var mappingcontentad2 = googletag.sizeMapping().

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

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

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

ajouterTaille([0, 0], [[300, 250], [1, 1]]). //autre

construire();

Le code en rouge définit la largeur et la hauteur du navigateur. Habituellement, la hauteur n'est pas importante car elle n'est prise en compte que lorsque nous avons des largeurs égales pour 2 lignes dans le code ci-dessus.

Étape 9 : Maintenant, nous disons ceci dans la première ligne :

  • Si la largeur du navigateur est égale ou supérieure à 992 pixels, veuillez afficher les tailles d'annonces 728 × 280 ou 728 × 90 ou 336 × 280 ou 300 × 250 ou 1 × 1

Et sur la dernière ligne nous disons :

  • Si la largeur du navigateur est égale ou supérieure à 320 pixels, veuillez afficher des tailles d'annonces de 320 × 50 ou 320 × 100 ou 320 × 200 ou 300 × 250 ou 1 × 1.

Les numéros 992px, 768px et 320px fonctionneront pour la plupart des sites Web car ils suivent les tailles conventionnelles des navigateurs pour ordinateurs de bureau, tablettes et mobiles.

Cependant, si vous avez un site Web avec un thème pour tablette et mobile, vous pouvez demander à votre développeur quelle taille de navigateur la transition de thème est déclenchée, puis vous pouvez ajouter cette taille à la place de 768px et 320px respectivement.

Quelle est votre stratégie de revenus programmatiques pour 2019 ?

Chez MonetizeMore, nous aidons les éditeurs à tirer davantage de revenus de leur inventaire publicitaire existant.Nous sommes l'un des principaux partenaires d'édition de Google et proposons une suite de solutions de monétisation pour les éditeurs qui aident nos clients à atteindre leurs objectifs de revenus et à résoudre leurs problèmes liés aux opérations publicitaires.

Bien qu'il soit tout à fait possible de configurer vous-même des blocs d'annonces réactifs DFP, il est important de tenir compte de votre coût d'opportunité.Cela vaut-il la peine de consacrer le temps que vous pourriez consacrer à la croissance de votre entreprise et de risquer de perdre des revenus en raison d'une configuration défectueuse ?

Si vous souhaitez obtenir de l'aide pour configurer des blocs d'annonces réactifs DFP.Créez un compte Premium sur MonetizeMore dès aujourd'hui !

monétiserplus d'optimisation des revenus programmatiques

Lectures associées :

  • AdSense propose des blocs d'annonces réactifs
  • Principaux types d'annonces mobiles pour 2016
  • Les avantages des pages mobiles accélérées de Doubleclick pour les éditeurs
  • Comment préparer les éditeurs alors que les dépenses publicitaires mobiles dépassent celles des ordinateurs de bureau
  • Doubleclick propose désormais le suivi multi-appareils et la publicité native aux annonceurs et éditeurs mobiles