[ads] RichNTT: Desktop

browser/ntp_background/view_counter_service_factory.cc

@@ -18,6 +18,7 @@
 #include "brave/components/ntp_background_images/browser/ntp_background_images_service.h"
 #include "brave/components/ntp_background_images/browser/ntp_background_images_source.h"
 #include "brave/components/ntp_background_images/browser/ntp_sponsored_images_source.h"
+#include "brave/components/ntp_background_images/browser/ntp_sponsored_rich_media_source.h"
 #include "brave/components/ntp_background_images/browser/view_counter_service.h"
 #include "brave/components/ntp_background_images/buildflags/buildflags.h"
 #include "chrome/browser/browser_process.h"
@@ -79,6 +80,9 @@ ViewCounterServiceFactory::BuildServiceInstanceForBrowserContext(
         browser_context, std::make_unique<NTPBackgroundImagesSource>(service));
     content::URLDataSource::Add(
         browser_context, std::make_unique<NTPSponsoredImagesSource>(service));
+    content::URLDataSource::Add(
+        browser_context,
+        std::make_unique<NTPSponsoredRichMediaSource>(service));
 
     std::unique_ptr<NTPP3AHelperImpl> ntp_p3a_helper;
     if (g_brave_browser_process->p3a_service() != nullptr) {

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.cc

@@ -209,6 +209,11 @@ void BraveNewTabMessageHandler::RegisterMessages() {
       base::BindRepeating(
           &BraveNewTabMessageHandler::HandleBrandedWallpaperLogoClicked,
           base::Unretained(this)));
+  web_ui()->RegisterMessageCallback(
+      "triggerSponsoredRichMediaAdEvent",
+      base::BindRepeating(
+          &BraveNewTabMessageHandler::HandleTriggerSponsoredRichMediaAdEvent,
+          base::Unretained(this)));
   web_ui()->RegisterMessageCallback(
       "getWallpaperData",
       base::BindRepeating(&BraveNewTabMessageHandler::HandleGetWallpaperData,
@@ -475,6 +480,44 @@ void BraveNewTabMessageHandler::HandleBrandedWallpaperLogoClicked(
   }
 }
 
+void BraveNewTabMessageHandler::HandleTriggerSponsoredRichMediaAdEvent(
+    const base::Value::List& args) {
+  AllowJavascript();
+
+  if (args.size() != 2) {
+    LOG(ERROR) << "Invalid input";
+    return;
+  }
+
+  const base::Value::Dict* const wallpaper = args[0].GetIfDict();
+  if (!wallpaper) {
+    return;
+  }
+
+  const std::string* const placement_id =
+      wallpaper->FindString(ntp_background_images::kWallpaperIDKey);
+  if (!placement_id) {
+    return;
+  }
+
+  const std::string* const creative_instance_id =
+      wallpaper->FindString(ntp_background_images::kCreativeInstanceIDKey);
+  if (!creative_instance_id) {
+    return;
+  }
+
+  const std::string* const ad_event_type = args[1].GetIfString();
+  if (!ad_event_type) {
+    return;
+  }
+
+  if (ntp_background_images::ViewCounterService* const service =
+          ViewCounterServiceFactory::GetForProfile(profile_)) {
+    service->MaybeTriggerSponsoredRichMediaAdEvent(
+        *placement_id, *creative_instance_id, *ad_event_type);
+  }
+}
+
 void BraveNewTabMessageHandler::HandleGetWallpaperData(
     const base::Value::List& args) {
   AllowJavascript();

browser/ui/webui/new_tab_page/brave_new_tab_message_handler.h

@@ -59,6 +59,7 @@ class BraveNewTabMessageHandler : public content::WebUIMessageHandler,
   void HandleSaveNewTabPagePref(const base::Value::List& args);
   void HandleRegisterNewTabPageView(const base::Value::List& args);
   void HandleBrandedWallpaperLogoClicked(const base::Value::List& args);
+  void HandleTriggerSponsoredRichMediaAdEvent(const base::Value::List& args);
   void HandleGetWallpaperData(const base::Value::List& args);
   void HandleCustomizeClicked(const base::Value::List& args);
 

browser/ui/webui/new_tab_page/brave_new_tab_ui.cc

@@ -23,6 +23,7 @@
 #include "brave/components/brave_new_tab/resources/grit/brave_new_tab_generated_map.h"
 #include "brave/components/brave_news/browser/brave_news_controller.h"
 #include "brave/components/brave_news/common/features.h"
+#include "brave/components/constants/webui_url_constants.h"
 #include "brave/components/l10n/common/localization_util.h"
 #include "brave/components/misc_metrics/new_tab_metrics.h"
 #include "brave/components/ntp_background_images/browser/ntp_custom_images_source.h"
@@ -36,6 +37,7 @@
 #include "content/public/browser/url_data_source.h"
 #include "content/public/browser/web_contents.h"
 #include "content/public/browser/web_ui_data_source.h"
+#include "content/public/common/url_constants.h"
 #include "mojo/public/cpp/bindings/pending_receiver.h"
 #include "ui/webui/resources/cr_components/searchbox/searchbox.mojom.h"
 
@@ -76,6 +78,8 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
   content::WebUIDataSource* source = CreateAndAddWebUIDataSource(
       web_ui, name, kBraveNewTabGenerated, IDR_BRAVE_NEW_TAB_HTML);
 
+  web_ui->AddRequestableScheme(content::kChromeUIUntrustedScheme);
+
   AddBackgroundColorToSource(source, web_contents);
 
   // Lottie animations tick on a worker thread and requires the document CSP to
@@ -127,6 +131,11 @@ BraveNewTabUI::BraveNewTabUI(content::WebUI* web_ui, const std::string& name)
                                 std::make_unique<NTPCustomImagesSource>(
                                     ntp_custom_background_images_service));
   }
+
+  source->OverrideContentSecurityPolicy(
+      network::mojom::CSPDirectiveName::FrameSrc,
+      std::string("frame-src ") + kNTPSponsoredRichMediaUrl + ";");
+  source->AddString("ntpSponsoredRichMediaUrl", kNTPSponsoredRichMediaUrl);
 }
 
 BraveNewTabUI::~BraveNewTabUI() = default;

