Button clicks tracking using CSS Selector | Community
Skip to main content
New Participant
August 10, 2023
Solved

Button clicks tracking using CSS Selector

  • August 10, 2023
  • 1 reply
  • 3073 views

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');
}
});

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Jennifer_Dungan

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

1 reply

yuhuisg
New Participant
August 10, 2023

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.

AshwinC5IAuthor
New Participant
August 10, 2023

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
New Participant
August 10, 2023

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?