Button clicks tracking using CSS Selector

Question

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

Jennifer_Dungan · Accepted Answer

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

yuhuisg · Answer

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.

Sign up

Login with SSO

Login to the community

Login with SSO