# Help tracking click on WhatsApp Button

**URL:** <https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886>\
**Category:** General Questions\
**Tags:** whatsapp-chat, button\
**Created:** [March 21, 2023, 6:27pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886 "2023-03-21T18:27:28Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Yuri](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/yuri/32/12884_2.png) [@Yuri](https://community.elfsight.com/u/Yuri)\
**Post date:** [March 21, 2023, 6:27pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/1 "2023-03-21T18:27:28Z")

</div>

Hi all 🙂

I spent some hours thinking about how can I track in google analytics the WhatsApp button’s click as it’s a JS button…

Does anyone have the same problem? If so, how solved?

Thanks

---

<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 22, 2023, 11:52am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/3 "2023-03-22T11:52:21Z")

</div>

Hello @Yuri and welcome to Elfsight Community ❤

Our devs have prepared a Google Analytics code for you. Please add this part of the code to your website :

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

```

Where you need to replace UA-ID with your actual website ID for Google Analytics.

And then just add the rest of the script right before closing tag:

```auto
<script>
  document.addEventListener('DOMContentLoaded', () => {
		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
				});
			}
		}
		function rafAsync() {
			return new Promise(resolve => {
				requestAnimationFrame(resolve);
			});
		}
		function checkElement(selector) {
			if (document.querySelector(selector) === null) {
				return rafAsync().then(() => checkElement(selector));
			} else {
				return Promise.resolve(true);
			}
		}
  
		checkElement('.eapp-all-in-one-chat-root-layout-component')
			.then(() => {  
				const clicker = (el, label) => {
					document.querySelector(el).addEventListener('click', () => {
						sendAnalyticsEvent({
							action: 'click',
							category: 'Elfsight Chat Widget',
							label: label
						})
					})
				}
  
				clicker('[class^="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
				clicker('a[title="WhatsApp"]', 'Click to WhatsApp Chat');
			})
  })
</script>

```

Please check it and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![user3124](https://avatars.discourse-cdn.com/v4/letter/u/bbe5ce/32.png) [@user3124](https://community.elfsight.com/u/user3124)\
**Post date:** [May 10, 2023, 7:00pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/4 "2023-05-10T19:00:45Z")

</div>

Hi,

I’m also interested in Yuri’s question.

It’s unclear to me if the second script should replace the original script for implementing the whatsapp widget. Or that both the scripts Max shared should be added, together with the script for adding the widget to your website.

Thanks!

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [May 11, 2023, 10:06am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/5 "2023-05-11T10:06:53Z")

</div>

Also the format is for the old universal analytics looking for a UA code and sending events in the action, category, label format. Is there a way to setup for GA4?

---

<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:** [May 11, 2023, 10:11am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/6 "2023-05-11T10:11:38Z")

</div>

Hi @user3124 and welcome to Community ❤

You should add both scripts.

If any questions come up or any assistance is needed, please let us know. We’ll be happy to advise 🙂

---

<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:** [May 11, 2023, 10:13am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/7 "2023-05-11T10:13:18Z")

</div>

Hi @Damien_Fegan! Happy to see you with us, welcome 🎉

I’ll discuss it with our devs and get back to you a bit later.

---

<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:** [May 11, 2023, 1:09pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/8 "2023-05-11T13:09:31Z")

</div>

@Damien_Fegan

I’m glad to confirm that this code will also work correctly. All you need to do is to add your **G-ID** instead of **UA-ID** to the code I’ve provided previously.

Could you please try using the code and let me know if this works correctly for you?

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 7, 2023, 12:38pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/9 "2023-08-07T12:38:11Z")

</div>

> [@Max](#):
>
> de will also work correctly. All you need to do is to add your **G-ID** instead of **UA-ID** to the code I’ve provided previously.

Hi Yuri i’ve tried installing this code with tag manager and am getting no events fired in GA4. when i look at the code it is setup with the old UA event structure of event\_category event\_label GA4 events are event name and parameter. Is there any update on how to track events in GA4 or send conversion events to google ads.  
Thank you

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 7, 2023, 2:05pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/10 "2023-08-07T14:05:24Z")

</div>

@Damien_Fegan thank you for your comment!

I’ve consulted our developers regarding this matter, and this is what they are saying:

It’s important to know the way you made the installation: via GTM or directly on your website, because the codes a bit differ for each type.

If you choose a direct installation, then you’re welcome to use the code provided above, it should work. However, if it has to be installed via GTM, we’ll have to alter the code a bit and install it bearing in mind a couple of peculiarities.

Please let me know which type of installation is more preferable for you 🙂

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 7, 2023, 2:16pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/11 "2023-08-07T14:16:53Z")

</div>

Hi Helga. The Idea would be by tag manager. We have a few clients using this and it would make it much easier to implement across the board.

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 8, 2023, 6:35am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/12 "2023-08-08T06:35:35Z")

</div>

Got it, @Damien_Fegan!

In this case, here’s what needs to be done:

You need to create a tag that will only contain the click script:

```auto
<script>
  document.addEventListener('DOMContentLoaded', () => {
		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
				});
			}
		}
		function rafAsync() {
			return new Promise(resolve => {
				requestAnimationFrame(resolve);
			});
		}
		function checkElement(selector) {
			if (document.querySelector(selector) === null) {
				return rafAsync().then(() => checkElement(selector));
			} else {
				return Promise.resolve(true);
			}
		}
  
		checkElement('.eapp-all-in-one-chat-root-layout-component')
			.then(() => {  
				const clicker = (el, label) => {
					document.querySelector(el).addEventListener('click', () => {
						sendAnalyticsEvent({
							action: 'click',
							category: 'Elfsight Chat Widget',
							label: label
						})
					})
				}
  
				clicker('[class^="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
				clicker('a[title="WhatsApp"]', 'Click to WhatsApp Chat');
			})
  })
