Expand my Community achievements bar.

SOLVED

Track event with horizontal scroll in Column Control component

Avatar

Level 1

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.

1 Accepted Solution

Avatar

Correct answer by
Level 7

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.

View solution in original post

3 Replies

Avatar

Community Advisor

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?

Avatar

Level 7

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

Avatar

Correct answer by
Level 7

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.