Google Tag Manager Whatsapp Widget Tracking

Ask the Community General Questions
1
  • Issue description:

I have the following issue with Elfsight’s Whatsapp Widget:
I’d like to track clicks on ‘Auf Whatsapp Chatten’ with Google Tag Manager. I am not using Google Analytics.
So far multiple attempts have ended in failure.

What I’ve done:

I have a custom Trigger with elfsight-form-submit

Added JS Code to the widget itself:

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

When using the GTag Assistant, I do not see anything pushed, event or data-layer wise.

2 Likes
3

Hi there, @Akram_Kefli and welcome to the Community :waving_hand:

Here is a slightly adjusted JS code:

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-sc"]',
        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
        });
      }
    });
  },
  { capture: true }
);

Please try it out and let me know if it worked :wink:

1 Like