Track Send Message clicks using GTM

[Antoine_Varraso]

Hello Max,

Do you have a Google Tag Manager listner for the Whatsapp widget?

I’d like to track when the user clicks on send a message and it redirects to Whatsapp.

Thanks

[Max]

Hi there and welcome to the Community, @Antoine_Varraso

I’ll discuss it with the devs and will update you tomorrow

[Max]

Hi there, @Antoine_Varraso

Thank you for waiting!

Here is the solution from our devs:

const SEND_MESSAGE_EVENT = 'click-send-message-button';

const waitForElem = (selector) =>
  new Promise((resolve) => {
    if (document.querySelector(selector)) {
      return resolve(document.querySelector(selector));
    }

    const observer = new MutationObserver(() => {
      if (document.querySelector(selector)) {
        observer.disconnect();
        resolve(document.querySelector(selector));
      }
    });

    observer.observe(document.body, {
      childList: true,
      subtree: true,
    });
  });

if (dataLayer) {
  waitForElem(
    '[class*="eapps-whatsapp-chat"] [class*="MessageField__MessageButtonContainer-sc"] button'
  ).then((sendMessageBtn) => {
    sendMessageBtn.addEventListener('click', () => {
      dataLayer.push({ event: SEND_MESSAGE_EVENT });
    });
  });
}

This code should be added to the Custom JS field on the Appearance tab of your widget’s settings. Try it out and let me know if it worked

[Maxim_smith]

Hello @Antoine_Varraso ! Welcome to our community!
I see that @Max already answer your question! Let us know if it works!
Have fun in the community!