DFP廣告代碼如何客製化？

很多媒體反應DFP代碼(GooglePublisherTag)問題比AdSense代碼多。主因是GPT為了提高網頁上的HTML/CSS/Javascript元件之間的互動，embed一整套library，讓媒體透過自己的需求去客製化。



GPT的客製function type很多，未來會分享例如回應式廣告代碼，或很多媒體關心的蓋版廣告碼等。這篇只是要強調GPT library是媒體的好朋友，母湯忽略它。

1. GPT Reference Library
https://developers.google.com/doubleclick-gpt/reference

熟悉C++, javascript的朋友應該第一時間就認出boolean, string等data type。這些type能協助媒體用更動態的方式操作廣告呼叫。以下是常見Function Type:

2. 使用範例：確保廣告loading避免空版

GPT用iframe的方式來兩段式呼叫廣告。換句話說 ad slot開啟了，但js如果沒有load廣告素材，會有pageload空版情況(顯示"failed to fetch"。

國外有媒體在討論用eventlistener (另一種js常見function)，來確保廣告loading，解決fetch不能的情況。

討論串：
https://productforums.google.com/forum/#!topic/dfp/JFrdsWxVuiY;context-place=forum/dfp

範例作法：
https://developers.google.com/doubleclick-gpt/reference#googletag.Service_addEventListener

以下貼上範例代碼，媒體朋友可以跟自家的工程師討論，如何改成自己網站可用的代碼：

(註 1. 確保ad slot出現，便叫出listener 2. listener再去確保render廣告素材 3. 最後確保曝光viewable)

// 1. Slot render ended listener.
// The listener will be called only when the pubads service renders a slot.
// To listen to companion ads, add a similar listener to
// googletag.companionAds().
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  console.log('Slot has been rendered:');
  console.log(event);
});
// 2. Slot render ended listener, slot specific logic.
// Listeners operate at service level, which means that you cannot add a
// listener for a slotRenderEnded event for a specific slot only. You can,
// however, programmatically filter a listener to respond only to a certain
// ad slot, using this pattern:
var targetSlot = ...;
googletag.pubads().addEventListener('slotRenderEnded', function(event) {
  if (event.slot === targetSlot) {
    // Slot specific logic.
  }
});
// 3. Impression viewable listener, slot specific logic.
// The listener will be called when the impression is considered viewable.
// This event also operates at service level, but, as above, you can filter
// to respond only to a certain ad slot by using this pattern:
googletag.pubads().addEventListener('impressionViewable', function(event) {
  if (event.slot == targetSlot) {
    // Slot specific logic.
  }
});