配套橫幅廣告

TVSDK支援輔助橫幅廣告,這些廣告是線性廣告隨附的廣告,通常會線上性廣告結束後保留在頁面上。 您的應用程式負責顯示隨附線性廣告的配套橫幅。

顯示配套廣告時,請遵循下列建議:

  • 嘗試呈現視訊廣告的配套橫幅廣告,以符合您播放器的版面。

  • 只有當您的位置完全符合其指定的高度和寬度時,才會呈現配套橫幅。

    秘訣

    請勿調整橫幅大小。

  • 廣告開始後,請盡快呈現配套橫幅。

  • 請勿將主廣告/視訊容器與配套橫幅覆蓋。

  • 在廣告結束後,繼續顯示配套橫幅。

    標準是顯示每個配套橫幅,直到您取代此橫幅為止。

配套橫幅資料

AdBannerAsset的內容會描述配套的橫幅。

AdPlaybackEvent.AD_STARTED事件返回包含companionAssets屬性(Vector.<AdAsset>)的Ad實例。
每個AdAsset都提供有關顯示資產的資訊。

可用資訊 說明
寬度 配套橫幅的寬度(以像素為單位)。
高度 配套橫幅的高度(以像素為單位)。
資源類型 此配套橫幅的資源類型:
  • html:資料是以HTML程式碼表示。
  • iframe:資料是iframe URL(src)。
橫幅資料 resourceType為此配套橫幅所指定類型的資料。
靜態URL

有時候,配套橫幅也會有靜態URL,即影像或 .swf(flash橫幅)的直接URL。

如果您不想使用html或iframe,則可以使用影像或swf的直接URL,在Flash階段中顯示橫幅。 在這種情況下,您可以使用staticURL來顯示橫幅。

重要: 您必須檢查靜態URL是否為有效字串,因為此屬性可能不一定都可用。

顯示橫幅廣告

若要顯示橫幅廣告,您必須建立橫幅例項,並允許TVSDK監聽廣告相關事件。

TVSDK會提供與透過AdPlaybackEvent.AD_STARTED事件的線性廣告相關的配套橫幅廣告清單。

清單可透過下列方式指定配套橫幅廣告:

  • HTML程式碼片段
  • iFrame頁面的URL
  • 靜態影像或AdobeFlashSWF檔案的URL

對於每個配套廣告,TVSDK會指出您的應用程式有哪些類型。

AdPlaybackEvent.AD_STARTED事件添加偵聽器,該事件執行下列操作:

  1. 清除橫幅例項中的現有廣告。

  2. Ad.companionAssets取得配套廣告清單。

  3. 如果配套廣告清單不是空的,請在橫幅例項清單上重複。

    每個橫幅實例(AdBannerAsset)都包含寬度、高度、資源類型(html、iframe或靜態),以及顯示配套橫幅所需的資料。

  4. 如果視訊廣告沒有隨附的配套廣告,則配套資產清單中不會包含該視訊廣告的資料。

    若要顯示獨立顯示廣告,請將邏輯新增至指令碼,以在適當的橫幅實例中執行一般的DFP(發佈者的DoubleClick)顯示廣告標籤。

  5. 使用ExternalInterface將橫幅資訊傳送至您頁面上的函式(通常是JavaScript),該函式會在適當的位置顯示橫幅。

    這通常是div,而您的函式使用div ID來顯示橫幅。 例如:

    添加事件偵聽器:

    _player.addEventListener(AdobePSDK.PSDKEventType.AD_STARTED, onAdStarted);
    

    實作監聽器處理常式:

    private function onAdStarted(event:AdPlaybackEvent):void { 
        // check if there are any companion banner 
        if (event.ad && event.ad.companionAssets  
                     && event.ad.companionAssets.length > 0) { 
            for each (var banner:AdBannerAsset in event.ad.companionAssets) { 
                if (ExternalInterface.available) { 
                    //-- call the java script that will handle the banner display. 
                    ExternalInterface.call('addBanner', banner.resourceType,  
                        banner.width, banner.height, banner.bannerData); 
                } 
            } 
        }  
        //...        
    }
    

    處理顯示的JavaScript範例:

    function addBanner(resourceType, width, height, data) { 
        console.log(resourceType + "," +  width + "," +  height); 
    
    //Assume an html element on the page with id like 'banner300x250' 
        var bannerDiv = document.getElementById('banner' + width +  
            'x' + height);  
        if (bannerDiv != null) { 
            if (resourceType == "html") { // for html resource 
                bannerDiv.innerHTML = data; 
            } 
            else if (resourceType == "iframe") { // for iframe resource 
                bannerDiv.innerHTML = "<iframe src='" + data +  
                    "' width='100%' height='100%'></iframe>"; 
            } 
        } 
    }
    

本頁內容