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

Avatar

Avatar

in_kook65578246

Avatar

in_kook65578246

in_kook65578246

07-11-2018

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

Accepted Solutions (1)

Accepted Solutions (1)

Avatar

Avatar

StewSchilling

MVP

Avatar

StewSchilling

MVP

StewSchilling
MVP

07-11-2018

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

Answers (4)

Answers (4)

Avatar

Avatar

keithb81089125

Avatar

keithb81089125

keithb81089125

15-07-2020

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

Avatar

thomas_amsler

Avatar

thomas_amsler

thomas_amsler

24-07-2019

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

Avatar

eham06

Avatar

eham06

eham06

23-07-2019

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

Avatar

thomas_amsler

Avatar

thomas_amsler

thomas_amsler

08-11-2018

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