@ohos-ports/s-ui-segment-wrapper 0.0.0-stage → 5.4.0-beta.0

package/src/middlewares/source/optimizelyUserId.js

@@ -0,0 +1,20 @@
+export const optimizelyUserId = ({payload, next}) => {
+  const {
+    obj: {integrations}
+  } = payload
+
+  // when integrations.All equals false, destinations are deactivated
+  if (integrations.All === false) {
+    return next(payload)
+  }
+
+  payload.obj.integrations = {
+    ...integrations,
+    Optimizely: {
+      userId: window.analytics.user().anonymousId(),
+      ...integrations.Optimizely
+    }
+  }
+
+  next(payload)
+}

package/src/middlewares/source/pageData.js

@@ -0,0 +1,45 @@
+export const createPageDataMiddleware = () => {
+  let last = null
+
+  return ({payload, next}) => {
+    try {
+      const {obj} = payload
+      const {event, type} = obj
+
+      if (type !== 'track') {
+        next(payload)
+        return
+      }
+
+      if (typeof event === 'string' && event.endsWith('Viewed')) {
+        const {page_name: name, page_type: type} = obj.properties || {}
+        last = {name, type}
+
+        next(payload)
+        return
+      }
+
+      if (!last) {
+        next(payload)
+        return
+      }
+
+      next({
+        ...payload,
+        obj: {
+          ...obj,
+          properties: {
+            ...obj.properties,
+            page_name_origin: last.name,
+            page_type: obj.properties?.page_type || last.type
+          }
+        }
+      })
+    } catch (error) {
+      console.error(error) // eslint-disable-line
+      next(payload)
+    }
+  }
+}
+
+export const pageData = createPageDataMiddleware()

package/src/middlewares/source/pageReferrer.js

@@ -0,0 +1,125 @@
+import {isGA4DestinationEnabled} from '../../utils/ga4Detection.js'
+
+/**
+ * Capture document.referrer at module load time, before Safari ITP can clear it.
+ * This ensures the first page event has the real referrer from the external source.
+ */
+export const INITIAL_DOCUMENT_REFERRER = typeof document !== 'undefined' ? document.referrer : ''
+
+/**
+ * Capture window.location.search at module load time, before Safari ITP can
+ * strip tracking parameters via redirects.
+ */
+export const INITIAL_SEARCH_STRING = typeof window !== 'undefined' ? window.location.search : ''
+
+/**
+ * Capture initial URL at module load time
+ */
+const INITIAL_URL = typeof window !== 'undefined' ? window.location.href : ''
+
+export const referrerState = {
+  spaReferrer: '',
+  referrer: INITIAL_DOCUMENT_REFERRER,
+  isFirstPageViewSent: false
+}
+
+/**
+ * Useful wrapper around document and window objects
+ */
+export const utils = {
+  /**
+   * @returns {string} The referrer of the document
+   */
+  getDocumentReferrer: () => document.referrer,
+  /**
+   * @returns {string} The actual location with protocol, domain and pathname
+   */
+  getActualLocation: () => {
+    const {origin, pathname} = window.location
+    return `${origin}${pathname}`
+  },
+  /**
+   * @returns {string} The actual query string captured at module load (protected from Safari ITP)
+   */
+  getActualQueryString: () => {
+    // In tests using window.history.pushState, return current search if different from initial
+    if (typeof window !== 'undefined' && window.location.search && window.location.search !== INITIAL_SEARCH_STRING) {
+      return window.location.search
+    }
+    return INITIAL_SEARCH_STRING
+  }
+}
+
+/**
+ * Get the correct page referrer for SPA navigations
+ * @returns {string}  referrer
+ */
+export const getPageReferrer = ({isPageTrack = false} = {}) => {
+  const {referrer, spaReferrer} = referrerState
+
+  if (isPageTrack) {
+    // For page events, use referrer (initially from INITIAL_DOCUMENT_REFERRER, then from previous page location)
+    return referrer
+  } else {
+    // For track events, use spaReferrer if available, otherwise fall back to referrer
+    // This handles the case where a track happens before the first page event
+    return spaReferrer || referrer
+  }
+}
+
+/**
+ * Update page referrer for SPA navigations
+ */
+export const updatePageReferrer = () => {
+  referrerState.spaReferrer = getPageReferrer({isPageTrack: true})
+  // mutate actualReferrer with what will be the new referrer
+  referrerState.referrer = utils.getActualLocation()
+}
+
+/**
+ * @param {object} params
+ * @param {{obj: {context: object }}} params.payload
+ * @param {function} params.next
+ * @returns {void}
+ */
+export const pageReferrer = ({payload, next}) => {
+  const {
+    obj: {context}
+  } = payload
+
+  const {isPageTrack} = context
+
+  const referrer = getPageReferrer({isPageTrack})
+
+  let props = {}
+
+  if (isPageTrack && !referrerState.isFirstPageViewSent) {
+    referrerState.isFirstPageViewSent = true
+    props = {
+      url: INITIAL_URL,
+      search: INITIAL_SEARCH_STRING
+    }
+  }
+
+  payload.obj.context = {
+    ...context,
+    page: {
+      ...context.page,
+      ...props,
+      referrer
+    }
+  }
+
+  // In NEW mode (client-side destination), also add referrer to properties
+  // GA4 Web destination uses properties.page_referrer for attribution
+  if (referrer && isGA4DestinationEnabled()) {
+    payload.obj.properties = {
+      ...payload.obj.properties,
+      page_referrer: referrer
+    }
+  }
+
+  // update page referrer only if it's a page event
+  isPageTrack && updatePageReferrer()
+  next(payload)
+}

