How to track clicks in WhatsApp Chat using GA or GTM

Ask the Community General Questions
1

I’m following this guys, max could you tidy the script and instructions up here - for everybody else?

2 Likes
3

Hi there @Nick_Templeton :wave:

In the previous thread, there were cases with the individual peculiarities, that’s why the codes didn’t work in some cases. I’ve moved your comment to a separate thread to avoid any confusion.

  1. For tracking clicks via 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 </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/Close WhatsApp Chat Widget',
        label: 'Open/Close WhatsApp Chat Widget'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp']", {
        action: 'click',
        category: 'Click WhatsAppChat',
        label: 'Click WhatsAppChat'
    });
}, true);
</script>

  1. To track clicks via GTM, please follow these steps:
Adding the code

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

image
image375×819 20.3 KB

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
        });
    }
}

document.addEventListener('click', function (event) {
    const matchingItems = [
        {
            selector: '[class*="Bubble__BubbleComponent"]',
            label: 'Open/Close Chat Widget'
        },
        {
            selector: '[class*="ChatButton__DefaultButtonComponent-sc"]',
            label: 'Click Start Chat Button'
        },
    ];

    matchingItems.forEach((item) => {
        const match = event.target.closest(item.selector);

        if (match) {
            sendAnalyticsEvent({
                action: 'click',
                category: 'Elfsight Chat Widget',
                label: item.label
            });
        }
    });
});

Creating triggers
  1. Click on New in your GTM account:

83eaf3e8ee6896cc0be63f11a2bb933c.png

  1. Proceed to Trigger Configuration tab:

4197103dc0c6ccd7a331c4bfae338ef5.png

  1. Choose Custom Event from the list:

a0d112757876941fcb4c0a70f3ca60d8.png

  1. Give the name to the event and save it after:

9e74a4172dd95feb6c2f12a9ffde8d2c.png


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

2 Likes
4

Is this instead of the GA TAG? or aditional code?

Thanks in advance!

1 Like
5

Hi there @Alberto_Lung1 :wave:

If you mean tracking clicks via GTM, it is one of 2 possible options. Thus, you can track clicks either via Google Analytics or GTM :slightly_smiling_face:

6

The google analytics, I bealive it is : G-L92LM1S617 With ** ** or without?

Thanaks a lot

1 Like
7

Without ** **. I’ve adjusted it in the code to make it more transparent :slightly_smiling_face:

8

Hi, i’v added the code as explained in step 1. But i see nothing events on a nalytics interface.

the site is: A Fáisca - Aulas Particulares

Am I missing anything ]

1 Like
9

Hi @Alberto_Lung :wave:

Here, you should remove the asterisk (** **) and replace UA-ID with your actual ID as you’ve done in the 1st line of the code:

image
image1073×688 52.9 KB


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

10

All working great!

2 Likes
11

A post was split to a new topic: WhatsApp Chat analytics stopped working