Multiple CSS classes in event configuration in AEP launch and Data collection

[ASP_Corp]

Hi,

I want to configure my event, is there any way to specify multiple CSS classes?, i want the event to fire on the condition that the HTML elements that are clicked should have class A AND class B AND Class C. please refer to the screen shot. 

I want my event to fire when the element iam clicking on has class "align-L2-content" AND  "pl-1" AND "hyber-link".

[Ankit_Chaudhary · Accepted solution]

Hi @ASP_Corp 

You can use a custom event type with the following code.

document.addEventListener('click', function(event) {
    var element = event.target;
    
    if (element.classList.contains('align-L2-content') && 
        element.classList.contains('pl-1') && 
        element.classList.contains('hyber-link')) {
        
        // Trigger your event here
        trigger()
    }
});

This code if the element which is getting click contains all three classes or not (you modify the code as per your additional requirements)

[ASP_Corp]

@Ankit_Chaudhary , thank you. I was looking for a fix on the UI, rather than on the custom code, just curious, does the Class property in my screen shot, does it not take a comma seperated values of multiple CSS classes?

[Ankit_Chaudhary]

@ASP_Corp maybe not the comma seperated values but you can use a regex in the UI, however i fell like using a custom code will give more flexiblity for this use case but you can try using a regex as well if it work well your requirments.

[Amruthesh_AG]

@ASP_Corp  This custom script should solve your query.

$("a").click(function(){
if(jQuery(this).attr('class').includes('align-L2-content') && (this).attr('class').includes('pl-1') && (this).attr('class').includes('hyber-link'))
return true;
});

Accept the solution if is works.