header.jpg

      Articles Header Bidding à la une

       March 28, 2018

      Les 5 astuces de débogage de votre solution prebid

      Cet article contient des conseils et astuces pour résoudre les problèmes liés à l'intégration de Prebid.js, et vous aidera à déterminer si tout fonctionne correctement sur votre site Web.

      1. Activer les messages de débogage Prebid.js

      Ajoutez pbjs_debug=true à la fin de l'URL de votre page. Par exemple: /publisher.html?pbjs_debug=true . Cela ajoutera deux types de messages à la console de développeur de votre navigateur ( de préférence utilisez le navigateur chrome ) :

      • Dans le mode normal, Prebid.js n’affiche pas les erreurs Javascript pour ne pas casser le reste de votre page. L'ajout du paramètre pbjs_debug exposera les erreurs Javascript sur la console.

      • Vous pouvez afficher des messages de débogage supplémentaires en les filtrant les par la chaîne MESSAGE: comme sur la capture au-dessous: 

        

      Calling bidder : Ce message est affiché lorsque Prebid.js envoie des ad requests aux End Points des ssps.

      Set key value for placement : Une fois toutes les enchères collectées, ou lorsque le délai d'attente est atteint, prebid.js définit le ciblage par key/values pour les blocs d'annonces définis.

      Calling renderAd :Prebid.js affiche le nom de la créa de l’enchère gagnante.

      2. Vérifier les valeurs Key/values de votre Ad server

      Prebid.js définit le ciblage par Key/values de l’adserver pour les enchères reçues avant le délai d’attente que vous avez configuré lors de l’installation.

      Pour visualiser les valeurs qui vont être envoyées à l’adserver, ouvrez la console de votre navigateur et tapez pbjs.getAdserverTargeting(); comme indiqué ci-dessous:

       

      Notez que si aucune offre n’est reçue, alors aucune Key/Value ne sera définie. Vous devriez alors augmenter le délai d’expiration de la requête ou contacter vos partenaires pour déterminer la raison pour laquelle aucune réponse à l'enchère n'est envoyée.

      3. Activez la console de développeur de votre serveur de publicité

      La console du développeur de l’ad server fournit généralement des informations telles que le ciblage, la latence et le journal des événement concernant les Key/values. Vous pouvez utiliser l’outil de débogage de DFP via http://dfpgpt.appspot.com/.
      Par exemple, voici une capture d'écran des journaux de la console du développeur DFP GPT:

       

      4. Voir toutes les offres dans la console

      Pour afficher les informations des enchères reçues par le navigateur sur la console de n’importe qu’elle page qui exécute Prebid.js, vous pouvez suivre les étapes suivantes:

       

      Commencez par ouvrir l’outil de développement Chrome en cliquant sur la touche F12. Dans l'onglet Sources, cliquez sur le bouton » puis cliquez sur l’onglet Snippets :

       

       

      View Snippets in Dev Tools

       

       

      En cliquant sur le bouton droit sélectionnez New pour ajouter le bout de code JS au-dessous :

       

      Add New Snippet in Dev Tools

       

      Collez le code suivant et donnez un nom, par exemple "show-all-bids":

       var bids = pbjs.getHighestCpmBids();

      var output = [];
      for (var i = 0; i < bids.length; i++) {
      var b = bids[i];
      output.push({
      'adunit': b.adUnitCode, 'adId': b.adId, 'bidder': b.bidder,
      'time': b.timeToRespond, 'cpm': b.cpm
      });
      }
      if (output.length) {
      if (console.table) {
      console.table(output);
      } else {
      for (var j = 0; j < output.length; j++) {
      console.log(output[j]);
      }
      }
      } else {
      console.warn('No prebid winners');
      }

      Cliquez avec le bouton droit sur le Snippet code et choisissez Run:

       

      Exécuter un extrait dans les outils de développement

       

      Vérifiez l’affichage dans la console pour voir les enchères:

       

      5. Voir toutes les enchères gagnantes dans la console

       Pour afficher les informations des enchères reçues par le navigateur sur la console de n’importe qu’elle page qui exécute Prebid.js, vous pouvez suivre les étapes suivantes:

       

      Commencez par ouvrir l’outil de développement Chrome en cliquant sur la touche F12. Dans l'onglet Sources, cliquez sur le bouton » puis cliquez sur l’onglet Snippets :

       

      Afficher les extraits dans les outils de développement

       

      En cliquant sur le bouton droit sélectionnez New pour ajouter le bout de code JS au-dessous:

        

      Ajouter un nouvel extrait dans les outils de développement

       

      Collez le code suivant et donnez un nom, par exemple "show-all-winning-bids":

      var bids = pbjs.getHighestCpmBids();
      var output = [];
      for (var i = 0; i < bids.length; i++) {
      var b = bids[i];
      output.push({
      'adunit': b.adUnitCode, 'adId': b.adId, 'bidder': b.bidder,
      'time': b.timeToRespond, 'cpm': b.cpm
      });
      }
      if (output.length) {
      if (console.table) {
      console.table(output);
      } else {
      for (var j = 0; j < output.length; j++) {
      console.log(output[j]);
      }
      }
      } else {
      console.warn('No prebid winners');
      }

      Cliquez avec le bouton droit sur le Snippet code et choisissez Run:

       

      Exécuter un extrait dans les outils de développement

       

      Vérifiez l’affichage dans la console pour visualiser les enchères :

       

       

       

      Prendre RDV
      Inscription Newsletter