Track Send Message clicks using GTM

Ask the Community General Questions
1

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

Capture d’écran 2024-10-15 à 18.30.46
Capture d’écran 2024-10-15 à 18.30.46750×228 56.7 KB

2 Likes
3

Hi there and welcome to the Community, @Antoine_Varraso :wave:

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

1 Like
4

Hi there, @Antoine_Varraso :wave:

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 :wink:

1 Like
5

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

1 Like
6

Hello Max,

Thank you.

I have the same issue with a framer website.

Can you help me out to track the whatsapp button within GTM ?

Thank you really much

2 Likes
7

Hi @Antoine_Varraso :wave:

Do you want to track clicks on the chat bubble (1) or Start Chat button (2)?

image
image505×472 30.2 KB

1 Like
8

Both if it’s possible sir

2 Likes
9

Sure! Here is the code that should be added to the Custom JS field on the Appearance tab of your widget’s settings:

function sendAnalyticsEvent(config) {
    if (typeof ga !== "undefined") {
        ga('send', 'event', {
            eventAction: config.action,
            eventCategory: config.category,
            eventLabel: config.label
        });
    }

    if (typeof gtag !== "undefined") {
        gtag('event', config.action, {
            'event_category': config.category,
            'event_label': config.label
        });
    }
}

document.addEventListener('click', function (event) {
    const matchingItems = [
        {
            selector: '[class*="Bubble__BubbleComponent"]',
            label: 'Open/Close Chat Widget'
        },
        {
            selector: '[class*="ChatButton__DefaultButtonComponent-sc"]',
            label: 'Click Start Chat Button'
        },
    ];

    matchingItems.forEach((item) => {
        const match = event.target.closest(item.selector);

        if (match) {
            sendAnalyticsEvent({
                action: 'click',
                category: 'Elfsight Chat Widget',
                label: item.label
            });
        }
    });
});

Try it out and let me know if it helped

1 Like
10

Hello Max,

I installed the code on the custom JS field but I can’t see any interactions with the widget when I try with GTM preview mode.

Can you help me out?

Thanks

2 Likes
11

Please try to add this part to your website’s <head>:

<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>

If there is no way to add it to the <head>, paste it next to the widget’s installation code.

Check it out and let me know how it worked :slightly_smiling_face: