Expand my Community achievements bar.

SOLVED

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

Avatar

Level 2

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?

1616588_pastedImage_0.png

1616589_pastedImage_1.png

1616590_pastedImage_2.png

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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")

Screen Shot 2018-11-07 at 5.01.45 PM.png

View solution in original post

9 Replies

Avatar

Correct answer by
Community Advisor

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")

Screen Shot 2018-11-07 at 5.01.45 PM.png

Avatar

Level 2

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 

Avatar

Level 9

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

Avatar

Level 4

I have a similar problem.

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

cst-text-example.png

Thank you...

Avatar

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

Avatar

Level 3
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.

Avatar

Level 9

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.

Avatar

Level 3

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.
Screenshot 2020-07-15 at 10.18.42.png

Let us break down the rule components starting with our event type [Core-Click]
Screenshot 2020-07-15 at 10.20.54.png

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

Avatar

Level 2

@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?