components/brave_new_tab_ui/api/wallpaper.ts

@@ -16,3 +16,7 @@ export function registerViewCount (): Promise<void> {
 export function brandedWallpaperLogoClicked (data: NewTab.BrandedWallpaper | undefined) {
   chrome.send('brandedWallpaperLogoClicked', [data])
 }
+
+export function triggerSponsoredRichMediaAdEvent(data: NewTab.BrandedWallpaper | undefined, adEventType: string) {
+  chrome.send('triggerSponsoredRichMediaAdEvent', [data, adEventType])
+}

components/brave_new_tab_ui/components/default/page/index.tsx

@@ -24,6 +24,7 @@ interface HasImageProps {
   imageHasLoaded: boolean
   imageSrc?: string
   colorForBackground?: string
+  hasSponsoredRichMediaBackground: boolean
 }
 
 type AppProps = {
@@ -108,6 +109,15 @@ const StyledPage = styled('div') <PageProps>`
     flex-direction: column;
     align-items: center;
   }
+
+  ${p => p.hasSponsoredRichMediaBackground && css`
+    // Allow clicks to pass through to background
+    pointer-events: none;
+    // Restore click events for child elements
+    & > * {
+      pointer-events: auto;
+    }
+  `};
 `
 
 export const Page: React.FunctionComponent<React.PropsWithChildren<PageProps>> = (props) => {
@@ -315,6 +325,10 @@ export const FooterContent = styled('div')`
 
 // Gets the value of the CSS `background` property.
 function getBackground(p: HasImageProps) {
+  if (p.hasSponsoredRichMediaBackground) {
+    return ''
+  }
+
   if (!p.hasImage) {
     return p.colorForBackground || `linear-gradient(to bottom right, #4D54D1, #A51C7B 50%, #EE4A37 100%)`
   }

components/brave_new_tab_ui/containers/newTab/index.tsx

@@ -8,7 +8,9 @@ import * as React from 'react'
 // Components
 import getNTPBrowserAPI from '../../api/background'
 import { addNewTopSite, editTopSite } from '../../api/topSites'
-import { brandedWallpaperLogoClicked } from '../../api/wallpaper'
+import {
+  brandedWallpaperLogoClicked, triggerSponsoredRichMediaAdEvent
+} from '../../api/wallpaper'
 import {
   BraveTalkWidget as BraveTalk, Clock, EditTopSite, OverrideReadabilityColor, RewardsWidget as Rewards, SearchPromotion, VPNWidget
 } from '../../components/default'
@@ -46,6 +48,9 @@ import Icon from '@brave/leo/react/icon'
 import * as style from './style'
 import { defaultState } from '../../storage/new_tab_storage'
 import { EngineContextProvider } from '../../components/search/EngineContext'
+import {
+  SponsoredRichMediaBackgroundInfo, SponsoredRichMediaBackground
+} from './sponsored_rich_media_background'
 
 const BraveNewsPeek =  React.lazy(() => import('../../../brave_news/browser/resources/Peek'))
 const SearchPlaceholder = React.lazy(() => import('../../components/search/SearchPlaceholder'))
@@ -85,7 +90,8 @@ function GetBackgroundImageSrc (props: Props) {
     (!props.newTabData.brandedWallpaper || props.newTabData.brandedWallpaper.isSponsored)) {
     return undefined
   }
-  if (props.newTabData.brandedWallpaper) {
+
+  if (props.newTabData.brandedWallpaper && props.newTabData.brandedWallpaper.type === 'image') {
     const wallpaperData = props.newTabData.brandedWallpaper
     if (wallpaperData.wallpaperImageUrl) {
       return wallpaperData.wallpaperImageUrl
@@ -100,6 +106,22 @@ function GetBackgroundImageSrc (props: Props) {
   return undefined
 }
 
+function GetSponsoredRichMediaBackground(props: Props): SponsoredRichMediaBackgroundInfo | undefined {
+  const wallpaperData = props.newTabData.brandedWallpaper
+  if (!props.newTabData.showBackgroundImage
+      || !wallpaperData?.isSponsored
+      || wallpaperData?.type !== 'richMedia'
+      || !wallpaperData?.wallpaperImageUrl) {
+          return undefined
+      }
+  return {
+      url: wallpaperData.wallpaperImageUrl,
+      placementId: wallpaperData.wallpaperId,
+      creativeInstanceId: wallpaperData.creativeInstanceId,
+      targetUrl: wallpaperData.logo.destinationUrl
+  }
+}
+
 function GetShouldShowSearchPromotion (props: Props, showSearchPromotion: boolean) {
   if (GetIsShowingBrandedWallpaper(props)) { return false }
 
@@ -141,6 +163,7 @@ class NewTabPage extends React.Component<Props, State> {
   braveNewsPromptTimerId: number
   hasInitBraveNews: boolean = false
   imageSource?: string = undefined
+  sponsoredRichMediaBackgroundInfo?: SponsoredRichMediaBackgroundInfo = undefined
   timerIdForBrandedWallpaperNotification?: number = undefined
   onVisiblityTimerExpired = () => {
     this.dismissBrandedWallpaperNotification(false)
@@ -152,6 +175,8 @@ class NewTabPage extends React.Component<Props, State> {
     // if a notification is open at component mounting time, close it
     this.props.actions.showTilesRemovedNotice(false)
     this.imageSource = GetBackgroundImageSrc(this.props)
+    this.sponsoredRichMediaBackgroundInfo = GetSponsoredRichMediaBackground(this.props)
+
     this.trackCachedImage()
     if (GetShouldShowBrandedWallpaperNotification(this.props)) {
       this.trackBrandedWallpaperNotificationAutoDismiss()
@@ -182,8 +207,20 @@ class NewTabPage extends React.Component<Props, State> {
     if (newImageSource && oldImageSource !== newImageSource) {
       this.trackCachedImage()
     }
-    if (oldImageSource &&
-      !newImageSource) {
+
+    const oldSponsoredRichMediaBackground = GetSponsoredRichMediaBackground(prevProps)
+    const newSponsoredRichMediaBackground = GetSponsoredRichMediaBackground(this.props)
+    this.sponsoredRichMediaBackgroundInfo = newSponsoredRichMediaBackground
+    if (newSponsoredRichMediaBackground &&
+        oldSponsoredRichMediaBackground?.url !== newSponsoredRichMediaBackground?.url) {
+      if (this.state.backgroundHasLoaded) {
+        console.debug('Resetting to sponsored rich media background')
+        this.setState({ backgroundHasLoaded: false })
+      }
+    }
+
+    if ((oldImageSource && !newImageSource) ||
+        (oldSponsoredRichMediaBackground && !newSponsoredRichMediaBackground)) {
       // reset loaded state
       console.debug('reset image loaded state due to removing image source')
       this.setState({ backgroundHasLoaded: false })
@@ -615,6 +652,7 @@ class NewTabPage extends React.Component<Props, State> {
     }
 
     const hasImage = this.imageSource !== undefined
+    const hasSponsoredRichMediaBackground = !!this.sponsoredRichMediaBackgroundInfo
     const isShowingBrandedWallpaper = !!newTabData.brandedWallpaper
 
     const hasWallpaperInfo = newTabData.backgroundWallpaper?.type === 'brave'
@@ -648,14 +686,36 @@ class NewTabPage extends React.Component<Props, State> {
         imageSrc={this.imageSource}
         imageHasLoaded={this.state.backgroundHasLoaded}
         colorForBackground={colorForBackground}
+        hasSponsoredRichMediaBackground={hasSponsoredRichMediaBackground}
         data-show-news-prompt={((this.state.backgroundHasLoaded || colorForBackground) && this.state.isPromptingBraveNews && !defaultState.featureFlagBraveNewsFeedV2Enabled) ? true : undefined}>
         <OverrideReadabilityColor override={ this.shouldOverrideReadabilityColor(this.props.newTabData) } />
         <BraveNewsContextProvider>
         <EngineContextProvider>
+
+        {
+          this.sponsoredRichMediaBackgroundInfo &&
+          <SponsoredRichMediaBackground
+              sponsoredRichMediaBackgroundInfo={this.sponsoredRichMediaBackgroundInfo}
+              richMediaHasLoaded={this.state.backgroundHasLoaded}
+              onLoaded={() => {
+                this.setState({ backgroundHasLoaded: true })
+              }}
+              onEventReported={(adEventType) => {
+                triggerSponsoredRichMediaAdEvent(this.props.newTabData.brandedWallpaper, adEventType)
+
+                if (this.sponsoredRichMediaBackgroundInfo && adEventType === 'click') {
+                  window.open(this.sponsoredRichMediaBackgroundInfo.targetUrl, '_self', 'noopener,noreferrer');
+                }
+              }
+            }
+          />
+        }
+
         <Page.Page
             hasImage={hasImage}
             imageSrc={this.imageSource}
             imageHasLoaded={this.state.backgroundHasLoaded}
+            hasSponsoredRichMediaBackground={hasSponsoredRichMediaBackground}
             showClock={showClock}
             showStats={showStats}
             colorForBackground={colorForBackground}
@@ -700,9 +760,11 @@ class NewTabPage extends React.Component<Props, State> {
                 />
               </Page.GridItemTopSites>
             }
-            {newTabData.brandedWallpaper?.isSponsored && <Page.GridItemSponsoredImageClickArea otherWidgetsHidden={this.allWidgetsHidden()}>
-              <SponsoredImageClickArea onClick={this.onClickLogo}
-                sponsoredImageUrl={newTabData.brandedWallpaper.logo.destinationUrl}/>
+            {newTabData.brandedWallpaper?.isSponsored
+              && newTabData.brandedWallpaper.type !== 'richMedia'
+              && <Page.GridItemSponsoredImageClickArea otherWidgetsHidden={this.allWidgetsHidden()}>
+                <SponsoredImageClickArea onClick={this.onClickLogo}
+                  sponsoredImageUrl={newTabData.brandedWallpaper.logo.destinationUrl}/>
               </Page.GridItemSponsoredImageClickArea>}
             {
               gridSitesData.shouldShowSiteRemovedNotification
@@ -717,6 +779,7 @@ class NewTabPage extends React.Component<Props, State> {
               <Page.FooterContent>
                 {isShowingBrandedWallpaper && newTabData.brandedWallpaper &&
                   newTabData.brandedWallpaper.logo &&
+                  !hasSponsoredRichMediaBackground &&
                   <Page.GridItemBrandedLogo>
                     <BrandedWallpaperLogo
                       menuPosition={'right'}