# Track clicks on WhatsApp Chat widget

**URL:** <https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421>\
**Category:** General Questions\
**Tags:** whatsapp-chat\
**Created:** [March 31, 2025, 1:00pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421 "2025-03-31T13:00:14Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [March 31, 2025, 1:00pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/1 "2025-03-31T13:00:14Z")

</div>

Hello all,

Unfortunately I am having an issue tracking the conversion of the click to open the whatsapp chat as well.. I’ve been browsing the community for hours and nothing seems to work. (I’ve tried at least 4-5 codes and strategies to make it work but no luck so far)

Would anyone be kind enough to assist me with this? I’d appreciate it.

David.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 31, 2025, 1:22pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/3 "2025-03-31T13:22:04Z")

</div>

Hi there, @David_Garraza and welcome to the Community 👋

Would you prefer tracking clicks via GTM or Google Analytics?

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [March 31, 2025, 1:28pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/4 "2025-03-31T13:28:40Z")

</div>

Hey Max! Thanks for the super quick response. Working with GTM at the moment!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 31, 2025, 1:54pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/5 "2025-03-31T13:54:21Z")

</div>

Okay! Please try to follow these steps:

> **Adding the code**
>
> You should add this code to the Custom JS field on the Appearance tab of your widget’s settings:
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/3/e30059088e88451f4e87d08c0348807908fe4ec8.png)
> 
> ```auto
> 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
> });
> }
> });
> });
> 
> ```

  

> **Creating triggers**
>
> 1. Click on **New** in your GTM account:
> 
> ![83eaf3e8ee6896cc0be63f11a2bb933c.png](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/b/5/b506a0569bf6b3cb5d0e58c442459f403799cc5e.png)
> 
> 1. Proceed to **Trigger Configuration** tab:
> 
> ![4197103dc0c6ccd7a331c4bfae338ef5.png](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/b/fb1fcc7fc225f1c24d96c4fb0bbdef8d48d912d3.png)
> 
> 1. Choose **Custom Event** from the list:
> 
> ![a0d112757876941fcb4c0a70f3ca60d8.png](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/a/ca8c04686c6e26937bb4f31c02e84fceb7bb4a2c.png)
> 
> 1. Give the name to the event and save it after. You should create 2 events: `open-or-close-whatsapp-chat` and `click-start-chat-button`
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/6/d/6d8f7f313c2b41e3f80059f7ca3aa73810bbb5c3.png)
> 
> 1. Once custom events `open-or-close-whatsapp-chat` and `click-start-chat-button`are created, you should add 2 Google Analytics tags and set the custom events as triggers for these tags:
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/7/17be52ee9e75314ed5a01e2bad73fe04c3359fb1.png)
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/9/59b9673cca1b7b9c00041c4d26286ebc3222a5e9.png)
> 
> ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/5/c50574b4b18715639a5fb06ad95f51e7c1aed43c.png)

  

Give it a try and let me know how it worked 🙂

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [March 31, 2025, 1:57pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/6 "2025-03-31T13:57:16Z")

</div>

I’ve tried this multiple times. That’s why I posted a message, none of what I’ve seen has worked for me…

Would that be the trigger event name anyway?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [March 31, 2025, 3:08pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/7 "2025-03-31T15:08:56Z")

</div>

There were some steps missing in the Creating triggers part, apologies for that!

Once custom events `open-or-close-whatsapp-chat` and `click-start-chat-button`are created, you should add 2 Google Analytics tags and set the custom events as triggers for these tags:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/7/17be52ee9e75314ed5a01e2bad73fe04c3359fb1.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/5/9/59b9673cca1b7b9c00041c4d26286ebc3222a5e9.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/5/c50574b4b18715639a5fb06ad95f51e7c1aed43c.png)

Feel free to try it out and let me know if it worked 🙂

  

I’d also like to note, that there is a simpler way to track clicks using the Google Analytics code.

To do this, please add this part of the code to your website `<head>`:

```auto
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ID');
</script>

```

  

In the code above, you need to replace **G-ID** with your actual website ID for Google  
Analytics. This article will help you find your ID - [Find your Google tag ID](https://support.google.com/analytics/answer/9539598?hl=en).

And then just add the rest of the script to the Custom JS field in your widget’s settings:

```auto
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
            });
        }
    });
});

```

  

Please let me know if it helps and if you have any other questions.

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [March 31, 2025, 4:21pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/8 "2025-03-31T16:21:45Z")

</div>

Hi Max,

Unfortunately, nothing got triggered after following your instructions. Triggers are there, the Google Ads (Conversion tracker) is linking them, but when I test it out on the Google Tag Assistant, nothing happens.  
I’m very new to these as you can tell, but I think I get the general dynamic, but for some reason, no luck here.

Thanks again

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 1, 2025, 10:06am UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/9 "2025-04-01T10:06:42Z")

