Track event with horizontal scroll in Column Control component

Question

hey! Lets say a visiter wanted to track event with horizontal scroll in Column Control component, which Tracking Event should be used. Can someone help me here.

AmitVishwakarma · Accepted Answer

To track horizontal scroll events in the Column Control component:
1. Add JavaScript to listen for scroll events:

document.querySelector('.your-column-control').addEventListener('scroll', function() {
    if (this.scrollLeft > 0) {
        // Trigger tracking event
        console.log('Horizontal scroll detected');
    }
});

2. Trigger tracking using AEM analytics (Adobe or Google Analytics):

- Adobe Analytics: s.tl(this, 'o', 'Horizontal Scroll Event');
- Google Analytics: gtag('event', 'horizontal_scroll', { 'event_category': 'Column Control' });
3. Ensure the JavaScript is included in the AEM component via client libraries or templates.

anupampat · Answer

Hi @tharakara ,

Please refer https://stackoverflow.com/questions/13233149/get-horizontal-scroll-event-in-js , use your class/id to identify the parent element and then listen to the event.

Regards,

Anupam Patra

Sign up

Login with SSO

Login to the community

Login with SSO