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.
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.
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);
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
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.
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