[ads] New tab takeover iOS video ads

[tmancey]

Q1/2024

POC

• [ads] Investigate NTT video ad file sizes for low, medium and high quality videos
• [ads] Implement POC playback of NTT video ads

MVP targeting 1.66.x

• [ads] Implement playback of NTT video ads basing on updated design
• [ads] Deliver compressed NTT video ad in component updater package
• [ads] Autoplay long form NTT video ad muted for n seconds
• [ads] Implement play/pause buttons for long form NTT video ads
• [ads] Support short form NTT video playback
• [ads] Transition to landing page when a user clicks on an NTT video ads CTA button
• [ads] Fadeout/fadein stats on NTP when NTT video is started playing
• [ads] Add support for fit-to-fill mode for NTT video
• [ads] Do not show NTT video for iPhone in landscape mode
• Implement Brave Rewards metrics:
  • [ads] Implement NTT video impressions metrics for Rewards users
  • [ads] Implement NTT video clicks metrics for Rewards users
  • [ads] Implement NTT video visits on landing page metrics for Rewards users
  • [ads] Implement NTT video metrics for the length of time the ad is viewed for Rewards users
  • [ads] Implement NTT video metrics for number of clicks on play button for Rewards users
• Implement non-Brave Rewards metrics:
  • [ads] Implement NTT video impressions for non-Rewards users
  • [ads] Implement NTT video clicks metrics for non-Rewards users
  • [ads] Implement NTT video visits on landing page metrics for non-Rewards users
  • [ads] Implement NTT video metrics for the length of time the ad is viewed for non-Rewards users
  • [ads] Implement NTT video metrics for number of clicks on play button for non-Rewards users
• [ads] Configure NTT video blank space color when viewing video in letterbox/pillar-box modes
• [ads] Tapping on the video during 6 seconds autplay starts video NTT playback

PR: brave/brave-core#22701

Backlog:

• [ads] NTT video background blinks when showing after last tab is closed
• [ads] Implement NTT video metrics tests

--

https://github.com/brave/brave-browser/projects/26#column-19787507

[kjozwiak]

The above requires 1.66.81 or higher for 1.66.x verification 👍 @Uni-verse @hffvld the above should also be checked on iOS 15, iOS 16 & iOS 17. We should also verify that everything is working on phones & tablets. I suspect we might find some issues with the videos being stretched out on tablet.

[Uni-verse]

Verified on iPhone running iOS 17.3.1 using version 1.66.104

Test Plan: brave/brave-core#22701 (comment)

Test Case 1:

• Ensured that video autoplay starts after the tab with New Tab Takeover video ad is opened.
• Ensured the following during autoplay:
  • CTA logo button is not shown during autoplay
  • Video is muted during autoplay
  • Favorites, Stats, Brave News are visible
• Ensured the following after autplay is finished:
  • Favorites, Stats, Brave News are still visible
  • CTA logo button fades-in
  • Video play button fades-in
• Ensured autoplay finishes at frame defined by Stop Frame parameter, which is around 5 seconds
• Ensured video is played when tapping play button
• Ensured the following during playback:
  • CTA logo, play button, Favorites, Stats, Brave News fade-out
  • Video playback is started from the beginning
  • Video is played with sound
  • Cancel button appeared in the upper left corner
• Ensured pausing/un-pausing video works without issues or delays
• Ensured the following is true after playback is finished:
  • CTA logo, play button, Favorites, Stats, Brave News fade-in
  • The video is paused
  • Cancel button disappears
