DFP hậu render callback

Question

Tôi cần phải kích hoạt một số Javascript sau DFP đã xong render tất cả các quảng cáo trên trang - hoặc ít nhất là khi nó đã gây ra collapseEmptyDivs (mà giấu đơn vị quảng cáo không chứa các chi tiết đơn).

Có ai biết cách để DFP kích hoạt gọi lại sau một trong các sự kiện này không?

Answer 1

GPT API bây giờ có một callback được kích hoạt sau mỗi khe được lấp đầy.

Ví dụ:

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

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

Answer 2

Tôi khá chắc chắn rằng DFP không cung cấp cho một cuộc gọi lại sau khi quảng cáo đã hiển thị. Tôi đã sử dụng đoạn mã sau để làm điều này. Nó gọi hàm gọi lại sau khi một trong các cách sau đã xảy ra:

-Các quảng cáo đã được nạp và iframe đã trả

quảng cáo -Không đã được nạp, và các đơn vị quảng cáo đã được ẩn bởi collapseEmptyDivs()

-Một lượng thời gian nhất định đã trôi qua (trong trường hợp này là 2 giây) mà không xảy ra. Giống như nếu có một số loại lỗi mạng kết nối với DFP.

AdID sẽ là id của container quảng cáo của bạn

giả sử bạn đang sử dụng 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); 
    } 
} 

Answer 3

Kiểm tra các jQuery DFP mở rộng Tôi đang làm việc trên ... nó vẫn là một chút của một tác phẩm đang tiến hành nhưng cung cấp cuộc gọi lại mà bạn đang sử dụng.

Ví dụ về cách sử dụng nó ở trong this file.

Bạn sẽ thấy hai cuộc gọi lại khả dụng ... sau mỗi quảng cáo đã được tải và sau khi tất cả quảng cáo đã tải. Một lớp cũng được đặt trên phần tử vùng chứa đơn vị quảng cáo, điều này có thể không hiển thị (khi không tìm thấy quảng cáo), khối hiển thị (khi quảng cáo được tìm thấy) hoặc hiển thị-gốc (cho khi không tìm thấy quảng cáo nhưng chứa div chứa nội dung để bắt đầu, tôi sử dụng nội dung này để vượt qua một số phần nhất định của trang web có nội dung quảng cáo khi được yêu cầu). Tất nhiên, các lớp này rất hữu ích để làm việc với một lần bên trong hàm gọi lại.

Answer 4

Tôi đã hack chức năng debug_log.log của googletag và đẩy nó qua jQuery để kích hoạt các sự kiện trên nhiều hành động của DFP. Việc hack không yêu cầu 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

Answer 5

tải kịch bản trong một phần của trang của bạn:

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

khởi google xuất bản tag với kịch bản sau đây, thích hợp hơn cũng như trong của trang của bạn:

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

Đăng ký các khe riêng lẻ (có thể được tạo ra bằng vòng lặp foreach) và hiển thị chúng. Trình nghe sự kiện có thể được đăng ký cũng trên mỗi vị trí. Đây là phần quan trọng: đảm bảo rằng bạn làm mới chúng lại với nhau để tránh kết thúc với cùng một quảng cáo trên cả hai vị trí (nếu quảng cáo được gán cho cả hai vị trí) => 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> 

Sau khi quảng cáo đã được trả lại, gọi lại được kích hoạt.

Để biết thêm thông tin có một cái nhìn vào tập tin này: https://github.com/davidecantoni/googletag

Answer 6

Nếu bạn cần phải xác định giao của một vị trí cụ thể (hữu ích nếu bạn đang sử dụng cùng một quảng cáo cho nhiều thời điểm) làm cho bạn có thể làm

sau

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