STRATCONN-5986 - [Facebook Pixel] - major refactor to fix advanced matching (#3514)

* major refactor to fix advanced matching

* tidying up

* fixing country and state dropdowns

* testing and refactoring

* saving progress

* Claude happy

* adding PageView

* more work

* more changes

* more change

* reorder presets

* ready to deploy for testing

* fiddling around with field mappings

Author: joe-ayoub-segment

…onversions-api-web/src/send/constants.ts …ook-conversions-api-web/src/constants.tspackages/browser-destinations/destinations/facebook-conversions-api-web/src/send/constants.ts renamed to packages/browser-destinations/destinations/facebook-conversions-api-web/src/constants.ts packages/browser-destinations/destinations/facebook-conversions-api-web/src/send/constants.ts renamed to packages/browser-destinations/destinations/facebook-conversions-api-web/src/constants.ts

@@ -1,3 +1,9 @@
+export const MAX_INIT_COUNT = 2
+
+export const INIT_COUNT_KEY = 'fb_pixel_init_count'
+
+export const USER_DATA_KEY = 'fb_user_data'
+
 export const CURRENCY_ISO_CODES = new Set([
   'AED',
   'AFN',
@@ -280,11 +286,11 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['chile', 'cl'],
   ['china', 'cn'],
   ['christmasisland', 'cx'],
-  ['cocos(keeling)islands', 'cc'],
+  ['cocosislands', 'cc'],
   ['colombia', 'co'],
   ['comoros', 'km'],
   ['congo', 'cg'],
-  ['congo,democraticrepublic', 'cd'],
+  ['congodemocraticrepublic', 'cd'],
   ['cookislands', 'ck'],
   ['costarica', 'cr'],
   ["coted'ivoire", 'ci'],
@@ -303,7 +309,7 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['eritrea', 'er'],
   ['estonia', 'ee'],
   ['ethiopia', 'et'],
-  ['falklandislands(malvinas)', 'fk'],
+  ['falklandislands', 'fk'],
   ['faroeislands', 'fo'],
   ['fiji', 'fj'],
   ['finland', 'fi'],
@@ -325,18 +331,16 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['guatemala', 'gt'],
   ['guernsey', 'gg'],
   ['guinea', 'gn'],
-  ['guinea-bissau', 'gw'],
+  ['guineabissau', 'gw'],
   ['guyana', 'gy'],
   ['haiti', 'ht'],
-  ['heardisland&mcdonaldislands', 'hm'],
-  ['holysee(vaticancitystate)', 'va'],
   ['honduras', 'hn'],
   ['hongkong', 'hk'],
   ['hungary', 'hu'],
   ['iceland', 'is'],
   ['india', 'in'],
   ['indonesia', 'id'],
-  ['iran,islamicrepublicof', 'ir'],
+  ['iran', 'ir'],
   ['iraq', 'iq'],
   ['ireland', 'ie'],
   ['isleofman', 'im'],
@@ -352,12 +356,12 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['korea', 'kr'],
   ['kuwait', 'kw'],
   ['kyrgyzstan', 'kg'],
-  ["laopeople'sdemocraticrepublic", 'la'],
+  ['laos', 'la'],
   ['latvia', 'lv'],
   ['lebanon', 'lb'],
   ['lesotho', 'ls'],
   ['liberia', 'lr'],
-  ['libyanarabjamahiriya', 'ly'],
+  ['libya', 'ly'],
   ['liechtenstein', 'li'],
   ['lithuania', 'lt'],
   ['luxembourg', 'lu'],
@@ -375,7 +379,7 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['mauritius', 'mu'],
   ['mayotte', 'yt'],
   ['mexico', 'mx'],
-  ['micronesia,federatedstatesof', 'fm'],
+  ['micronesia', 'fm'],
   ['moldova', 'md'],
   ['monaco', 'mc'],
   ['mongolia', 'mn'],
@@ -401,7 +405,7 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['oman', 'om'],
   ['pakistan', 'pk'],
   ['palau', 'pw'],
-  ['palestinianterritory,occupied', 'ps'],
+  ['palestine', 'ps'],
   ['panama', 'pa'],
   ['papuanewguinea', 'pg'],
   ['paraguay', 'py'],
@@ -414,6 +418,7 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['qatar', 'qa'],
   ['reunion', 're'],
   ['romania', 'ro'],
+  ['russia', 'ru'],
   ['russianfederation', 'ru'],
   ['rwanda', 'rw'],
   ['saintbarthelemy', 'bl'],
@@ -437,7 +442,7 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['solomonislands', 'sb'],
   ['somalia', 'so'],
   ['southafrica', 'za'],
-  ['southgeorgiaandsandwichisl.', 'gs'],
+  ['southgeorgiaandsandwichislands', 'gs'],
   ['spain', 'es'],
   ['srilanka', 'lk'],
   ['sudan', 'sd'],
@@ -446,12 +451,12 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['swaziland', 'sz'],
   ['sweden', 'se'],
   ['switzerland', 'ch'],
-  ['syrianarabrepublic', 'sy'],
+  ['syria', 'sy'],
   ['taiwan', 'tw'],
   ['tajikistan', 'tj'],
   ['tanzania', 'tz'],
   ['thailand', 'th'],
-  ['timor-leste', 'tl'],
+  ['timorleste', 'tl'],
   ['togo', 'tg'],
   ['tokelau', 'tk'],
   ['tonga', 'to'],
@@ -465,15 +470,17 @@ export const COUNTRY_CODES = new Map<string, string>([
   ['ukraine', 'ua'],
   ['unitedarabemirates', 'ae'],
   ['unitedkingdom', 'gb'],
+  ['greatbritain', 'gb'],
   ['unitedstates', 'us'],
+  ['unitedstatesofamerica', 'us'],
   ['unitedstatesoutlyingislands', 'um'],
   ['uruguay', 'uy'],
   ['uzbekistan', 'uz'],
   ['vanuatu', 'vu'],
   ['venezuela', 've'],
   ['vietnam', 'vn'],
-  ['virginislands,british', 'vg'],
-  ['virginislands,u.s.', 'vi'],
+  ['virginislandsbritish', 'vg'],
+  ['virginislandsus', 'vi'],
   ['wallisandfutuna', 'wf'],
   ['westernsahara', 'eh'],
   ['yemen', 'ye'],

packages/browser-destinations/destinations/facebook-conversions-api-web/src/functions.ts

@@ -0,0 +1,141 @@
+import { WindowWithOptionalFbq, InitOptions, LDU, UserData, FBClient} from './types'
+import type { Settings } from './generated-types'
+import { USER_DATA_KEY, INIT_COUNT_KEY} from './constants'
+import { UniversalStorage, Analytics } from '@segment/analytics-next'
+
+export function initScript(settings: Settings, analytics: Analytics) {
+  const { 
+    pixelId, 
+    disablePushState, 
+    disableAutoConfig, 
+    disableFirstPartyCookies,
+    agent,
+    ldu 
+  } = settings as Settings & { ldu: keyof typeof LDU }
+
+  (function(
+    f: WindowWithOptionalFbq, 
+    b: Document, 
+    e: 'script', 
+    v: string, 
+    n: FBClient | undefined = undefined, 
+    t: HTMLScriptElement | undefined = undefined, 
+    s: Element | null = null
+  ){
+    if (f.fbq) return;
+    n = f.fbq = function() {
+      /* eslint-disable */
+      // @ts-expect-error - n is defined by the time this executes
+      n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments);
+      /* eslint-enable */
+    };
+    if (!f._fbq) f._fbq = n;
+    n.push = n;
+    n.loaded = true;
+    n.version = '2.0';
+    n.queue = [];
+    t = b.createElement(e);
+    t.async = true;
+    t.src = v;
+    s = b.getElementsByTagName(e)[0];
+    if (s && s.parentNode) {
+      s.parentNode.insertBefore(t, s);
+    }
+  })(
+    window, 
+    document, 
+    'script', 
+    'https://connect.facebook.net/en_US/fbevents.js'
+  );
+
+  if(ldu === LDU.Disabled.key) {
+    window.fbq('dataProcessingOptions', [])
+  }
+  else {
+    const lduObj = getLDU(ldu)
+    window.fbq('dataProcessingOptions', ['LDU'], lduObj.country, lduObj.state)
+  }
+
+  if(disablePushState) {
+    window.fbq.disablePushState = true
+  } 
+
+  if (disableAutoConfig) {
+    window.fbq('set', 'autoConfig', false, pixelId)
+  }
+
+  if (disableFirstPartyCookies) {
+    window.fbq('set', 'firstPartyCookies', false, pixelId)
+  }
+
+  const userData = getStoredUserData(analytics)
+  const options: InitOptions | undefined = ( agent ? { agent } : undefined)
+  const initArgs: [string, UserData?, InitOptions?] = [pixelId]
+
+  if (userData && Object.keys(userData).length > 0) {
+    initArgs.push(userData);
+    if (options) {
+      initArgs.push(options);
+    }
+  } else if (options) {
+    initArgs.push(undefined, options)
+  }
+
+  window.fbq('init', ...initArgs)
+
+  setStorageInitCount(analytics, 1)
+  deleteStorageUserData(analytics)
+
+  if(!disablePushState) {
+    window.fbq('trackSingle', pixelId, 'PageView')
+  }
+}
+
+export const storageFallback = {
+  get: (key: string) => {
+    try {
+      return window.localStorage.getItem(key)
+    } catch {
+      return null
+    }
+  },
+  set: (key: string, value: string) => {
+    try {
+      window.localStorage.setItem(key, value)
+    } catch {
+      // Silently fail in private browsing
+    }
+  }
+}
+
+export function setStorageInitCount(analytics: Analytics, count: number) {
+  const storage = (analytics.storage as UniversalStorage<Record<string, string>>) ?? storageFallback
+  storage.set(INIT_COUNT_KEY, `${count}`)
+}
+
+export function deleteStorageUserData(analytics: Analytics) {
+  const storage = (analytics.storage as UniversalStorage<Record<string, string>>) ?? storageFallback
+  storage.set(USER_DATA_KEY, '')
+}
+
+function getStoredUserData(analytics: Analytics): UserData | undefined { 
+    const storage = (analytics.storage as UniversalStorage<Record<string, string>>) ?? storageFallback
+    const userDataFromStorage: string | null = storage.get(USER_DATA_KEY)
+    if(userDataFromStorage) {
+        try {
+            const parsed = JSON.parse(userDataFromStorage)
+            if(!parsed || typeof parsed !== 'object' || Array.isArray(parsed) || Object.keys(parsed as object).length === 0) {
+                return undefined
+            }
+            return parsed as UserData
+        } catch {
+            return undefined
+        }
+    }
+    return undefined
+}
+
+function getLDU(ldu: keyof typeof LDU) {
+    const lduObj = LDU[ldu]
+    return { country: lduObj.country, state: lduObj.state }
+}