• Ensured tapping CTA logo button
• Ensured page navigates to a landing page with url (https://brave.com/ for staging component)

Test Case 2:

• Ensured tapping on video before autoplay is finished will start full screen playback.
• Ensured the following during playback:
  • CTA logo, play button, Favorites, Stats, Brave News fade-out
  • Video playback is started from the beginning
  • Video is played with sound
  • Cancel button appeared in the upper left corner

Test Case 3:

• Ensured tapping cancel button when more than 50% of playback is reached will close video
• Ensured the following P3A metrics are recorded based on usage in brave://local-state:
• creativeInstanceId.views
• creativeInstanceId.clicks
• creativeInstanceId.lands
• creativeInstanceId.media_play
• creativeInstanceId.media_25
• creativeInstanceId.media_100

Test Case 4:

• Verified all steps in case 4 in New tab takeover iOS video ads brave-core#22701 (comment)

Open new tab with video ad

• Ensure the following events were logged when video ad is viewed in new tab:

  • [ads] Viewed new tab page ad impression with placement id 36406940-83F2-41BF-81FE-DD01394B9F3B and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Confirming view for new_tab_page_ad with transaction id 95dcbe0a-4edc-4e1b-9337-81e0ae04184f and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f

Playback for video ad

• Ensured that following events were recorded in logs after pausing video immediately after starting playback:
  • [ads] Started playing new tab page video ad with placement id 36406940-83F2-41BF-81FE-DD01394B9F3B and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Confirming media_play for new_tab_page_ad with transaction id c7bc408f-0d17-40e4-89de-1b324fc129ba and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Successfully processed media_play confirmation for new_tab_page_ad with transaction id cb22a7ba-a200-4a76-b1d6-52abc61e9d39 and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f

• Ensured the following events were fired/logged when after video has played more than halfway:

  • [ads] Played 25% of new tab page video ad with placement id 36406940-83F2-41BF-81FE-DD01394B9F3B and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Confirming media_25 for new_tab_page_ad with transaction id be3a19c8-b278-4529-adb4-49c8dc121086 and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Successfully processed media_25 confirmation for new_tab_page_ad with transaction id fb70edc5-02ac-4872-b7df-9035feb27c9a and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f

• Ensured the following events were fired/logged when after video has finished playing:

  • [ads] Played 100% of new tab page video ad with placement id 36406940-83F2-41BF-81FE-DD01394B9F3B and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Confirming media_100 for new_tab_page_ad with transaction id 4085320b-f3d0-48db-b876-d0203626f121 and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f
  • [ads] Successfully processed media_100 confirmation for new_tab_page_ad with transaction id d76ec048-3125-49aa-9320-5eab0df7df03 and creative instance id 8946dee6-e50e-4602-b9e4-517b4cda327f

Test Case 5:

• Ensured Brave News be dragged and feed is visible after autoplay is finished on new tab.
• Ensured tapping on Favorites on NTP will load url when autoplay is in progress for video NTT.

Test Case 6:

• Ensured that video and Play button is hidden when rotating device to landscape orientation.
• Ensured CTA logo, Favorites, Stats and Brave News are visible.
• Ensured video and Play button are shown after opening New Tab in landscape and then switching to portrait mode.

Example	Example

Test Case 7:

• Ensured that switching tabs during video autoplay and then return to original tab does not cause issues.
• Ensured that switching tabs during playback and then returning does not cause issues.
• Ensured that CTA logo, Favorites, Stats and Brave News are visible when returning to tab with video ad.

Test Case 8:

• Ensured switching apps/Brave app into background state during autoplay and then returning does not cause issues and video ad is still active.
• Ensured switching apps/Brave app into background state during full screen playback and then returning does not cause issues.
• Ensured that video is paused when changing apps.
• Ensured playback can be resumed by tapping on video after returning to Brave.

[Uni-verse]

Verified on iPad (7th Gen) running version 7.4.1 using version 1.66.104

• Spot checked test cases 1-8 in New tab takeover iOS video ads brave-core#22701 (comment) on iPad and ensured behavior is similar to iPhone.

Test Case 9:

• Ensured Video NTT autoplay is enabled.
• Ensured changing device to landscape orientation does not interrupt video play and no UI issues are observed.
• Ensured CTA logo, Play button, Favorites, Stats, Brave News are visible when autoplay finishes.
• Ensured tapping on the play button start full screen playback.
  • Video is played from the beginning.
  • Video is played with sound.
  • Cancel button appears in top right corner.

UI

Example	Example	Example	Example

Attribution / Rewards

Open Video NTT

Playback

Playback finishes

Tap on Video Sponsor logo

Landed event after 10 secs on sponsor homepage

Case: Disabling background images/sponsored images

• Ensured Sponsored images and video NTT is not shown when disabling Background Images in New Tab Page settings
• Ensured changing Image Type to Default Images will not show any sponsored images on NTP.

Example	Example	Example	Example