diff --git a/packages/shared/src/components/PromotionalBanner.tsx b/packages/shared/src/components/PromotionalBanner.tsx index f5ddd2f2a7..76bb7469c5 100644 --- a/packages/shared/src/components/PromotionalBanner.tsx +++ b/packages/shared/src/components/PromotionalBanner.tsx @@ -1,5 +1,5 @@ import type { ReactElement } from 'react'; -import React from 'react'; +import React, { useCallback } from 'react'; import classNames from 'classnames'; import { Button, @@ -13,6 +13,9 @@ import { BannerCustomTheme } from '../graphql/banner'; import { Theme } from './utilities'; import { useBanner } from '../hooks/useBanner'; import CloseButton from './CloseButton'; +import { useLogContext } from '../contexts/LogContext'; +import { LogEvent, TargetType } from '../lib/log'; +import useLogEventOnce from '../hooks/log/useLogEventOnce'; const classNamesByTheme: Record = { [BannerCustomTheme.CabbageOnion]: [ @@ -36,8 +39,39 @@ const classNamesByTheme: Record = { export default function PromotionalBanner(): ReactElement { const { latestBanner: banner, dismiss } = useBanner(); + const { logEvent } = useLogContext(); + + useLogEventOnce( + () => ({ + event_name: LogEvent.Impression, + target_type: TargetType.PromotionalBanner, + target_id: banner?.timestamp, + }), + { condition: !isTesting && !!banner }, + ); + + const onCtaClick = useCallback(() => { + if (!banner) { + return; + } + logEvent({ + event_name: LogEvent.Click, + target_type: TargetType.PromotionalBanner, + target_id: banner.timestamp, + }); + }, [banner, logEvent]); + + const onDismiss = useCallback(() => { + if (banner) { + logEvent({ + event_name: LogEvent.MarketingCtaDismiss, + target_type: TargetType.PromotionalBanner, + target_id: banner.timestamp, + }); + } + dismiss(); + }, [banner, dismiss, logEvent]); - // Disable this component in Jest environment if (isTesting) { return <>; } @@ -70,6 +104,7 @@ export default function PromotionalBanner(): ReactElement { variant={ButtonVariant.Primary} color={ButtonColor.Cabbage} className="mt-2 laptop:ml-4 laptop:mt-0" + onClick={onCtaClick} > {banner.cta} @@ -80,6 +115,7 @@ export default function PromotionalBanner(): ReactElement { size={ButtonSize.XSmall} variant={ButtonVariant.Primary} className="mt-2 laptop:ml-4 laptop:mt-0" + onClick={onCtaClick} > {banner.cta} @@ -87,7 +123,7 @@ export default function PromotionalBanner(): ReactElement { ); diff --git a/packages/shared/src/lib/log.ts b/packages/shared/src/lib/log.ts index 22866f566a..eb0a91c9b6 100644 --- a/packages/shared/src/lib/log.ts +++ b/packages/shared/src/lib/log.ts @@ -432,6 +432,7 @@ export enum TargetType { StreaksMilestone = 'streaks milestone', StreakRecover = 'streak restore', PromotionCard = 'promotion_card', + PromotionalBanner = 'promotion_banner', MarketingCtaPopover = 'promotion_popover', MarketingCtaPopoverSmall = 'promotion_popover_small', MarketingCtaPlus = 'promotion_plus',