Key-value pair targeting

Key-value pairs allow your organization to add customized targeting in your scenarios based on values you define and pass into the Sourcepoint platform. Using these values, your organization can then build messaging logic to serve different experiences to the end-user.

In this article, we will cover the two corresponding configurations needed to successfully utilize key-value pairing in your scenarios.

• Insert targetingParams parameter into implementation code​
• Configure key-value pair in scenario​
• Pass targetingParams via query string

---

Insert targetingParams parameter into implementation code

Key-value pairs must first be added to the on-page client configuration code snippet using the targetingParams parameter. Multiple key-value pairs can be added per messaging call.

In the example below, we are checking if the end-user has enabled a "dark theme" for their browser and then assigning this boolean variable to the darkMode key. This key-value pair will be used to drive a unique messaging experience for dark-mode users.

...
// Checking for dark theme
const browserTheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
...

window._sp_queue = [];window._sp_ = {    
    config: {        
                accountId: 1111,        
                baseEndpoint: 'https://cdn.privacy-mgmt.com',        
                ccpa: { },        
                gdpr: { },        
                propertyHref: 'https://www.testdemo.com',        
                campaignEnv: 'stage',        
                isSPA: true,
                // passing boolean value and assigning it to darkMode key-value pair
                targetingParams:{            
                            darkMode: browserTheme          
                }
    }
}

The value set can be a string, boolean or integer value. JavaScript variables that evaluate to either strings, boolean values or integers can be passed.

---

Configure key-value pair in scenario

To leverage the data being passed into the Sourcepoint platform, your organization will need to build out the messaging logic in the scenario builder based on the passed values.

As indicated above, our goal in this example is to deliver two different messaging experiences - one for browsers who use a dark theme and one for browsers who do not use a dark theme (i.e. a unique messaging experience for when darkMode is paired with true and a unique messaging experience when darkMode is paired with false.

From a new or existing step in a scenario, click Add condition.

Select Key Value Pair Targeting in the subsequent Conditions dropdown list.

In this example, your organization would like to display a unique first layer message when an end-user's browsers is using a dark theme (e.g. darkMode:true).

1. In the following Key Value Pair Targeting panel, ensure that the Pages toggle is set to Include
2. Set the Key field to darkMode.
3. Set the Value field to match 
4. Input true into the String field. 
5. Click Add to save this setup.
6. Configure the message that should be displayed with this key-value condition and all other conditions in the step are satisfied.

Repeat as necessary for when your key is paired with a false value (e.g. darkMode:false).

Click Save (or Update) to save the scenario: 

---

Pass targetingParams via query string

The key-value pairs configured in your scenario can be passed via query string to drive the messaging logic configured in your scenario. Follow the template below for your query string to pass your targetingParams:

?_sp_targeting_params=key1:val1,key2:val2