Brave News: each promoted item rendered in the feed should generate a…

… unique ID for the purposes of ad service view and visit reporting

components/brave_new_tab_ui/actions/today_actions.ts

@@ -35,13 +35,18 @@ export const errorGettingDataFromBackground = createAction<BackgroundErrorPayloa
 export type ReadFeedItemPayload = {
   item: BraveToday.FeedItem,
   isPromoted?: boolean,
+  promotedUUID?: string,
   openInNewTab?: boolean
 }
 export const readFeedItem = createAction<ReadFeedItemPayload>('readFeedItem')
 
 export const feedItemViewedCountChanged = createAction<number>('feedItemViewedCountChanged')
 
-export const promotedItemViewed = createAction<BraveToday.PromotedArticle>('promotedItemViewed')
+export type PromotedItemViewedPayload = {
+  item: BraveToday.PromotedArticle
+  uuid: string
+}
+export const promotedItemViewed = createAction<PromotedItemViewedPayload>('promotedItemViewed')
 
 export type VisitDisplayAdPayload = {
   ad: BraveToday.DisplayAd

components/brave_new_tab_ui/async/today.ts

@@ -67,7 +67,7 @@ handler.on<Actions.ReadFeedItemPayload>(Actions.readFeedItem.getType(), async (s
   ]
   if (payload.isPromoted) {
     backendArgs.push(
-      payload.item.url_hash,
+      payload.promotedUUID,
       (payload.item as BraveToday.PromotedArticle).creative_instance_id,
       payload.isPromoted
     )
@@ -90,10 +90,10 @@ handler.on<Actions.ReadFeedItemPayload>(Actions.readFeedItem.getType(), async (s
   }
 })
 
-handler.on<BraveToday.PromotedArticle>(Actions.promotedItemViewed.getType(), async (store, item) => {
+handler.on<Actions.PromotedItemViewedPayload>(Actions.promotedItemViewed.getType(), async (store, payload) => {
   chrome.send('todayOnPromotedCardView', [
-    item.creative_instance_id,
-    item.url_hash
+    payload.item.creative_instance_id,
+    payload.uuid
   ])
 })
 

components/brave_new_tab_ui/components/default/braveToday/cards/_articles/cardArticleLarge.tsx

@@ -9,29 +9,28 @@ import { getLocale } from '../../../../../../common/locale'
 import * as Card from '../../cardSizes'
 import useScrollIntoView from '../../useScrollIntoView'
 import useReadArticleClickHandler from '../../useReadArticleClickHandler'
-import { OnReadFeedItem, OnSetPublisherPref } from '../../'
+import { OnPromotedItemViewed, OnReadFeedItem, OnSetPublisherPref } from '../../'
 import CardImage from '../CardImage'
 import PublisherMeta from '../PublisherMeta'
 // TODO(petemill): Large and Medium article should be combined to 1 component.
 
-interface Props {
-  content: (BraveToday.Article | BraveToday.PromotedArticle | undefined)[]
-  publishers: BraveToday.Publishers
-  articleToScrollTo?: BraveToday.FeedItem
+type Props = {
   onReadFeedItem: OnReadFeedItem
   onSetPublisherPref: OnSetPublisherPref
-  onItemViewed?: (item: BraveToday.FeedItem) => any
+  onItemViewed?: OnPromotedItemViewed
   isPromoted?: boolean
 }
 
-type ArticleProps = {
+type ArticlesProps = Props & {
+  content: (BraveToday.Article | BraveToday.PromotedArticle | undefined)[]
+  publishers: BraveToday.Publishers
+  articleToScrollTo?: BraveToday.FeedItem
+}
+
+type ArticleProps = Props & {
   item: BraveToday.Article | BraveToday.PromotedArticle
   publisher?: BraveToday.Publisher
   shouldScrollIntoView?: boolean
-  onReadFeedItem: OnReadFeedItem
-  onSetPublisherPref: OnSetPublisherPref
-  onItemViewed?: (item: BraveToday.FeedItem) => any
-  isPromoted?: boolean
 }
 
 const promotedInfoUrl = 'https://brave.com/brave-today'
@@ -50,12 +49,23 @@ const LargeArticle = React.forwardRef<HTMLElement, ArticleProps>(function (props
   const { publisher, item } = props
   const [cardRef] = useScrollIntoView(props.shouldScrollIntoView || false)
 
-  const onClick = useReadArticleClickHandler(props.onReadFeedItem, { item, isPromoted: props.isPromoted })
-
   const innerRef = React.useRef<HTMLElement>(null)
 
-  const onItemViewedRef = React.useRef(props.onItemViewed)
+  const uuid = React.useMemo<string | undefined>(function () {
+    if (props.isPromoted) {
+      // @ts-ignore
+      const uuid: string = crypto.randomUUID()
+      return uuid
+    }
+    return undefined
+  }, [props.isPromoted, props.item.url])
+
+  const onClick = useReadArticleClickHandler(props.onReadFeedItem, { item, isPromoted: props.isPromoted, promotedUUID: uuid })
+
+  const onItemViewedRef = React.useRef<Function | null>()
   onItemViewedRef.current = props.onItemViewed
+    ? props.onItemViewed.bind(undefined, { item: props.item, uuid })
+    : null
 
   React.useEffect(() => {
     if (!innerRef.current) {
@@ -79,7 +89,7 @@ const LargeArticle = React.forwardRef<HTMLElement, ArticleProps>(function (props
     const observer = new VisibilityTimer(() => {
       const onItemViewed = onItemViewedRef.current
       if (onItemViewed) {
-        onItemViewed(item)
+        onItemViewed()
       }
     }, 100, innerRef.current)
 
@@ -136,7 +146,7 @@ const LargeArticle = React.forwardRef<HTMLElement, ArticleProps>(function (props
   )
 })
 
-const CardSingleArticleLarge = React.forwardRef<HTMLElement, Props>(function (props, ref) {
+const CardSingleArticleLarge = React.forwardRef<HTMLElement, ArticlesProps>(function (props, ref) {
   // no full content no render®
   if (props.content.length === 0) {
     return null

components/brave_new_tab_ui/components/default/braveToday/index.tsx

@@ -7,12 +7,12 @@ import * as React from 'react'
 import * as BraveTodayElement from './default'
 import CardOptIn from './cards/cardOptIn'
 import CardLoading from './cards/cardLoading'
-import { ReadFeedItemPayload, DisplayAdViewedPayload, VisitDisplayAdPayload } from '../../../actions/today_actions'
+import { PromotedItemViewedPayload, ReadFeedItemPayload, DisplayAdViewedPayload, VisitDisplayAdPayload } from '../../../actions/today_actions'
 const Content = React.lazy(() => import('./content'))
 
 export type OnReadFeedItem = (args: ReadFeedItemPayload) => any
 export type OnSetPublisherPref = (publisherId: string, enabled: boolean) => any
-export type OnPromotedItemViewed = (item: BraveToday.FeedItem) => any
+export type OnPromotedItemViewed = (args: PromotedItemViewedPayload) => any
 export type OnVisitDisplayAd = (args: VisitDisplayAdPayload) => any
 export type OnViewedDisplayAd = (args: DisplayAdViewedPayload) => any
 export type GetDisplayAdContent = () => Promise<BraveToday.DisplayAd | null>