Analytics for opens and clicks (also, pixel triggering for clicks)

Ask the Community General Questions
1

Use case: the widget is on a client’s website, directing users to the client’s whatsapp number.

Problem: the same whatsapp number is being used for other direct marketing campaigns, so the client can’t/won’t inform me how many of its clients are coming from the website.

Request:

  1. A simple analytics tab for tracking the number of times the widget is used (engaged, clicked) by visitors, each day.
  2. Firing a google/meta pixel conversion event (actually, a lead gen or form completion trigger) so that my marketing campaigns can be more optimized.
1 Like
3

Hey there @Lucio_Amorim :wave:

Glad to tell you that you can track clicks using our 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 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

1.png
1.png1192×813 91 KB


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.


As for the Meta pixel conversion event, we have a solution as well. Please add this part to your website’s <head>:

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
    n.queue=[];t=b.createElement(e);t.async=!0;
    t.src=v;s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)}(window, document,'script',
    'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'FBPx_ID');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
                src="https://www.facebook.com/tr?id=FBPx_ID&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

Do not forget to replace FBPx_ID to the actual ID in these 2 places:

image
image705×441 25.6 KB


And this part should be added to your website’s <body>:

<script>
  function eappsDispatchAnalyticsEvent(event, selector, config) {
    function sendEvent(config) {
      fbq('track', 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"]', {
      label: 'WhatsApp Chat Open/Close Button Click'
    });
    eappsDispatchAnalyticsEvent(event, "button[title='WhatsApp']", {
      label: 'WhatsApp Chat Button Click'
    });
  }, true);
</script>

Give it a try and let me know how it worked :wink:

1 Like