web-dev-qa-db-fra.com

Rappel post-rendu DFP

J'ai besoin de déclencher du JavaScript après DFP a fini de restituer toutes les annonces de la page - ou du moins lorsqu'il a déclenché collapseEmptyDivs (qui masque les blocs d'annonces ne contenant aucun élément de ligne).

Quelqu'un connaît-il un moyen de faire en sorte que DFP déclenche un rappel après l'un de ces événements?

javascriptgoogle-dfp
28
Sp4cecat

L'API GPT a maintenant un rappel qui est déclenché après que chaque emplacement est rempli.

Par exemple:

googletag.pubads().addEventListener('slotRenderEnded', function(event) {
 console.log('Creative with id: ' + event.creativeId +
  ' is rendered to slot of size: ' + event.size[0] + 'x' + event.size[1]);
});

Voir https://developers.google.com/doubleclick-gpt/reference#googletag.events.SlotRenderEndedEvent

62
z12345

J'ai piraté la fonction debug_log.log de googletag et l'ai poussée dans jQuery pour déclencher des événements sur de nombreuses actions de DFP. Le hack nécessite jQuery.

https://github.com/mcountis/dfp-events

  • gpt-google_js_loaded
  • gpt-gpt_fetch
  • gpt-gpt_fetched
  • gpt-page_load_complete
  • gpt-queue_start
  • gpt-service_add_slot
  • gpt-service_add_targeting
  • gpt-service_collapse_containers_enable
  • gpt-service_create
  • gpt-service_single_request_mode_enable
  • gpt-slot_create
  • gpt-slot_add_targeting
  • gpt-slot_fill
  • gpt-slot_fetch
  • gpt-slot_receiving
  • gpt-slot_render_delay
  • gpt-slot_rendering
  • gpt-slot_rendered
20
Countis

Charger le script dans la partie de votre page:

// set global variable if not already set
var googletag = googletag || {};
googletag.cmd = googletag.cmd || [];

// load asynchronously the GPT JavaScript library used by DFP,
// using SSL/HTTPS if necessary
(function() {
  var gads   = document.createElement('script');
  gads.async = true;
  gads.type  = 'text/javascript';

  var useSSL = 'https:' === document.location.protocol;
  gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js';
  var node =document.getElementsByTagName('script')[0];
  node.parentNode.insertBefore(gads, node);
})();

Initialisez la balise google publisher avec le script suivant, également préférable dans la section de votre page:

// can be moved as well in the body
// if using async mode, wrap all the javascript into googletag.cmd.Push!
googletag.cmd.Push(function() {
  // set page-level attributes for ad slots that serve AdSense
  googletag.pubads().set("adsense_background_color", "FFFFFF");
  googletag.pubads().setTargeting("topic","basketball");

  // enables Single Request Architecture (SRA)
  googletag.pubads().enableSingleRequest();

  // Disable initial load, we will use refresh() to fetch ads.
  // Calling this function means that display() calls just
  // register the slot as ready, but do not fetch ads for it.
  googletag.pubads().disableInitialLoad();

  // Collapses empty div elements on a page when there is no ad content to display.
  googletag.pubads().collapseEmptyDivs();

  // Enables all GPT services that have been defined for ad slots on the page.
  googletag.enableServices();
});

Enregistrez les emplacements individuellement (peuvent être générés avec une boucle foreach) et restituez-les. L’écouteur d’événements peut également être enregistré par emplacement ..____ Ici, la partie importante: veillez à les actualiser ensemble pour éviter de vous retrouver avec les mêmes annonces sur les deux emplacements (si l’annonce est affectée aux deux emplacements) => googletag .pubads (). refresh ([slot1, slot2]]);

// this code can be moved externally to improve performance
googletag.cmd.Push(function() {
  // define slot1
  slot1 = googletag.defineSlot(
    "/1234/travel/asia/food",
    [728, 90],
    "banner1"
  )
  .addService(googletag.pubads())
  .setTargeting(
    "interests",
    ["sports", "music", "movies"]
  );
  // prerender the slot but don't display it because of disableInitialLoad()
  googletag.display("banner1");

  // define slot2    
  slot2 = googletag.defineSlot(
    "/1234/travel/asia/food",
    [[468, 60], [728, 90], [300, 250]],
    "banner2"
  )
  .addService(googletag.pubads())
  .setTargeting("gender", "male")
  .setTargeting("age", "20-30");

  // prerender the slot but don't display it because of disableInitialLoad()
  googletag.display("banner2");  


  // add event to sign the slot as redered or not
  googletag.pubads().addEventListener('slotRenderEnded', function(event) {
    if (event.slot === slot1 || event.slot === slot2) {
      // do something related to the slot
    }
  });

  // refresh all container ads and show them
  // very important to call refresh with an array to avoid 
  // multiple callback to the registered event 
  googletag.pubads().refresh([slot1, slot2]);
});

<div id="banner1" style="width:300px; height:250px;"></div>

<div id="banner2" style="width:300px; height:250px;"></div>

Après le rendu de l'annonce, le rappel est déclenché.

Pour plus d'informations, consultez ce fichier: https://github.com/davidecantoni/googletag

7
Spidi

Découvrez l'extension jQuery DFP sur laquelle je travaille ... le travail est encore un peu en cours mais fournit le rappel que vous recherchez.

Un exemple d'utilisation est dans ce fichier .

Deux rappels sont disponibles ... après le chargement de chaque annonce et après le chargement de toutes les annonces. Une classe est également définie sur l'élément de conteneur d'annonces. Elle peut être soit display-none (lorsqu'aucune annonce n'est trouvée), display-block (lorsqu'une annonce est trouvée) ou display-original (lorsque aucune container div contenait du contenu pour commencer, je l’utilise pour survoler certaines parties des sites avec du contenu publicitaire lorsque nécessaire). Ces classes sont bien sûr utiles pour travailler une fois dans le rappel.

1
Matt Cooper

Si vous devez identifier la fin du rendu d'un logement spécifique (utile si vous utilisez la même création pour plusieurs logements), vous pouvez procéder comme suit: 

googleAd =  googletag.defineSlot('/xxxxx/web_top_AAAxAAA', [xxx, xxx], 'div-id').addService(googletag.pubads());    


googletag.pubads().addEventListener('slotRenderEnded', function(event) {
                    if( event.slot.W == googleAd.W ){
                        // your code here
                    }
                });
1
Aman Verma

Je suis à peu près sûr que DFP ne prévoit pas de rappel après le rendu de l'annonce. J'ai utilisé le code suivant pour cela. Il appelle la fonction de rappel après l'un des événements suivants:

-L'annonce a été chargée et l'iframe a été rendu

-Aucune annonce n'a été chargée et le bloc d'annonces a été masqué par collapseEmptyDivs ()

-Un certain temps s'est écoulé (dans ce cas, 2 secondes) sans qu'aucun ne se produise. Comme s’il y avait une sorte d’erreur de connexion au réseau DFP.

adId serait l'id de votre conteneur d'annonce.

suppose que vous utilisez jQuery

function callback() {
   //your callback function - do something here
}

function getIframeHtml(iframe) {
   if(iframe.contentWindow && iframe.contentWindow.document && iframe.contentWindow.document.body && iframe.contentWindow.document.body.innerHTML) {
       return iframe.contentWindow.document.body.innerHTML;
   }
   return null;
}

var dfpNumChecks = 20;
var dfpCheckCount = 0;
var dfpCheckTimer = 100;

function dfpLoadCheck(adId) {
   var nodes = document.getElementById(adId).childNodes;

   if(nodes.length && nodes[0].nodeName.toLowerCase() == 'iframe' && getIframeHtml(nodes[0])) {
       //the iframe for the ad has rendered
       callback();
       return;
   } else if($('#' + adId).css('display') == 'none' || (dfpCheckCount >= dfpNumChecks)) {
       //the ad unit has been hidden by collapseEmptyDivs()
       callback();
       return;
   } else {
       dfpCheckCount++;
       setTimeout(function() { dfpLoadCheck(adId) }, dfpCheckTimer); 
   }
}
0
alexp