</script>

```

The tag should have a page initialization trigger, and the analytics tag should be added to the page separately.

Please let me know if it helped or if you have other questions 🙂

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 9, 2023, 9:51am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/13 "2023-08-09T09:51:26Z")

</div>

I copied that code into a custom html tag to trigger on every page but it would not publish due to errors in the code. see attached image

 ![elf site tracking2023-08-09_10-46](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/2X/6/6f3005c68448c72c4494109ba5d63f673d78f545.png)

---

<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:** [August 15, 2023, 10:48am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/14 "2023-08-15T10:48:40Z")

</div>

Hi @Damien_Fegan 👋

I’m so sorry that we didn’t respond sooner to your message!

Could you please send me a direct link to the website where the widget is installed?

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 15, 2023, 11:00am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/15 "2023-08-15T11:00:49Z")

</div>

[https://cleaningcontractorsbelfast.co.uk/](https://cleaningcontractorsbelfast.co.uk/)

---

<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:** [August 15, 2023, 12:36pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/16 "2023-08-15T12:36:02Z")

</div>

Thank you!

Please try to use this code instead and let me know how it worked:

```auto
<script>
(function () {
  function eappsDispatchAnalyticsEvent(event, selector, config) {
    function sendEvent(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
        });
      }
    }
    function isHitClass(e, selector) {
      return e.target && e.target.closest(selector);
    }
    if (isHitClass(event, selector)) {
      sendEvent(config);
    }
  }
  document.addEventListener(
    "click",
    function (event) {
      eappsDispatchAnalyticsEvent(event, '[class*="Bubble__BubbleComponent"]', {
        action: "click",
        category: "Elfsight Chat Widget",
        label: "Open/Close Chat Widget"
      });
      eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp']", {
        action: "click",
        category: "Elfsight Chat Widget",
        label: "Click to WhatsApp Chat"
      });
    },
    true
  );
})();
</script>

```

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 16, 2023, 10:25am UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/17 "2023-08-16T10:25:09Z")

</div>

Hi Max  
It worked! For your information, when you first click the chat it fires 2 outbound clicks to the data layer the first

> {
> 
> pagePostType: “page”,
> 
> pagePostType2: “single-page”,
> 
> pagePostAuthor: “admin”,
> 
> event: “click”,
> 
> gtm: {
> 
> uniqueEventId: 12,
> 
> start: 1692181207572,
> 
> allowlist: undefined,
> 
> blocklist: undefined,
> 
> whitelist: undefined,
> 
> blacklist: undefined,
> 
> priorityId: undefined
> 
> },
> 
> tagTypeBlacklist: undefined,
> 
> eventModel: {
> 
> event\_category: “Elfsight Chat Widget”,
> 
> event\_label: “Open/Close Chat Widget”
> 
> }
> 
> }

The second

> {
> 
> pagePostType: “page”,
> 
> pagePostType2: “single-page”,
> 
> pagePostAuthor: “admin”,
> 
> event: “click”,
> 
> gtm: {
> 
> uniqueEventId: 13,
> 
> start: 1692181207572,
> 
> allowlist: undefined,
> 
> blocklist: undefined,
> 
> whitelist: undefined,
> 
> blacklist: undefined,
> 
> priorityId: undefined
> 
> },
> 
> tagTypeBlacklist: undefined,
> 
> eventModel: {
> 
> event\_category: “Open or Close All-in-one Widget”,
> 
> event\_label: “Open or Close All-in-one Widget”
> 
> }
> 
> }

Then when you click start chat and it opens up whatsapp it fires a third, which I was able to set up a trigger for the event label “Click to WhatsApp Chat”  
{  
pagePostType: “page”,  
pagePostType2: “single-page”,  
pagePostAuthor: “admin”,  
event: “click”,  
gtm: {  
uniqueEventId: 14,  
start: 1692181207572,  
allowlist: undefined,  
blocklist: undefined,  
whitelist: undefined,  
blacklist: undefined,  
priorityId: undefined  
},  
tagTypeBlacklist: undefined,  
eventModel: {  
event\_category: “Elfsight Chat Widget”,  
event\_label: “Click to WhatsApp Chat”  
}  
}

---

<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:** [August 16, 2023, 12:22pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/18 "2023-08-16T12:22:59Z")

</div>

Happy to hear that the code worked for you 🙂

However, I didn’t quite understand the additional info you’ve provided. Could you please elaborate on it?

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 16, 2023, 1:55pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/19 "2023-08-16T13:55:03Z")

</div>

I thought a video would be easier, hopefully this will help  
[https://vimeo.com/855010603/627acd883e](https://vimeo.com/855010603/627acd883e)

---

<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:** [August 16, 2023, 3:57pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/20 "2023-08-16T15:57:11Z")

</div>

Thanks!

I’ve shared this video with our devs. I’ll get back to you once I receive any reply from them 🙂

---

<div class="post-metadata">

**Author:** ![Damien\_Fegan](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/damien_fegan/32/4182_2.png) [@Damien\_Fegan](https://community.elfsight.com/u/Damien_Fegan)\
**Post date:** [August 16, 2023, 4:11pm UTC](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886/21 "2023-08-16T16:11:16Z")

</div>

You can mark it as complete as I’m able to track with what you have done.  
Thank you

[Next page](https://community.elfsight.com/t/help-tracking-click-on-whatsapp-button/13886.md?page=2)