</div>

Hi @David_Garraza 👋

I am really sorry about that!

To check why this solution doesn’t work for you, we’ll need temporary access to your GTM account - [Providing access to your Google Tag Manager account - Elfsight Help Center](https://help.elfsight.com/article/1229-sharing-access-to-gtm).

Could you please provide us with it?

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [April 1, 2025, 12:49pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/10 "2025-04-01T12:49:21Z")

</div>

Hi Max,

I just did, you must’ve gotten the notification. Let me know if you make any changes. Thank you.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 1, 2025, 3:50pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/11 "2025-04-01T15:50:58Z")

</div>

Thank you so much, accepted!

I’ve passed it on to the devs and will report back once I have any news 🙂

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [April 1, 2025, 3:56pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/12 "2025-04-01T15:56:36Z")

</div>

Appreciate the time and effort!

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 3, 2025, 1:45pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/13 "2025-04-03T13:45:02Z")

</div>

Hi there, @David_Garraza 👋

Devs started working on your request and noticed that you’ve removed the widget from the page. Could you please add it back, so that we could check things?

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [April 3, 2025, 2:01pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/14 "2025-04-03T14:01:36Z")

</div>

Hi, I shared invited you again. Sorry, I just was thinking I might not need the widget that much after all, but maybe I change my mind if I can actually make it work.

Thanks again

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 3, 2025, 2:08pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/15 "2025-04-03T14:08:56Z")

</div>

Yeah, we have access to your GTM account, but to check things, we need the widget to be installed on the website. Could you please add the widget back to your website or install to the test page? 🙏

We’ll do our best to make the analytics code work for you!

---

<div class="post-metadata">

**Author:** ![David\_Garraza](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_garraza/32/60928_2.png) [@David\_Garraza](https://community.elfsight.com/u/David_Garraza)\
**Post date:** [April 3, 2025, 3:38pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/16 "2025-04-03T15:38:03Z")

</div>

Hi again,

Sorry, I think I’m going to let it stay with a regular link to whatsapp web for the moment.  
The widget is very nice and looks great on the site but I have a few other things to juggle at the moment.

I Appreciate the time and effort to solve the issue. I will come back when ready.

thank you.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [April 3, 2025, 5:23pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/17 "2025-04-03T17:23:55Z")

</div>

Okay! If any questions come up in the future, we’re always here to help 🙂

---

<div class="post-metadata">

**Author:** ![Supun\_Senarath](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Supun\_Senarath](https://community.elfsight.com/u/Supun_Senarath)\
**Post date:** [June 2, 2025, 5:58pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/18 "2025-06-02T17:58:31Z")

</div>

> [@Max](#):
>
> click-start-chat-button

Hi Mate, I tried this using GTM but didn’t work. Would you mind helping me to get this sorted?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 2, 2025, 6:18pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/19 "2025-06-02T18:18:27Z")

</div>

Hi there and welcome to the Community, @Supun_Senarath 👋

To check what exactly goes wrong, we’ll need temporary access to your GTM account - [Providing access to your Google Tag Manager account - Elfsight Help Center](https://help.elfsight.com/article/1229-sharing-access-to-gtm).

Please let me know once it’s shared and our devs will start working on it.

Also, please send me a link to the page where your widget is installed, so that we could test it out 🙏

---

<div class="post-metadata">

**Author:** ![Supun\_Senarath](https://avatars.discourse-cdn.com/v4/letter/s/b77776/32.png) [@Supun\_Senarath](https://community.elfsight.com/u/Supun_Senarath)\
**Post date:** [June 2, 2025, 6:28pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/20 "2025-06-02T18:28:53Z")

</div>

Sure mate, access granted.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [June 2, 2025, 7:01pm UTC](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421/21 "2025-06-02T19:01:50Z")

</div>

Thank you so much!

I’ve checked your website and don’t see this code added to your website’s `<head>`:

```auto
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ID');
</script>

```

  

In the code above, you need to replace **G-ID** with your actual website ID for Google  
Analytics. This article will help you find your ID - [Find your Google tag ID](https://support.google.com/analytics/answer/9539598?hl=en).

Could you please try to add it and let me know if it worked?

[Next page](https://community.elfsight.com/t/track-clicks-on-whatsapp-chat-widget/110421.md?page=2)