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

Ask the Community General Questions
1

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

3

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: