Assistance with Tracking Interactions on All-in-One Chat Widget

Ask the Community General Questions
1

Hello Elfsight Support Team,

I hope this message finds you well. I am using the All-in-One Chat widget from Elfsight on my website, and I would like to track user interactions, specifically:

  1. When users click on the chat pop-up to open it.
  2. When users select any options within the chat widget.

Could you please guide me on how to set up tracking for these actions? I am using Google Analytics (GA4) and Hotjar for tracking purposes. If there are specific steps or any JavaScript code that I need to implement, your detailed guidance would be greatly appreciated.

Website URL: https://www.aestheticenvy.com/

Thank you for your assistance!

Best regards,
Naman

1 Like
3

Hey there, @user15201 :wave:

Glad to say that you can do this with the Google Analytics code. 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 All-in-one Widget',
        label: 'Open or Close All-in-one Widget'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='Instagram']", {
        action: 'click',
        category: 'Click Instagram Chat',
        label: 'Click Instagram Chat'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp']", {
        action: 'click',
        category: 'Click WhatsApp Chat',
        label: 'Click WhatsApp Chat'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='Call']", {
        action: 'click',
        category: 'Click Call',
        label: 'Click Call'
    });
   eappsDispatchAnalyticsEvent(event, "button[title='SMS']", {
        action: 'click',
        category: 'Click SMS Chat',
        label: 'Click SMS Chat'
    });
   eappsDispatchAnalyticsEvent(event, "button[title='Open in Google Maps']", {
        action: 'click',
        category: 'Click Open in Google Maps',
        label: 'Click Open in Google Maps'
    });
   eappsDispatchAnalyticsEvent(event, "button[title='Schedule Consultation']", {
        action: 'click',
        category: 'Click Schedule Consultation',
        label: 'Click Schedule Consultation'
    });
}, true);
</script>

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