javascript - DFP レンダリング後のコールバック

Question

DFP がページ上のすべての広告のレンダリングを終了した後、または少なくともcollapseEmptyDivs (広告申込情報を含まない広告ユニットを非表示にする) がトリガーされたときに、 JavaScript をトリガーする必要があります。

これらのイベントのいずれかの後に DFP にコールバックをトリガーさせる方法を知っている人はいますか?

score 66 · Accepted Answer

GPT API に、各スロットが埋まった後にトリガーされるコールバックが追加されました。

例えば：

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]);
});

https://developers.google.com/doubleclick-gpt/reference#googletag.events.SlotRenderEndedEventを参照してください。

score 20 · Accepted Answer

googletagのdebug_log.log関数をハッキングし、それをjQueryにプッシュして、多くのDFPのアクションでイベントを発生させました。ハックには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_receiveing
gpt-slot_render_delay
gpt-slot_rendering
gpt-slot_rendered

score 9 · Accepted Answer

ページの一部にスクリプトをロードします。

// 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);
})();

次のスクリプトを使用して Google サイト運営者タグを初期化します。ページのセクションでも同様に設定することをお勧めします。

// 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();
});

スロットを個別に登録し (foreach ループで生成可能)、レンダリングします。イベントリスナーは、スロットごとに登録することもできます。ここで重要な点: 両方のスロットに同じ広告が表示されるのを避けるために、それらを一緒に更新してください (広告が両方のスロットに割り当てられている場合) => 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>

広告がレンダリングされた後、コールバックがトリガーされます。

詳細については、このファイルをご覧ください: https://github.com/davidecantoni/googletag

score 1 · Accepted Answer

広告がレンダリングされた後、DFP がコールバックを提供していないことは確かです。これを行うには、次のコードを使用しました。次のいずれかが発生した後、コールバック関数を呼び出します。

- 広告が読み込まれ、iframe がレンダリングされました

-広告が読み込まれず、広告ユニットが collapseEmptyDivs() によって非表示になった

-どちらも発生せずに一定時間 (この場合は 2 秒) が経過した。たとえば、DFP への接続中に何らかのネットワークエラーが発生した場合などです。

adId は広告コンテナの ID になります

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); 
   }
}

score 1 · Accepted Answer

私が取り組んでいるjQuery DFP拡張機能をチェックしてください...まだ少し進行中の作業ですが、必要なコールバックを提供します。

使用方法の例は、このファイルにあります。

各広告が読み込まれた後と、すべての広告が読み込まれた後に、2 つのコールバックが利用可能であることがわかります。広告ユニットコンテナ要素にもクラスが設定されます。これは、display-none (広告が見つからない場合)、display-block (広告が見つかった場合)、または display-original (広告が見つからない場合) のいずれかです。コンテナ div にはまずコンテンツが含まれていました。必要に応じて、サイトの特定の部分に広告コンテンツを追加するためにこれを使用します）。もちろん、これらのクラスは、コールバック内で一度操作すると便利です。

javascript - DFP レンダリング後のコールバック

6 に答える 6

Related

Reference