How to track clicks in WhatsApp Chat via GTM or Google Analytics

This thread is a mess. Can someone tidy up and clarify how to track whatsapp using tag manager and analytics simply please.

Hi @Nick_Templeton :wave:

Sure!

  1. If you want to track your WhatsApp Chat widget via GTM, just add this code 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
    });
  }
}
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('[class*="Bubble__BubbleComponent"]')
  .then(() => {
    const addClickEvent = (el, label) => el.addEventListener('click', () => {
        sendAnalyticsEvent({
          action: 'click',
          category: 'Elfsight Chat Widget',
          label: label
        });
      });
    const clicker = (el, label, all = false) => {
      const addClickWithLabel = (el) => addClickEvent(el, label);
      
      if (all) {
        [...document.querySelectorAll(el)].forEach(addClickWithLabel);
      } else {
        addClickWithLabel(document.querySelector(el));
      }
    };

    clicker('[class*="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
    clicker('[class*="DefaultButton__DefaultButtonComponent-sc"]', 'Click Start Chat Button', true);
  });

  1. For tracking clicks on the Start Chat button using Google Analytics, please add this part of the code to your website’s <head>:
<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>

In the code above, you need to replace UA-ID with your actual website ID for Google Analytics. If you are using Google Analytics 4, you need to use G-ID instead of UA-ID (see screenshot). This article will help you find your ID - Find your Google tag ID.

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

<script>
  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, 'button[title="WhatsApp"]', {
        action: 'click',
        category: 'Click WhatsApp Chat',
        label: 'Click WhatsApp Chat'
      });
    },
    true
  );
</script>

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

Hi Max,
this is outdated or not?
How can i track the Conversion with Google Tag manager / GA4?
Do you have a tutorial for that?

1 Like

Hi there @user12028 :wave:

If you want to track conversions, the GTM code (1st code in this thread) should work perfectly fine for you.

You should add this code to the Custom JS field on the Appearance tab of your widget's settings:


In GTM, you just need to create a Custom Event trigger:




Check it out and let me know if it helped :slightly_smiling_face:

Hi Max,
i added the code under custom JS.
But it still dont work for me.

By Google tag manger i created a trigger with a event called click-start-chat-button.
Do i miss something?

1 Like

For open Close it work, but not for the click on chat button

1 Like

Got you!

I’ll check it with the devs and will get back to you a bit later :slightly_smiling_face:

Thank you for waiting @user12028 :wave:

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

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('[class*="Bubble__BubbleComponent"]').then(() => {
  const addClickEvent = (el, label) =>
    el.addEventListener('click', () => {
      sendAnalyticsEvent({
        action: 'click',
        category: 'Elfsight Chat Widget',
        label: label
      });
    });
  const clicker = (el, label, all = false) => {
    const addClickWithLabel = (el) => addClickEvent(el, label);

    if (all) {
      [...document.querySelectorAll(el)].forEach(addClickWithLabel);
    } else {
      addClickWithLabel(document.querySelector(el));
    }
  };

  clicker('[class*="Bubble__BubbleComponent"]', 'Open/Close Chat Widget');
  clicker(
    '[class*="MessageField__MessageButtonContainer-sc"]',
    'Click Start Chat Button',
    true
  );
});