Handle Clickable Ads

The MediaPlayer provides a notifyClick() function that dispatches ad-related events when a clickable ad is playing. These events provide ad and ad break information that your app can use to provide click-through functionality.

The MediaPlayer fires the following events when a clickable ad plays:

• AdobePSDK.PSDKEventType.AD_STARTED
• AdobePSDK.PSDKEventType.AD_CLICKED
• AdobePSDK.PSDKEventType.AD_COMPLETED

The AdClickedEvent contains the information necessary to process the click-through function.

1. Provide a control in your player for users to click on clickable ads.

   This could be a button or any other element for capturing the user’s click.

2. Add an event listener for the user’s ad click event.

   For example:

   document.getElementById([
   <i>your_click_control_id</i>]).addEventListener("click", onAdClick);
   
   

3. Add a handler for the user’s click event.

   This handler needs to prompt the MediaPlayer to fire the AdClicked event.

   onAdClick = function (event) {
       // Get a reference to your player
       var player = getPlayer();
       if (player) {
           // Call the MediaPlayer's notifyClick function
           // which gets MediaPlayer to fire AdClicked
           player.notifyClick();
       }
   }
   
   

4. Add event listeners for the MediaPlayer ad start, ad clicked, and ad completed notifications.

   
    <i>your_player</i>().addEventListener(AdobePSDK.PSDKEventType.AD_STARTED, onAdStarted);
   
    <i>your_player</i>().addEventListener(AdobePSDK.PSDKEventType.AD_COMPLETED, onAdCompleted);
   
    <i>your_player</i>().addEventListener(AdobePSDK.PSDKEventType.AD_CLICKED, onAdClickedEvent);
   

5. Add event handlers.
   a. Handle the ad start event.
   This could do anything, such as setting up UI for the user.

   onAdStarted = function (event) {
       if (clickAddButton && event && event.ad) {
           var adClick = event.ad.primaryAsset && event.ad.primaryAsset.adClick;
           if (adClick && adClick.isValid) {
               // Do some initial processing
               // when the ad starts, prior
               // to the user's click.
           }
       }
   }
   

   b. Handle the ad clicked event.
   In this example, we obtain ad information from the event and open a new browser window using that information:

   onAdClickedEvent = function (event) {
       if (event && event.ad) {
           var adClick = event.adClick;
           if (!(adClick && adClick.isValid)) {
               adClick = event.ad.primaryAsset && event.ad.primaryAsset.adClick;
           }
           if (adClick && adClick.isValid)
           {
               // Do something with the currently playing ad
               window.open(adClick.url);
           }
       }
   }
   

   c. Handle the ad completed event.

   onAdCompleted = function (event) {
       if (clickAddButton) {
           clickAddButton.setAttribute('hidden', 'true');
       }
   }
   

Business.Adobe.com resources