User agent parsing and dynamic config using JEXL
Overview
The user agent parsing feature is designed to extract detailed information about a user's device and operating system from their browser's user agent string. This enables the application to tailor its behavior, content, or configuration dynamically based on the user's environment.
How It Works
-
The app uses the ua-parser-js library to analyze the user agent string.
-
The parsing logic is encapsulated in the parseUserAgent function.
-
The function returns a structured object (
UserAgentInfo) containing:-
{
device: { family: "Apple iPhone" },
os: { name: "iOS", version: "16.4" }
}
-
Dynamic Step Replacement in Config Using User Agent Info
Overview
The application supports dynamic configuration, allowing certain steps or flows to be replaced or customized based on the user's device or OS. This is achieved by integrating user agent parsing with the configuration.
How It Works
-
The app uses a JEXL engine to evaluate conditions in config files.
-
Config steps can include expressions like:
getDevice()— returns the device family (e.g., "Apple iPhone")getDeviceOs()— returns the OS info (e.g.,{ name: "iOS", version: "16.4" })- These functions are injected into the JEXL context, so config files can use them to conditionally modify steps.
Example Config Snippet
{
"planCode": "getDeviceOs().name == 'iOS' ? 'fab-subs-bimonthly-normal-intro-1-thirtynine' : 'fab-subs-quarterly-normal-intro-10-fiftynine'",
"textColor": "#004585",
"backgroundColor": "#E1F1FF",
"borderColor": "#004585",
"discountOfferPlanCode": "fab-subs-bimonthly-discount-intro-1-nineteen",
"upsellFlowId": "getDeviceOs().name == 'iOS' ? 'fabulous_skip_trial_upsell_bundle_5apps_49_skip_pdf_expert_pathahead2' : 'fabulous_skip_trial_upsell_bundle_5apps_69_qtr_skip_pdf_expert_pathahead2'"
}
- In this example, the iPhone users will get a certain plan and other users will get a different one.
Expected Values
| Property | All Values |
|---|---|
getDevice().family |
|
getDeviceOs().name |
|