Need Help with Tracking Accordion Toggle in 'FAQ with hamburger view' Block

Custom Coding
1

Hello everyone,

CleanShot 2023-10-29 at 16.01.37@2x
CleanShot 2023-10-29 at 16.01.37@2x1182×498 31 KB

I’m using the ‘FAQ with hamburger view’ block in my project and I’m trying to add an event listener to detect when an accordion is expanded. My goal is to send an event to Mixpanel with the title of the expanded accordion as a parameter.

Here are the code snippets showing the accordion when it’s not expanded:

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root sw-font-size-m sw-text-color-default sw-font-family-default sw-font-weight-semibold sw-background-color-f9fafb sw-letter-spacing-normal css-1spt7da"><div class="MuiButtonBase-root MuiAccordionSummary-root css-cj52e9" tabindex="0" role="button" aria-expanded="false"><div class="MuiAccordionSummary-content css-1n11r91"><span class="MuiBox-root css-0">Can I use my custom domain?</span></div><div class="MuiAccordionSummary-expandIconWrapper css-1fx8m19"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg></div></div><div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-hidden css-a0y2e3" style="min-height: 0px; height: 0px; transition-duration: 228ms;"><div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5"><div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb"><div role="region" class="MuiAccordion-region"><div class="MuiAccordionDetails-root css-1czcuqd"><p class="sw-font-size-m sw-text-color-default sw-font-family-default sw-font-weight-normal sw-background-color-ffffff sw-line-height-normal sw-letter-spacing-normal MuiBox-root css-0" style="margin-block-end: 0px; padding: 16px;">Absolutely! You can connect your custom domain on the platform in all paid plans.</p></div></div></div></div></div></div>

And when it is expanded:

<div class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation1 MuiAccordion-root Mui-expanded sw-font-size-m sw-text-color-default sw-font-family-default sw-font-weight-semibold sw-background-color-f9fafb sw-letter-spacing-normal css-1spt7da"><div class="MuiButtonBase-root MuiAccordionSummary-root Mui-expanded css-cj52e9" tabindex="0" role="button" aria-expanded="true"><div class="MuiAccordionSummary-content Mui-expanded css-1n11r91"><span class="MuiBox-root css-0">Can I use my custom domain?</span></div><div class="MuiAccordionSummary-expandIconWrapper Mui-expanded css-1fx8m19"><svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"></rect><polyline points="208 96 128 176 48 96" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"></polyline></svg></div></div><div class="MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr" style="min-height: 0px; height: auto; transition-duration: 228ms;"><div class="MuiCollapse-wrapper MuiCollapse-vertical css-hboir5"><div class="MuiCollapse-wrapperInner MuiCollapse-vertical css-8atqhb"><div role="region" class="MuiAccordion-region"><div class="MuiAccordionDetails-root css-1czcuqd"><p class="sw-font-size-m sw-text-color-default sw-font-family-default sw-font-weight-normal sw-background-color-ffffff sw-line-height-normal sw-letter-spacing-normal MuiBox-root css-0" style="margin-block-end: 0px; padding: 16px;">Absolutely! You can connect your custom domain on the platform in all paid plans.</p></div></div></div></div></div></div>

I tried adding an event listener using jQuery, but I’m not getting any logs in the console, making me think the listener isn’t attaching properly or the event is being intercepted elsewhere.

Here’s a snippet of the code I’ve used:

$(document).on('click', '.MuiButtonBase-root', function() {
    console.log("Accordion element clicked");

    // Check if the accordion is expanded
    if ($(this).hasClass('Mui-expanded')) {
        console.log("The accordion is expanded");

        // Retrieve the title of the accordion
        var title = $(this).find('.MuiBox-root').text().trim();
        console.log("Accordion title:", title);

        // Send the event to Mixpanel
        mixpanel.track("Accordion expanded", { "title": title });
        console.log("Event sent to Mixpanel with title:", title);
    } else {
        console.log("The accordion is collapsed");
    }
});

Has anyone encountered this issue or know how I can successfully detect the accordion toggle? Any help or suggestions would be greatly appreciated!

This tracking allows us to understand what interests our users, enabling us to better tailor our content and improve user experience.

Thank you in advance for your time and assistance.

:sunflower:

2

Hay @lea ,
could you please try this code instead? Just paste it to page settings → Custom code → Footer and replace the BLOCKID with your block name. :star_struck:

<script>
window.addEventListener('block-loaded-BLOCKID', () => {
let faqs = document.querySelector('#BLOCKID .container div:nth-child(2)').children;
[...faqs].forEach((faq) => {
faq.addEventListener('click', () =>{
    if(!faq.firstChild.classList.contains('Mui-expanded')){
    let title = faq.firstChild.innerText;
        console.log(title, "The accordion is expanded");
//YOUR STAFF HERE
        
    } else {
        console.log("The accordion is not expanded");
    };
})

})
});
</script>
3

Working nice, thanks ! Here with mixpanel

<script>
window.addEventListener('block-loaded-BLOCKID', () => {
  let faqs = document.querySelector('#BLOCKID .container div:nth-child(2)').children;
  [...faqs].forEach((faq) => {
    faq.addEventListener('click', () => {
      let isExpanded = faq.firstChild.classList.contains('Mui-expanded');
      if (!isExpanded) {
        let title = faq.firstChild.innerText;
        console.log(title, "The accordion is expanded");
        mixpanel.track('Hamburger Clicked', {
          'name': title
        });
      } else {
        console.log("The accordion is not expanded");
      };
    });
  });
});
</script>
1 Like