Personalized Event Handling

With the Personalized Event Handling feature, you can fire a defined JavaScript function whenever your website displays personalized content.

Usage Example:

Let's say you have a DXP ToolKit Persona Rule that triggers a personalized popup message when a user visits your website for the first time. Additionally, you also want to trigger an onboarding wizard that offers them a personalized first-time experience.

Easy as 1-2-3!

1. You define a JavaScript function in your theme or plugin called show_wizard().
2. You configure a personalized popup with your desired persona rules.
3. In your personalized content's DXP ToolKit settings, you set the "Callable Function on Success" input to show_wizard.
4. That's it, you're done! When a user visits your website for the first time, the show_wizard function will be triggered, displaying the personalized onboarding wizard.

Custom Event Listeners

In addition to the Callable Function on Success feature, DXP ToolKit also fires a custom dxp_change_block_visibility JavaScript event when changing visibility of a personalized element, enabling the use of event listeners. This custom event provides a data object with the following details:

• detail: Contains an object with the following properties:
  • visibility: Represents the visibility status of the content affected by the Persona Rule.
  • el: Refers to the HTML element affected by the Persona Rule.
  • condition_match_result: Indicates whether the Persona Rule was successfully matched or not.

You can leverage this custom event and its data to perform further actions, customize elements on your page, or integrate with other parts of your website or third-party services.

Custom Event Listener Example:

You want to track the visibility of an element on your website and log the results in your analytics system. You add a listener to the custom event and use the data provided in the detail object to update your analytics accordingly.

document.addEventListener('dxp_change_block_visibility', function(event) {
    // Accessing the data from the custom event
    const visibility = event.detail.visibility;
    const el = event.detail.el;
    const conditionMatchResult = event.detail.condition_match_result;
    
    // Your custom logic goes here
});