click tracking on Launch

[Former Community Member]

Hi,
can anyone tell me how to track click Under the following conditions in Launch?
I'm using Launch for the first time.
However, we are in trouble because no one in the company has ever used it before.

1. How to divide a single value into multiple events in using CSS Selectors.
 example）
 ・Button A： class= "adobeclick" →event1 
 ・Button B： class= "adobeclick" →event2

2.How to measure the clicks of a link that is not onClick.

3.How to click measurement in case of Ajax communication

Can anyone tell me how to setup this rule correctly to track clicks for this button.

Regards,
Haruka

[Urs_Boller · Accepted solution]

if you want different values set for different buttons, you need to setup different rules. and this only works if sou can identify each single button (so just using a css class "AdobeClick" is not enough. I personally prefer to add a "data-analytics-track" parametrr to the buttons/links Inwant to track where I pass additional information about the link (and that helps me to setup the rules).

example in source code would look like: <button .... data-analytics-track="firstButton">

If the out of the box link tracking does not work (eg because some javascript is disabling event bubbling), there are other options to track the clicks (but this all involves some changes on the we site). my preferred solution is either using a data layer (if already in place) or by using dispatch events (which can be fetched by Launch rules).

for data layer see: https://jimalytics.com/tag-management/the-event-driven-data-layer/

for window events see: https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent

[franzli]

Urs gave a few good points but here's some more assistance.

1. If you do not have access to the HTML and you only have class. You can use index placement in the DOM. Just a note, if HTML changes, your code may break. Urs comment on using data-attributes is a far better approach. But for a quick solution, you will want to know where Button A and Button B is placed.
There are two approaches to this. One is easier, the other is harder but covers more browsers.

Option 1: If you don't care about IE8 and older browsers, you can use the CSS selector: nth-type-of (Details: https://www.w3schools.com/cssref/sel_nth-of-type.asp)
So your CSS click listener for Button A will be:

.adobeclick:nth-type-of(0)​

And Button B will be:

.adobeclick:nth-type-of(1)

Option 2: You can do this by using the javascript function: getElementsByClassName() (Details: https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). For example, if button A is first on the DOM and button B is second you can do this:
For button A:

document.getElementsByClassName('adobeclick')[0]​

For button B:

document.getElementsByClassName('adobeclick')[1]​

From there, you can just add a click listener and then fire "trigger()"

2. To measure clicks of a link that is not onClick, I'm not too sure what you mean by that since there's out of the box link tracking but you can also try mousedown (either Launch out of the box or as a javascript custom code).

3. AJAX clicks are interesting as you can listen via network calls as a last ditch effort (if you don't have access to the code) but you can also just fire custom events alongside the ajax call (if you have access). I would refer to Urs' links for dispatching events or using the datalayer.

[jantzen_b]

Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?