package/src/middlewares/source/userScreenInfo.js

@@ -0,0 +1,11 @@
+export const userScreenInfo = ({payload, next}) => {
+  payload.obj.context = {
+    ...payload.obj.context,
+    screen: {
+      height: window.innerHeight,
+      width: window.innerWidth,
+      density: window.devicePixelRatio
+    }
+  }
+  next(payload)
+}

package/src/middlewares/source/userTraits.js

@@ -0,0 +1,41 @@
+import {getConfig} from '../../config.js'
+import {checkAnalyticsGdprIsAccepted, getGdprPrivacyValue} from '../../tcf.js'
+
+/**
+ * Get user traits from global analytics object and put in the object
+ * @param {string} gdprPrivacyValue Determine if we have user consents
+ * @returns {object} User traits with to add
+ */
+const getUserTraits = gdprPrivacyValue => {
+  const isUserTraitsEnabled = getConfig('isUserTraitsEnabled')
+  const user = window.analytics.user()
+  const isGdprAccepted = checkAnalyticsGdprIsAccepted(gdprPrivacyValue)
+  const userId = user.id()
+
+  return {
+    anonymousId: user.anonymousId(),
+    ...(userId && {userId}),
+    ...(isGdprAccepted && isUserTraitsEnabled && user.traits())
+  }
+}
+
+export const userTraits = async ({payload, next}) => {
+  const gdprPrivacyValue = await getGdprPrivacyValue()
+
+  let userTraits
+  try {
+    userTraits = getUserTraits(gdprPrivacyValue)
+  } catch (error) {
+    console.error(error) // eslint-disable-line
+  }
+
+  payload.obj.context = {
+    ...payload.obj.context,
+    traits: {
+      ...payload.obj.context.traits,
+      ...userTraits
+    }
+  }
+
+  next(payload)
+}

package/src/repositories/googleRepository.js

