サポート問い合わせ先| システムステータス
ページコンテンツ

    ネイティブSDKを使用した広告クエリパラメータの追加

    このトピックでは、Brightcove Native PlayerSDKを使用してVMAPURLに広告クエリパラメーターを追加する方法を学習します。

    概要

    ネイティブプレーヤーの SDK はクライアント側マクロ置換を実行しませんが、広告ターゲティング用のクエリ文字列パラメーターを手動で追加できます。これは、クライアントサイド広告またはサーバーサイド広告のいずれかで行うことができます。

    URL パラメーターについて詳しくは、Video Cloud SSAI 広告設定 API ドキュメントの「広告変数」セクションを参照してください。

    クライアントサイド広告

    VMAP URL に追加された URL パラメータを使用して、カスタム値を指定できます。

    Androidの実装

    広告ターゲティングキー/バリューペアを広告タグの URL に追加する方法は 2 つあります。

    • キーと値のペアを広告タグの URL に直接追加します。Google IMA では、cust_paramsパラメーターを使用して広告ターゲティングキー/値のペアを追加することができます。詳しくは、Google の「マスター動画広告タグにキー値を追加する」を参照してください。
    • updateAdTargetingValuesのメソッドを使用して、広告タグ URL に値のマップを適用しますGoogleIMAComponent

    どちらの方法でも、ADS_REQUEST_FOR_VIDEOキー/値のペアがイベントリスナーの広告タグ URL に追加されます。以下のコード例では、updateAdTargetingValuesのメソッドを使用して、キーと値のペアを追加しますGoogleIMAComponent

    ここでは、CUSTOM_FIELDSVideoADS_REQUEST_FOR_VIDEOイベントのオブジェクトプロパティのプロパティを使用して、キー/値のペアのマップを作成するコードは次のとおりです。

    Video video = (Video) event.getProperties().get(Event.VIDEO);
    if (video != null) {
        Map<String, String> customFieldsMap = (HashMap<String, String>) video.getProperties().get(Video.Fields.CUSTOM_FIELDS);
    }
    

    Google IMA プラグインのセットアップメソッドに追加された、ADS_REQUEST_FOR_VIDEOイベントリスナーの完全なコードサンプルを次に示します。

    eventEmitter.on(GoogleIMAEventType.ADS_REQUEST_FOR_VIDEO, event -> {
        // Create a container object for the ads to be presented.
        AdDisplayContainer container = sdkFactory.createAdDisplayContainer();
        container.setPlayer(googleIMAComponent.getVideoAdPlayer());
        container.setAdContainer(brightcoveVideoView);
        // Build an ads request object and point it to the ad
        // display container created above.
        AdsRequest adsRequest = sdkFactory.createAdsRequest();
    
        // Set Ad Targeting values, using the Video object's Custom Fields
        // (if they are present; if they are not present, use default values instead) 
        Video video = (Video) event.getProperties().get(Event.VIDEO);
        if (video != null) {
            Map<String, String> customFieldsMap = (HashMap<String, String>) video.getProperties().get(Video.Fields.CUSTOM_FIELDS);
            if (customFieldsMap != null) { 
                googleIMAComponent.updateAdTargetingValues(customFieldsMap);
            }
        }
    
        adsRequest.setAdTagUrl(adRulesURL);
        adsRequest.setAdDisplayContainer(container);
        ArrayList<AdsRequest> adsRequests = new ArrayList<AdsRequest>(1);
        adsRequests.add(adsRequest);
        // Respond to the event with the new ad requests.
        event.properties.put(GoogleIMAComponent.ADS_REQUESTS, adsRequests);
        eventEmitter.respond(event);
    });
    

    iOSの実装

    iOS 版ネイティブ SDK で広告クエリパラメーターを追加するには、次の手順に従います。

    1. Brightcove Native SDK を使用して、IMA 広告用のクライアント側コードサンプルの 1 つから始めます。

    2. IMA プラグインを呼び出す前に、URL クエリパラメータを VMAP URL に追加します。これは、次の方法の前に行うことができます。

      for video in mutablePlaylist.videos {
        if let _video = video as? BCOVMutableVideo {
           _video.properties[kBCOVIMAAdTag] = IMAConfig.VMAPResponseAdTag
          updatedVideos.append(_video)
        }
      }

    サーバーサイド広告

    VMAP URL に追加された URL パラメータを使用してカスタム値を提供するには、次の手順を実行します。

    1. SSAI 広告設定 ID を使用して、Brightcoveのカタログ(再生 API)から動画オブジェクトを取得します。ネイティブプレーヤーSDKを使用したサーバーサイド広告の実装に関するドキュメントで広告設定を作成する方法について説明します

      広告設定の例は次のようになります。

      {
        "name": "SSAI VMAP Ad Server",
        "vmap_response_namespace": "bc",
        "config_id": "your ad config Id",
        "account_id": "1752604059001",
        "created_timestamp": "2017-10-24T20:21:55.106488973Z",
        "updated_timestamp": "2017-10-26T14:26:22.161791419Z",
        "ad_config": {
        	"enable_ads": true,
        	"expected_ad_response": "dfp_vmap",
        	"proxy_beacons_enabled": false,
        	"template_url": {
        		"template": "https://solutions.brightcove.com/bcls/brightcove-player/vmap/simple-vmap.xml"
        	}
        }
      }
    2. 再生 API の呼び出しからの JSONResponse で、ビデオオブジェクトのソースを調べます。各ソースオブジェクトには、VMAP プロパティと VMAP URL が含まれます。VMAP URL を選択して抽出します。

      http://ssaiplayback.prod.boltdns.net/playback/once/v1/vmap/hls/v3/clear/3981276734001/
        b871a6b8-4b3e-4787-b176-aed923287d5a/477b1308-fc18-47a6-bb99-6cb9e2ff2040/
        content.vmap?bc_token=XXX
    3. 広告の URL が次のようになっているとします。

      https://myad.com/ads?rule=&id=

      広告 URL に上記の広告マクロが含まれている場合は、これらのクエリパラメーターを適切な値で VMAP URL に追加します。

    4. VMAP URL にクエリパラメータを追加します。この例では、広告URLのマクロは値に置き換えられますdiscos-enabled、 そしてそのマクロはビデオID値に置き換えられます。

      http://ssaiplayback.prod.boltdns.net/playback/once/v1/vmap/hls/v3/clear/3981276734001/
      b871a6b8-4b3e-4787-b176-aed923287d5a/477b1308-fc18-47a6-bb99-6cb9e2ff2040/
      content.vmap?bc_token=XXX&rule=discos-enabled&video_id=5625751316001
    5. SSAI プラグインでビデオを処理します。
    6. 開発の詳細については、以下を参照してください。

    Androidの実装

    再生 API レスポンスから、適切な VMAP ソース URL を抽出し、クエリパラメーターを追加できます。これを行うには、次の手順を実行します。

    1. SSAI 広告設定 ID を使用して、Brightcoveのカタログ(再生 API)から動画オブジェクトを取得します。詳細については、「ネイティブプレーヤーSDKを使用したサーバーサイド広告の実装」ドキュメントの「 Android の実装」セクションを参照してください。
    2. CatalogonVideoのコールバックメソッドで、適切な VMAP URL を選択し、VideoオブジェクトのデフォルトソースSSAISourceSelector。返されるソースオブジェクトには、VMAP URL プロパティが必要です。

      SSAISourceSelector sourceSelector = new SSAISourceSelector();
      Source source = sourceSelector.selectSource(video);            
      String vmapUrl = source.getStringProperty(Source.Fields.VMAP);
    3. クエリパラメータを VMAP URL に追加します。

      private String configureVmapUrlWithCustomParams(String vmapUrl, Map<String, String> vmapUrlParams) {
          Uri.Builder vmapBuilder = Uri.parse(vmapUrl).buildUpon();
          for (Map.Entry<String, String> entry : vmapUrlParams.entrySet()) {
              vmapBuilder.appendQueryParameter(entry.getKey(), entry.getValue());
          }
          return vmapBuilder.toString();
      }
    4. Video更新されたオブジェクトを SSAI プラグインで次のように処理します。

      plugin.processVideo(video);

    完全なコードサンプルは次のとおりです。

    HttpRequestConfig httpRequestConfig = new HttpRequestConfig.Builder()
            .addQueryParameter(AD_CONFIG_ID_QUERY_PARAM_KEY, AD_CONFIG_ID_QUERY_PARAM_VALUE)
            .build();
    Map<String, String> vmapUrlParams = new HashMap<>();
    vmapUrlParams.put("section", "sports");
    vmapUrlParams.put("multi", "baseball,tennis");
    
    catalog.findVideoByID(getString(R.string.video_id), httpRequestConfig, new VideoListener() {
        @Override public void onVideo(Video video) {
            // The Video Sources will have a VMAP url which will be processed by the SSAI plugin,
            // If there is not a VMAP url, or if there are any requesting or parsing error,
            // an EventType.ERROR event will be emitted.
            try{
                SSAISourceSelector sourceSelector = new SSAISourceSelector();
                Source source = sourceSelector.selectSource(video);
                String vmapUrl = source.getStringProperty(Source.Fields.VMAP);
                source.getProperties().put(Source.Fields.VMAP, configureVmapUrlWithCustomParams(vmapUrl, vmapUrlParams)); plugin.processVideo(video);
            }
            catch (NoSourceFoundException ns) {
                Log.e(TAG, "No usable source was found - " + ns.getMessage());
            }
        }
    });
    
    private String configureVmapUrlWithCustomParams(String vmapUrl, Map<String, String> vmapUrlParams) {
        Uri.Builder vmapBuilder = Uri.parse(vmapUrl).buildUpon();
        for (Map.Entry<String, String> entry : vmapUrlParams.entrySet()) {
            vmapBuilder.appendQueryParameter(entry.getKey(), entry.getValue());
        }
        return vmapBuilder.toString();
    }

    iOSの実装

    再生 API レスポンスから、適切な VMAP ソース URL を抽出し、クエリパラメーターを追加できます。これを行うには、次の手順を実行します。

    1. SSAI 広告設定 ID を使用して、Brightcoveのカタログ(再生 API)から動画オブジェクトを取得します。詳細については、「ネイティブプレーヤーSDKを使用したサーバーサイド広告の実装」ドキュメントの「 iOS の実装」セクションを参照してください。
    2. ビデオオブジェクトから、適切なマニフェストまたは VMAP URL を選択して抽出します。再生サービスレスポンスから、JSONResponse (NSDictionary) には BCovVVideo オブジェクトが含まれます。これには、VMAP ドキュメントへの URL を保持するソースが含まれます。あなたのコードは次のようになります:

      // Create a mutable version of the jsonResponse NSDictionary object
      NSURLComponents *components = [[NSURLComponents alloc] init];
      NSMutableDictionary *videoPropertiesDictionary = [[NSMutableDictionary alloc] init];
      NSMutableArray *updatedSources = [[NSMutableArray alloc] init];
      
      // Define the URL parameters that will be added to the VMAP URL
      NSURLQueryItem *queryItemEntrypointUrlParameter = [NSURLQueryItem queryItemWithName:@"rule" value:@"discos-enabled"];
      NSURLQueryItem *queryItemVideoId = [NSURLQueryItem queryItemWithName:@"video_id" value:jsonResponse[@"id"]];
      
      //deserialize the video and store in dictionary
      [videoPropertiesDictionary addEntriesFromDictionary:jsonResponse];
    3. VMAP URL にクエリパラメータを追加します。

      // For each source, update each VMAP URL stored in the jsonResponse NSDictionary object and assemble the NSURLQueryItem. Store it in the mutable version of the jsonResponse NSDictionary object.
      for (NSDictionary *source in videoPropertiesDictionary[@"sources"])
      {
          NSMutableDictionary *mutableSource = [[NSMutableDictionary alloc] init];
          [mutableSource addEntriesFromDictionary:source];
      
          NSString *vmapURL = mutableSource[@"vmap"];
          components = [NSURLComponents componentsWithString:vmapURL];
      
          NSArray *queryItemsArray = components.queryItems;
          NSURLQueryItem *bctoken = [queryItemsArray firstObject];
          components.queryItems = @[bctoken, queryItemEntrypointUrlParameter, queryItemVideoId ];
          mutableSource[@"vmap"] = components.URL.absoluteString;
      
          [updatedSources addObject:mutableSource];
      }
    4. 変更した URL を SSAI プラグインで次のように処理します。

      videoPropertiesDictionary[@"sources"] = updatedSources;
      // Create a new video object with the updated jsonResponse NSDictionary object
      BCOVVideo *video = [BCOVPlaybackService videoFromJSONDictionary:videoPropertiesDictionary];
      // Setting this video object to the BCOVPlaybackController will call the new vmap URL (with the URL parameters appended) when playback starts.
      [self.controller setVideos:@[video]];

    ページの最終更新日04 Oct 2021