Include the tracking option

For Facebook, Analytics, GTM and others.

Or maybe add the possibility to assign events (onclick)

Folks, our former Wishlist portal, where our users shared their requests and suggestions, was transferred to this forum. You’re most welcome to vote, add new ideas, and leave your comments here — we surely will consider them all! :star_struck:

Original Votes: 7

Original comment from Diego transferred from the previous Wishlist portal:

Hello folks,

Thank you for submitting this feature request and for sharing your ideas!

We will definitely consider this option for the widget future updates, and if you come up with any other suggestions - please feel free to write them in the comments here. Your feedback is a huge help for our dev team :pray:t2:

Thank you!

Is there any update on whether we can add conversion tracking to the WhatsApp chat? It was requested some time ago but can’t see any updates on this as yet?

1 Like

Hello there @user372 :wave:

I am really sorry, but the conversion tracking option isn’t supported in our app. Once we receive any updates from our dev team, I’ll inform you here :slightly_smiling_face:

Just in case, I’d like to tell you that you can track clicks via Google Analytics or GTM.

Google Analytics:

Please add this part of the code to your website <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 </body> 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, '[class*="Bubble__BubbleComponent"]', {
        action: 'click',
        category: 'Open or Close WhatsApp Chat Widget',
        label: 'Open or Close WhatsApp Chat Widget'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp Chat']", {
        action: 'click',
        category: 'Click WhatsApp Chat',
        label: 'Click WhatsApp Chat'
    });
}, true);
</script>

In order to see the statistics on clicks, please go to the **Reports** tab of your Google Analytics dashboard


Here you can choose the report type: Realtime Report or Reports Snapshot

2.png


Just in case, we have an article that describes how to work with each of them - Google Analytics 4 (GA4): Where to find my events.


GTM:

This code 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
    });
  }
}
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 Like

Hi! I should place the second script in the header too, but below all?

1 Like

Hi @Yuri :wave:

Oh, I am sorry for missing that! The 2nd part of the GA code should be added before closing </body> tag :slightly_smiling_face:

Hi there, after adding the code, the event is not appearing on my GA and GTM as per shown. Can you please help to check if the code is correct? The code is inputted into my “header”

1 Like

As for the GTM code, it is placed in the custom css in my SS site but it shows error

Hi @Alex_Thng, happy to see you in our community! :raised_hands:t2:

I’ve checked the screenshots you provided (they were really helpful!) and this is what I’ve found:

  1. The closing tag </script> is missing in the first part of the code, please add it here:

  1. You mentioned that you’ve added the last script to custom CSS in your SS site, whereas it should be added to your WhatsApp Chat widget’s Custom JS field:

image

Could you please make these corrections and let me know if it helped? :slight_smile:

1 Like