@@ -0,0 +1,251 @@
+import {dispatchEvent} from '@s-ui/js/lib/events'
+
+import {getConfig} from '../config.js'
+import {EVENTS} from '../events.js'
+import {utils} from '../middlewares/source/pageReferrer.js'
+import {isGA4DestinationEnabled} from '../utils/ga4Detection.js'
+
+const FIELDS = {
+  clientId: 'client_id',
+  sessionId: 'session_id'
+}
+
+export const DEFAULT_DATA_LAYER_NAME = 'dataLayer'
+
+export const CONSENT_STATES = {
+  granted: 'granted',
+  denied: 'denied'
+}
+
+const CONSENT_STATE_GRANTED_VALUE = 1
+const CONSENT_STATE_DENIED_VALUE = 2
+
+const STC = {
+  QUERY: 'stc',
+  SPLIT_SYMBOL: '-',
+  CAMPAIGN_SPLIT_SYMBOL: ':'
+}
+
+const UTM_CAMPAIGN = 'utm_campaign'
+const UTM_MEDIUM = 'utm_medium'
+const UTM_SOURCE = 'utm_source'
+const UTM_CONTENT = 'utm_content'
+const UTM_CAMPAIGN_ID = 'utm_id'
+const UTM_TERM = 'utm_term'
+
+const STC_MEDIUM_TRANSFORMATIONS = {
+  aff: 'affiliate',
+  dis: 'display',
+  em: 'email',
+  met: 'paid-metasearch',
+  sem: 'paid-search',
+  rt: 'retargeting',
+  sm: 'social-media',
+  sp: 'paid-social',
+  pn: 'push-notification',
+  cs: 'cross-sites'
+}
+const STC_INVALID_CONTENT = 'na'
+const DEFAULT_GA_INIT_EVENT = 'sui'
+
+const EMPTY_STC = {medium: null, source: null, campaign: null}
+
+const loadScript = async src =>
+  new Promise(function (resolve, reject) {
+    const script = document.createElement('script')
+
+    script.src = src
+    script.onload = resolve
+    script.onerror = reject
+    document.head.appendChild(script)
+  })
+
+export const loadGoogleAnalytics = async () => {
+  const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
+  const dataLayerName = getConfig('googleAnalyticsDataLayer') || DEFAULT_DATA_LAYER_NAME
+
+  // Check we have the needed config to load the script
+  if (!googleAnalyticsMeasurementId) return Promise.resolve(false)
+  // Create the `gtag` script
+  const gtagScript = `https://www.googletagmanager.com/gtag/js?id=${googleAnalyticsMeasurementId}&l=${dataLayerName}`
+  // Load it and retrieve the `clientId` from Google
+  return loadScript(gtagScript)
+}
+
+// Trigger GA init event just once per session.
+// Only in LEGACY mode (manual GA4 initialization)
+const triggerGoogleAnalyticsInitEvent = sessionId => {
+  // Don't trigger if using Segment destination (new mode)
+  if (isGA4DestinationEnabled()) return
+
+  const eventName = getConfig('googleAnalyticsInitEvent') ?? DEFAULT_GA_INIT_EVENT
+  const eventPrefix = `ga_event_${eventName}_`
+  const eventKey = `${eventPrefix}${sessionId}`
+
+  if (typeof window.gtag === 'undefined') return
+
+  // Check if the event has already been sent in this session.
+  if (!localStorage.getItem(eventKey)) {
+    // If not, send it.
+    window.gtag('event', eventName)
+
+    // eslint-disable-next-line no-console
+    console.log(`Sending GA4 event "${eventName}" for the session "${sessionId}"`)
+
+    // And then save a new GA session hit in local storage.
+    localStorage.setItem(eventKey, 'true')
+    dispatchEvent({eventName: EVENTS.GA4_INIT_EVENT_SENT, detail: {eventName, sessionId}})
+  }
+
+  // Clean old GA sessions hits from the storage.
+  Object.keys(localStorage).forEach(key => {
+    if (key.startsWith(eventPrefix) && key !== eventKey) {
+      localStorage.removeItem(key)
+    }
+  })
+}
+
+const getGoogleField = async field => {
+  const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
+
+  // If `googleAnalyticsMeasurementId` is not present, don't load anything.
+  if (!googleAnalyticsMeasurementId) return Promise.resolve()
+
+  return new Promise(resolve => {
+    // If it is, get it from `gtag`.
+    window.gtag?.('get', googleAnalyticsMeasurementId, field, resolve)
+  })
+}
+
+export const trackingTagsTypes = {
+  STC: 'stc',
+  UTM: 'utm'
+}
+
+export const getCampaignDetails = ({needsTransformation = true} = {}) => {
+  const {medium, source, campaign, content, term} = readQueryParams()
+
+  if (!medium || !source || !campaign) return null
+
+  const [id, name] = campaign.split(STC.CAMPAIGN_SPLIT_SYMBOL)
+
+  if (!id && !name) return null
+
+  const needsContent = typeof content !== 'undefined' && content !== STC_INVALID_CONTENT
+
+  return {
+    campaign: {
+      medium: (needsTransformation && STC_MEDIUM_TRANSFORMATIONS[medium]) || medium,
+      ...(typeof name !== 'undefined' && {id}),
+      name: name ?? id,
+      source,
+      ...(needsContent && {content}),
+      ...(typeof term !== 'undefined' && {term})
+    }
+  }
+}
+
+function readQueryParams() {
+  const search = utils.getActualQueryString()
+  const searchParams = new URLSearchParams(search)
+
+  return getConfig('trackingTagsType') === trackingTagsTypes.UTM ? readFromUtm(searchParams) : readFromStc(searchParams)
+}
+
+function readFromStc(searchParams) {
+  if (!hasStc(searchParams)) return EMPTY_STC
+
+  const stc = searchParams.get(STC.QUERY)
+  const [medium, source, campaign, content, term] = stc.split(STC.SPLIT_SYMBOL)
+  return {medium, source, campaign, content, term}
+}
+
+function hasStc(searchParams) {
+  return searchParams.has(STC.QUERY)
+}
+
+function readFromUtm(searchParams) {
+  const campaignId = searchParams.get(UTM_CAMPAIGN_ID)
+  const campaignName = searchParams.get(UTM_CAMPAIGN)
+  const medium = searchParams.get(UTM_MEDIUM)
+  const source = searchParams.get(UTM_SOURCE)
+  const content = searchParams.get(UTM_CONTENT)
+  const term = searchParams.get(UTM_TERM)
+  const campaign = campaignId ? `${campaignId}${STC.CAMPAIGN_SPLIT_SYMBOL}${campaignName}` : campaignName
+
+  // Fallback to STC if any mandatory UTM fields are missing
+  const missingAnyMandatoryFields = !medium || !source || !campaign
+  if (missingAnyMandatoryFields && hasStc(searchParams)) {
+    return readFromStc(searchParams)
+  }
+
+  return {
+    campaign,
+    medium,
+    source,
+    content,
+    term
+  }
+}
+
+export const getGoogleClientId = async () => getGoogleField(FIELDS.clientId)
+export const getGoogleSessionId = async () => {
+  const sessionId = await getGoogleField(FIELDS.sessionId)
+
+  triggerGoogleAnalyticsInitEvent(sessionId)
+
+  return sessionId
+}
+
+// Unified consent state getter.
+// Returns GRANTED, DENIED or undefined (default / unknown / unavailable).
+export function getGoogleConsentValue(consentType = 'analytics_storage') {
+  try {
+    const value = window.google_tag_data?.ics?.getConsentState?.(consentType)
+
+    if (value === CONSENT_STATE_GRANTED_VALUE) return CONSENT_STATES.granted
+    if (value === CONSENT_STATE_DENIED_VALUE) return CONSENT_STATES.denied
+
+    return undefined
+  } catch (error) {
+    // GTM bug when first rejection happens: keep default undefined instead of forcing DENIED
+    return undefined
+  }
+}
+
+// Backwards compatibility alias (previous getConsentState behavior now unified but default is undefined)
+export const getConsentState = () => getGoogleConsentValue() ?? CONSENT_STATES.denied
+
+export const setGoogleUserId = userId => {
+  const googleAnalyticsMeasurementId = getConfig('googleAnalyticsMeasurementId')
+
+  if (!googleAnalyticsMeasurementId || !userId) return
+
+  window.gtag?.('set', 'user_id', userId)
+}
+
+/**
+ * Send consents to Google Consent Mode.
+ *
+ * @param {'default' | 'update'} mode Mode for the consent update
+ * @param {object} consents Consents object to be sent to Google Consent Mode.
+ * Defaults used when not provided:
+ * {
+ *   analytics_storage: 'denied',
+ *   ad_user_data: 'denied',
+ *   ad_personalization: 'denied',
+ *   ad_storage: 'denied'
+ * }
+ */
+export const sendGoogleConsents = (mode = 'default', consents) => {
+  window.gtag?.(
+    'consent',
+    mode,
+    consents || {
+      analytics_storage: CONSENT_STATES.denied,
+      ad_user_data: CONSENT_STATES.denied,
+      ad_personalization: CONSENT_STATES.denied,
+      ad_storage: CONSENT_STATES.denied
+    }
+  )
+}

package/src/repositories/xandrRepository.js

@@ -0,0 +1,48 @@
+import {readCookie, removeCookie, saveCookie} from '../utils/cookies.js'
+import {isClient, setConfig} from '../config.js'
+import {USER_GDPR} from '../tcf.js'
+
+const XANDR_ID_SERVER_URL = 'https://secure.adnxs.com/getuidj?consent=1'
+const XANDR_ID_COOKIE = 'adit-xandr-id'
+
+const USER_OPTED_OUT_XANDR_ID_VALUE = 0
+
+/**
+ * [Xandr API Docs]{@link https://docs.xandr.com/bundle/invest_invest-standard/page/topics/user-id-mapping-with-getuid-and-mapuid.html}
+ * @returns {String|null} a valid xandrId value
+ */
+export function getXandrId({gdprPrivacyValueAdvertising}) {
+  if (!isClient) return null
+
+  if (gdprPrivacyValueAdvertising !== USER_GDPR.ACCEPTED) {
+    removeCookie(XANDR_ID_COOKIE)
+    return null
+  }
+
+  // 0 is invalid. Negative numbers seems to be invalid too.
+  const checkValid = xandrId => xandrId && Number(xandrId) > USER_OPTED_OUT_XANDR_ID_VALUE
+
+  const storedXandrId = readCookie(XANDR_ID_COOKIE)
+  const isValidXandrId = checkValid(storedXandrId)
+
+  if (!isValidXandrId) {
+    getRemoteXandrId().then(xandrId => {
+      if (typeof xandrId === 'string') {
+        saveCookie(XANDR_ID_COOKIE, xandrId)
+      }
+    })
+  }
+  setConfig('xandrId', storedXandrId)
+  return isValidXandrId ? storedXandrId : null
+}
+
+function getRemoteXandrId() {
+  if (!isClient) return Promise.resolve(null)
+
+  return window
+    .fetch(XANDR_ID_SERVER_URL, {
+      credentials: 'include'
+    })
+    .then(response => response.json())
+    .then(json => json?.uid)
+}