improve the marketing banner targeting

Author: medyo

package.json

@@ -10,11 +10,13 @@
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
     "@types/dompurify": "^2.3.4",
+    "@types/jspath": "^0.4.0",
     "axios": "^0.21.2",
     "axios-cache-adapter": "^2.7.3",
     "country-emoji": "^1.5.4",
     "dompurify": "^2.2.7",
     "eslint-plugin-react": "^7.28.0",
+    "jspath": "^0.4.0",
     "localforage": "^1.9.0",
     "normalize.css": "^8.0.1",
     "prop-types": "^15.0.0-0",

src/App.js

@@ -7,14 +7,11 @@ import { ScrollCardsNavigator } from './components/Layout'
 import { AppContentLayout } from './components/Layout'
 import 'react-contexify/dist/ReactContexify.css'
 import { setupAnalytics, trackPageView, setupIdentification } from 'src/lib/analytics'
-import { useRemoteConfigStore } from 'src/features/remoteConfig'
 
 function App() {
   const [showSideBar, setShowSideBar] = useState(false)
   const [showSettings, setShowSettings] = useState(false)
 
-  const { marketingBannerConfig } = useRemoteConfigStore()
-
   useEffect(() => {
     setupAnalytics()
     setupIdentification()
@@ -23,7 +20,7 @@ function App() {
 
   return (
     <>
-      <MarketingBanner {...marketingBannerConfig} />
+      <MarketingBanner />
       <div className="App">
         <Header
           setShowSideBar={setShowSideBar}

src/features/MarketingBanner/api/getMarketingConfig.ts

@@ -0,0 +1,21 @@
+import { useQuery } from '@tanstack/react-query';
+import { ExtractFnReturnType, QueryConfig } from 'src/lib/react-query';
+import { MarketingConfig } from "../types";
+import { axios } from 'src/lib/axios';
+
+const getMarketingConfig = async (): Promise<MarketingConfig> => {
+  return axios.get('/data/marketingConfig.json');
+}
+
+type QueryFnType = typeof getMarketingConfig;
+
+type UseGetMarketingConfigOptions = {
+  config?: QueryConfig<QueryFnType>;
+};
+export const useGetMarketingConfig = ({ config }: UseGetMarketingConfigOptions = {}) => {
+  return useQuery<ExtractFnReturnType<QueryFnType>>({
+    ...config,
+    queryKey: ['marketing-config'],
+    queryFn: () => getMarketingConfig(),
+  });
+}

src/features/MarketingBanner/components/MarketingBanner.tsx

@@ -1,30 +1,115 @@
 import DOMPurify from 'dompurify'
-import { useMarketingBanner } from '../stores/marketingBanner'
+import { useMarketingConfigStore } from '../stores/marketingBanner'
+import JSPath from 'jspath'
+import { useUserPreferences } from 'src/stores/preferences'
+import { getAppVersion } from 'src/utils/Os'
+import { isWebOrExtensionVersion, isProduction, getBrowserName } from 'src/utils/Environment'
+import { useMemo, useState, useEffect } from 'react'
+import { Campaign, MarketingConfig } from '../types'
+import { useGetMarketingConfig } from '../api/getMarketingConfig'
+import {
+  trackMarketingCampaignClose,
+  trackMarketingCampaignView,
+  trackMarketingCampaignOpen,
+} from 'src/lib/analytics'
+import { DiffBetweenTwoDatesInDays } from 'src/utils/DateUtils'
 
-type MarketingBannerProps = {
-  show: boolean
-  campaign_name: string
-  htmlContent: string
-}
-export const MarketingBanner = ({ campaign_name, show, htmlContent }: MarketingBannerProps) => {
-  const { setCampaignClosed, closedCampaigns } = useMarketingBanner()
+export const MarketingBanner = () => {
+  const { setCampaignClosed, closedCampaigns } = useMarketingConfigStore()
+  const { userSelectedTags, cards, firstSeenDate } = useUserPreferences()
+  const [availableCampaigns, setAvailableCampaigns] = useState<Campaign[]>([])
+  const { data: marketingConfig } = useGetMarketingConfig({
+    config: {
+      staleTime: 60000,
+      cacheTime: 3600000,
+    },
+  })
+
+  const userAtttributes = useMemo(() => {
+    return {
+      platform: isWebOrExtensionVersion(),
+      browser: getBrowserName(),
+      version: getAppVersion() || '0.0.0',
+      environment: isProduction() ? 'prod' : 'dev',
+      userTags: userSelectedTags.map((tag) => tag.label),
+      cards: cards.map((card) => card.name),
+      firstSeenDate,
+      usageInDays: DiffBetweenTwoDatesInDays(firstSeenDate, Date.now()),
+    }
+  }, [userSelectedTags, firstSeenDate, cards])
+
+  useEffect(() => {
+    if (marketingConfig) {
+      const availableCampaigns: Campaign[] = getAvailableCampaigns(marketingConfig)
+      setAvailableCampaigns(availableCampaigns)
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [marketingConfig, closedCampaigns, userSelectedTags, cards])
+
+  useEffect(() => {
+    if (availableCampaigns.length) {
+      trackMarketingCampaignView(availableCampaigns[0].id)
+    }
+  }, [availableCampaigns])
+
+  if (!marketingConfig) {
+    return null
+  }
+
+  const getAvailableCampaigns = (config: MarketingConfig) => {
+    const campaignsWithUserAttr = config.campaigns.map((camp) => {
+      return { ...camp, userAtttributes: userAtttributes }
+    })
+
+    const lastVisibleAdDate = Math.max(...closedCampaigns.map((camp) => camp.date))
+    if (lastVisibleAdDate > Date.now() - config.campaigns_interval) {
+      return []
+    }
+
+    const closedCampaignsSet = new Set(closedCampaigns.map((closedCamp) => closedCamp.id))
+    const availableCampaigns = campaignsWithUserAttr
+      .filter((camp) => camp.enabled && !closedCampaignsSet.has(camp.id))
+      .flatMap((camp) => JSPath.apply(camp.condition, camp))
+      .sort((a, b) => (a.priority || 0) - (b.priority || 0))
+      .reverse()
 
-  if (!show || closedCampaigns.includes(campaign_name)) {
+    return availableCampaigns
+  }
+
+  if (!marketingConfig.enabled) {
     return null
   }
 
-  let cleanHtmlContent = DOMPurify.sanitize(htmlContent)
+  if (!availableCampaigns.length) {
+    return null
+  }
 
-  const onBannerClick = (e: React.MouseEvent<HTMLElement>) => {
+  const onBannerClick = (e: React.MouseEvent<HTMLElement>, campaign: Campaign) => {
     if (e.target instanceof Element) {
       const closeButton = e.target.closest('.close')
+      const ctaButton = e.target.closest('.cta')
       if (closeButton && e.currentTarget.contains(closeButton)) {
-        setCampaignClosed(campaign_name)
+        setCampaignClosed(campaign.id)
+        trackMarketingCampaignClose(campaign.id)
+      } else if (ctaButton && e.currentTarget.contains(ctaButton)) {
+        trackMarketingCampaignOpen(campaign.id)
       }
     }
   }
 
+  const currentCampaign = availableCampaigns[0]
+
   return (
-    <div onClick={(e) => onBannerClick(e)} dangerouslySetInnerHTML={{ __html: cleanHtmlContent }} />
+    <div
+      id={currentCampaign.id}
+      onClick={(e) => onBannerClick(e, currentCampaign)}
+      dangerouslySetInnerHTML={{
+        __html: DOMPurify.sanitize(currentCampaign.htmlContent, {
+          ADD_ATTR: ['target'],
+          USE_PROFILES: { html: true },
+        }),
+      }}
+    />
   )
 }

src/features/MarketingBanner/index.ts

@@ -1 +1,2 @@
-export * from "./components"
+export * from "./components"
+export * from "./types"

src/features/MarketingBanner/stores/marketingBanner.ts

@@ -1,16 +1,24 @@
 import create from 'zustand';
 import { persist } from 'zustand/middleware'
 
+type ClosedCampaign = {
+  id: string;
+  date: number;
+}
+
 type MarketingBannerStore = {
-  closedCampaigns: string[];
-  setCampaignClosed: (compaignName: string) => void;
+  closedCampaigns: ClosedCampaign[];
+  setCampaignClosed: (compaignId: string) => void;
 };
 
-export const useMarketingBanner = create(persist<MarketingBannerStore>((set) => ({
+export const useMarketingConfigStore = create(persist<MarketingBannerStore>((set) => ({
   closedCampaigns: [],
-  setCampaignClosed: (compaignName: string) =>
+  setCampaignClosed: (compaignId: string) =>
     set((state) => ({
-      closedCampaigns: [...state.closedCampaigns, compaignName]
+      closedCampaigns: [...state.closedCampaigns, {
+        id: compaignId,
+        date: Date.now()
+      }]
     })),
 }), {
   name: 'ht_marketing_storage',

src/features/MarketingBanner/types/index.ts

@@ -0,0 +1,19 @@
+export type MarketingConfig = {
+  enabled: boolean;
+  campaigns_interval: number;
+  campaigns: Campaign[]
+}
+
+export type Campaign = {
+  id: string;
+  name: string;
+  htmlContent: string;
+  condition: string;
+  enabled: boolean;
+  userAtttributes?: UserAttribute;
+  priority?: number
+}
+
+type UserAttribute = {
+  [key: string]: string | string[];
+}

src/lib/analytics.ts

@@ -17,6 +17,7 @@ enum Objects {
   SEARCH_ENGINE = 'Search Engine',
   LISTING_MODE = 'Listing Mode',
   CHANGE_LOG = 'Change Log',
+  MARKETING_CAMPAIGN = 'Marketing Campaign',
 }
 
 enum Verbs {
@@ -26,6 +27,7 @@ enum Verbs {
   SELECT = 'Select',
   ADD = 'Add',
   OPEN = 'Open',
+  CLOSE = 'Close',
   TARGET = 'Target',
   BOOKMARK = 'Bookmark',
   UNBOOKMARK = 'Unbookmark',
@@ -49,7 +51,8 @@ export enum Attributes {
   TRIGERED_FROM = 'Trigered From',
   TITLE = 'Title',
   LINK = 'Link',
-  SOURCE_TAGS = 'Source Tags'
+  SOURCE_TAGS = 'Source Tags',
+  CAMPAIGN_ID = 'Campaign Id'
 }
 
 const _SEP_ = ' '
@@ -217,6 +220,29 @@ export const trackChangeLogOpen = () => {
   })
 }
 
+export const trackMarketingCampaignOpen = (campaignId: string) => {
+  trackEvent({
+    object: Objects.MARKETING_CAMPAIGN,
+    verb: Verbs.OPEN,
+    attributes: { [Attributes.CAMPAIGN_ID]: campaignId }
+  })
+}
+
+export const trackMarketingCampaignClose = (campaignId: string) => {
+  trackEvent({
+    object: Objects.MARKETING_CAMPAIGN,
+    verb: Verbs.CLOSE,
+    attributes: { [Attributes.CAMPAIGN_ID]: campaignId }
+  })
+}
+
+export const trackMarketingCampaignView = (campaignId: string) => {
+  trackEvent({
+    object: Objects.MARKETING_CAMPAIGN,
+    verb: Verbs.VIEW,
+    attributes: { [Attributes.CAMPAIGN_ID]: campaignId }
+  })
+}
 // Identification
 
 export const identifyUserLanguages = (languages: string[]) => {

src/stores/preferences.ts

@@ -12,6 +12,7 @@ export type UserPreferencesState = {
   searchEngine: string
   cards: SelectedCard[]
   cardsSettings: Record<string, CardSettingsType>
+  firstSeenDate: number;
 }
 
 type UserPreferencesStoreActions = {
@@ -34,6 +35,7 @@ export const useUserPreferences = create(
       searchEngine: 'google',
       listingMode: 'normal',
       openLinksNewTab: true,
+      firstSeenDate: Date.now(),
       cards: [
         { id: 0, name: 'github' },
         { id: 1, name: 'hackernews' },

src/utils/DateUtils.ts

@@ -0,0 +1,3 @@
+export const DiffBetweenTwoDatesInDays = (oldestDate: number, newestDate: number) => {
+  return Math.floor((newestDate - oldestDate) / (1000 * 60 * 60 * 24));
+}