Integrate USP Using the JS SDK

overview you can integrate user selected perks (usp) with your existing moments implementation using either the javascript sdk or the moments api this guide explains how to integrate usp specifically using the javascript sdk usp is only compatible with the multi offer unit (mou) a maximum of 3 offers can be displayed you must provide a valid pub user id to uniquely identify users across sessions prerequisites before starting, ensure the following you have an active momentperks integration using the javascript sdk your theme in the dashboard has usp enabled (or will be overridden in configuration) you are using the multi offer unit, not the single offer unit integration steps step 1 define pub user id usp requires a unique, consistent identifier for each user define this identifier in window\ adpxuser requirements for pub user id must be unique per user must be consistent across sessions must be non pii (do not use email addresses or phone numbers window\ adpxuser = { pub user id 'unique user 123', // other user attributes }; step 2 configure usp in window\ adpxconfig add usp related settings to your sdk configuration using window\ adpxconfig ensure your selected theme id has usp enabled in the dashboard, or override it directly in the configuration window\ adpxconfig = { accountid 'your account id', autoshow true, prefetch true, theme id 'uspenabledtheme', settings { multi offer unit true, enable usp true, usp all offers checked false // optional } }; explanation of settings setting type required description multi offer unit boolean yes must be true usp only works with multi offer unit enable usp boolean yes enables user selected perks usp all offers checked boolean no when true, all offers are pre selected by default if usp is not enabled in the moments dashboard, the above config can be used to override the default theme settings step 3 enable prefetching (recommended) you can improve the user experience by enabling prefetch this setting fetches and stores offers in localstorage on initial load and reuses them on subsequent visits how prefetch works when the prefetch option is enabled in window\ adpxconfig , the javascript sdk optimizes the initial and subsequent user experiences by caching offer data and the session identifier in the browser this allows usp to function efficiently across page reloads and short return visits on the user's first visit, the sdk makes a network request to fetch eligible offers and generates a unique session id both the offer data and session id are stored locally in localstorage if the user reloads the page or returns within an hour, the sdk detects cached data and reuses the existing offers without making a new network request reuses the same session id to ensure offer selections remain valid restores the user's previously selected offers cached data remains valid for up to 1 hour, or up to 2 page loads, whichever comes first after expiration, the sdk fetches a new set of offers generates a new session id resets local selection state example (prefetch = true) window\ adpxconfig = { accountid 'your account id', autoshow true, prefetch true, theme id 'uspenabledtheme', settings { multi offer unit true, enable usp true, usp all offers checked false // optional } }; step 4 complete the session usp is designed to operate before checkout or another key user action after a user selects offers and completes the intended action, you must notify momentscience by completing the session window\ adpx completesession(window\ adpx sess id, pub user id); parameters parameter description sessionid the current session id, available at window\ adpx sess id pubuserid the same pub user id defined earlier in window\ adpxuser calling this function sends the selected offers to your configured usp webhook endpoint