Track event with horizontal scroll in Column Control component

[TharakaRa]

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.

[viveksachdeva]

Can you elaborate a bit more. Your column control would be within the page, do you mean you would have a carousel/slider in the column control and you want to track how many times carousel in swiped?

[anupampat]

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

[AmitVishwakarma · Accepted solution]

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.