How to track the click button through Launch data element and pass attribute value to Adobe Analytics?

[in_kook65578246]

Hi,

I have created several same buttons on a page (same cssClass, different attribute). I create an event rule using the css selector. What I want to do is track which one the customer click and then set its value as an eVar or Props.  I know I can create event rule for each of them but it is stupid.

I find an answer for dtm and try to imitate it. However in Launch, the keyword "this" point to a null object in Launch.

Any solution to this problem?

Thanks!

How to track the click url through data element and pass to Adobe Analytics?

[Stewart_Schilling · Accepted solution]

Try referencing event.element

In the example below, I have a click event rule for any span tag.  When I click the span, I can access the HTML custom attribute on it as event.element.getAttribute("data-ui-id")

[jewilliams]

I'd like to use this method on a rule. What would be the best way to set this event element attribute as an eVar? Would I need to use a custom code?

@Stewart_Schilling 

[thomas_amsler]

Is this code snipped from a Data Element? There it won't work as they are processed a bit differently, but in the Custom Code of Set Variable "this" is available. If you want to use it in the Set Variable gui, event.element should also be available within the %% just like a Data Element

If it is a link you also have access to the link object throgh: s.linkObject

[eham06]

I have a similar problem.

How would I configure Adobe Launch to capture the value in cst-text from my example below?

Thank you...

[keithb81089125]

why would you want to grab that value? the text is not contextual!

[keithb81089125]

why would you want to grab that value? the text is not contextual! I would suggest using Custom data attributes for example, you can construct something like this: data-id="content links" data-text = "<example context label>More Details Click". you can add these to your <button> element or the inner <div> and construct an event based rule, I will add a working solution below.

[thomas_amsler]

I can try to outline how I would do it with a custom script, though I have to say, custom attributes are not recommended, you should either use the "data-" prefix or introduce a separate namespace with a linked DTD.

So I assume you have a rule that get's triggered when this button is clicked.

In the "Set Variables" action within the custom code you can access this button "event.target". From this you can access the attribute by name "event.target.getAttribute('cst-text')" and apply it to an eVar or prop.

I am not sure if you could create a data element with script code that can access the element that triggered the rule.

[keithb81089125]

This is my working solution, I hope it will help solve your problem.

Step 1

Come up with Custom HTML attributes that are unique and won't conflict with your web environment, the example below:

 'data-pagequicklinktype' && 'data-pagequicklinkname'

I will use the above custom attributes on my HTML elements where I want to capture link clicks or button clicks (text value)

for example, if I have

<button href="example.com" data-pagequicklinktype ="button content links"  data-pagequicklinkname = "Explore Our Products | Button Click">Explore Our Products </button>
As you can see I came up with a proper naming convention, adhering to best practices when it comes to implementation.

Step 2

Create your Event Based rule.

Let us break down the rule components starting with our event type [Core-Click]

On the core-click, you will notice that I chose to use the "specific elements" option and in the input field, I listed my expected elements separated by a comma: div, button, span, a and these are common HTML elements involved or associated with links and buttons.
I also selected "and having certain property values", now this is where our Custom Attributes come to play!
in this case, I will select the 

data-pagequicklinktype and use regular expression and then again I add the expected values [^(main|link|footer|button|form)] 

Remember to always set the expected values and also use those values on different properties you want to track the click event on!

Now On Custom Code

Please read the comments on the code!

/*create new variables that will hold the values that you will fetch from your custom **attributes using "this.getAttribute" and specify the attribute name. ".toLowerCase" is **optional
*/
var elDataId = this.getAttribute('data-pagequicklinktype').toLowerCase();
var elDataText = this.getAttribute('data-pagequicklinkname').toLowerCase();

/* you can create and set a customLink data element variable that holds your values, *optional
** 
*/
_satellite.setVar('customLink', + ' | ' + elDataText);
_satellite.logger.log(_satellite.getVar('customLink'));
return true;

 
On the Adobe Analytics - Set Variables 
Set all your preferred variables, including the customLink  variable we set in the code which is grabbing the value of the clicks

Send your beacons and you are done!

Please let me know if this works for you, if you require additional assistance, I will be more than happy to help. 
Let us connect on LinkedIn here Keith - LinkedIn

[jewilliams]

@keithb81089125 I could use help on setting the custom code to assign the descriptor to my eVar. We are adding a particular descriptor in the class for a button so I'm thinking I could put in the custom code

var eVar26 = this.getAttribute('class')

Then in AA Set Variables would I put my eVar26 Set as eVar26?