How to create three different click events in a single rule and identify in custom code which element triggered the click?

[PrasanthV]

I have created three different element click events in one rule and want to retrieve the currently triggered element in custom code.

[Gokul_Agiwal]

Hi @PrasanthV  What is your use case? can you elaborate more 

In case if you just to understand from 3 different element, which element has clicked and get that value - you can write a small JS snippet like below. 

Suppose - you have 3 buttons with tag name called button 

<button>0</button>
<button>1</button>
<button>2</button>

and then you can iterate through them with using onClick function 

var buttons = document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
    (function (i) {
        buttons[i].onclick = function () {
            alert("button " + i + " was clicked");
        }
    }(i));
}

Here is the test fiddle : https://jsfiddle.net/x697pymu/ 

Check this once.

Thanks

[PrasanthV]

Hi Gokul,

Thank you for your prompt response.

It is a single page application, On page load, the three buttons are not rendered yet. The button will display only when the modal is shown.

The rule gets triggered if i create the click event using the Adobe event type.

Please let me know if you need more details.

[Gokul_Agiwal]

Hi @PrasanthV  So are you using Web SDK for your implementation? Send Event method? Or is it normal implementation having Adobe analytics extension?  

[PrasanthV]

Hi Gokul,

Thank you for clarifying and assisting with this!

Yes, it is a normal implementation using the Adobe Analytics extension for tracking events.

[Harveer_SinghGi1 · Accepted solution]

Hi @PrasanthV , you should be able to achieve this using the event object and some custom code.

A very simple example, I set up a rule with three click events using 3 different element IDs as selectors,

• Click Event 1: Uses ID "carousel-43c8d133ed-item-2122a9f81a-tab"
• Click Event 2: Uses ID "carousel-43c8d133ed-item-da32481ec8-tab"
• Click Event 3: Uses ID "carousel-43c8d133ed-item-5f1778b56a-tab"

Then in rule actions I can use event.element.id to identify which of these events triggered the rule like below,

console.log("Rule triggered by: Click|ID|", event.element.id);

And it worked prefectly,

As I said, this is a very simple example, you can utilize event object based on the event triggers that you are using.

[PrasanthV]

Hi Harveer,

Thank you for your valuable response!