Button clicks tracking using CSS Selector

[AshwinC5I]

I'm trying to track a Button click using CSS selector 

Event is getting fired but in that I cannot able to see eVars and events.

1. I added the CSS script in events --> Core--> clicks. 

(CSS Script)

button.productcollection__item-button.productcollection__item-button--add-to-wish-list

2. Added the set variables custom code 

(Custom Code)

document.addEventListener('click', function(event) {
if (event.target.matches('button.productcollection__item-button.productcollection__item-button--add-to-wish-list')) {
var buttonText = event.target.innerText;

s.eVar49 = buttonText;
s.linkTrackVars = 'eVar49,events';
s.linkTrackEvents = 'event19';
s.events = 'event19';

s.tl(this, 'o', 'Button Click');
}
});

[yuhuisg]

It sounds like you're using AEP Tags as your tag manager. If so, then you really should be using the Adobe Analytics extension.

But sticking with your custom code implementation:

Firstly, you don't need that event listener, because the Core > Click event takes care of that for you. You also don't need to check for the valid class because your selector takes care of that for you.

So all you really need is this part:

var buttonText = this.@cleanText; // this is a Tags shorthand for getting the text of the clicked link, which in your case is similar to using event.target.innerText;

s.eVar49 = buttonText;
s.linkTrackVars = 'eVar49,events';
s.linkTrackEvents = 'event19';
s.events = 'event19';

s.tl(this, 'o', 'Button Click');

If this still doesn't work, then it's likely that your "s" object has not been initialised properly, i.e. the Rule that loads your AppMeasurement.js code and executes "s.t()" has not been triggered.

Hope that helps you with your troubleshooting.

[AshwinC5I]

Hi Yuhuisg,

• Thank you for the code. By using the below one, now it is firing to their respected eVars and events.
• But I want to track the product details. I'm using the below code but its not firing.

s.linkTrackVars = "products,eVar7,eVar15,eVar3,prop1,prop29,prop30,eVar29,eVar31,prop31,eVar32,eVar33,eVar28,eVar48,events";
s.linkTrackEvents = "event19";

s.eVar48 = "wishlist"+this.innerText;
s.events = "event19";
s.products = ";" + event.message.eventInfo["xdm:SKU"] + ";"+ event.message.eventInfo["xdm:quantity"]+";"+ event.message.eventInfo["path:component.productlist-63eac320e1"]
console.log(s.products);
this.adobeDataLayer.getState("component.productlist-63eac320e1")

[yuhuisg]

Wow, all of that code! I suggest that after this problem is resolved, you take some time to look at the extensions that are available in Tags to help you make full use of them instead. Otherwise, what's the point of using Tags, really?

Your code looks correct. However, I noticed that you don't have any s.t() nor s.tl() in there. Did you forget to include one of them?

[Jennifer_Dungan · Accepted solution]

If you are using a CSS Selector for the click, you probably are not seeing any of that event data....

Is the button triggering a custom JS event? If so, why aren't you using that event as your trigger so that you can leverage the information contained within it?

Instead of a "Click" trigger, targeting a CSS selector you can use a "Custom Code" trigger and use event listener code to listen for this specific event... 

[AshwinC5I]

Yes Jennifer,

Thank you for the suggestion. I was trying to capture data from CSS script but now I'm using adobe client data layer so I got the tracking.

[Jennifer_Dungan]

I'm glad you get it working... it can sometimes be difficult to find the correct scope in which to get the proper information.