Track event with horizontal scroll in Column Control component | Community
Skip to main content
T
TharakaRa
January 30, 2025
Solved

Track event with horizontal scroll in Column Control component

  • January 30, 2025
  • 3 replies
  • 567 views

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.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by AmitVishwakarma

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.

3 replies

viveksachdeva
Community Advisor
viveksachdevaCommunity Advisor
Community Advisor
January 30, 2025

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
    Community Advisor
    anupampatCommunity Advisor
    Community Advisor
    January 30, 2025

    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
      Community Advisor
      AmitVishwakarmaCommunity AdvisorAccepted solution
      Community Advisor
      February 2, 2025

      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.

        Terms & ConditionsAccessibility statement

        Loading footer...