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.
Solved! Go to Solution.
Views
Replies
Total Likes
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.
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?
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
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.