Analytics dashboard

Wishlist Event Calendar
1

Hi Guys,

previously, I’ve been using other apps to create “add to calendar” buttons that can be embedded on any website. These tools offer analytics dashboards that allow you to know how many people added the event to the calendar among other important data points like device type, time of the day, etc. It would be great if you could implement something similar to help us track what is happening with our event calendar and help us improve the quality of content. I think this is something that could benefit us both, you as a provider, increasing the value of your tool, and us, to have a better understanding of our audience and make our content more attractive for our them.

Thanks for listening!

Best,
Mauricio

2 Likes
2

Hi there, @user20175 :wave:

Thank you so much for adding your idea!

We agree that it would be great to see this info right in the dashboard. Let’s see if this idea catches on with the community :slightly_smiling_face:

As for now, our devs came up with a GA code for this case. Please add this part of the code to your website <head>:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-ID');
</script>

In the code above, you need to replace G-ID with your actual website ID for Google Analytics. This article will help you find your ID - Find your Google tag ID.

And this code should be added to the Custom JS field on the Settings tab of your widget’s settings:

function sendEvent(config) {
  if (typeof ga !== 'undefined') {
    ga('send', 'event', {
      eventAction: 'click',
      eventCategory: 'Event Calendar',
      eventLabel: config.label,
      deviceType: `${config.deviceInfo.type} - ${config.deviceInfo.model}`
    });
  }
  if (typeof gtag !== 'undefined') {
    gtag('event', 'click', {
      event_category: 'Event Calendar',
      event_label: config.label,
      deviceType: `${config.deviceInfo.type} - ${config.deviceInfo.model}`
    });
  }
}

function getDeviceInfo() {
  const userAgent = navigator.userAgent;

  let deviceType = 'Desktop';
  if (/Mobi|Android/i.test(userAgent)) {
    deviceType = 'Mobile';
  } else if (/Tablet|iPad/i.test(userAgent)) {
    deviceType = 'Tablet';
  }

  let deviceModel = 'Unknown';
  if (/iPhone/i.test(userAgent)) {
    deviceModel = 'iPhone';
  } else if (/iPad/i.test(userAgent)) {
    deviceModel = 'iPad';
  } else if (/Android/i.test(userAgent)) {
    const androidModelMatch = userAgent.match(/Android.*;\s([^;]+)\sBuild/i);
    if (androidModelMatch && androidModelMatch[1]) {
      deviceModel = androidModelMatch[1].trim();
    }
  } else if (/Windows NT/i.test(userAgent)) {
    deviceModel = 'Windows PC';
  } else if (/Macintosh/i.test(userAgent)) {
    deviceModel = 'Mac';
  } else if (/Linux/i.test(userAgent)) {
    deviceModel = 'Linux PC';
  }

  return {
    type: deviceType,
    model: deviceModel
  };
}

function isHit(e, selector) {
  return e.target && e.target.closest(selector);
}

const deviceInfo = getDeviceInfo();

document.addEventListener('click', (e) => {
  if (isHit(e, '.eapp-events-calendar-drop-down-item')) {
    return sendEvent({ label: `${e.target.textContent}`, deviceInfo });
  }

  if (isHit(e, '.eapp-events-calendar-popup-time-link')) {
    return sendEvent({ label: 'Add to Calendar', deviceInfo });
  }
});

This way, you’ll see the info about clicks on Add to Calendar button and its dropdown option with the device type people used when clicking.

Give it a try and let me know if it helped :slightly_smiling_face:

1 Like
3

Hi Max,

thank you very much for the instructions. This is also a good solution to gain some insights.

I have two questions regarding this:

  1. in the code that I have to add to my website, I see the G-ID two times, one on the first line and one in the sixth line. Do I need to replace it with the measurement ID of my GA4 account in both lines?
  2. So this means that if I have 5 different widgets working on different pages of my website, I have to add the JS code to each one of them, right?

And could you please indicate how I can look for these data on GA4?

Best and thank you once again!

1 Like
4

Hi there, @user20175 :wave:

Yep, G-ID should be replaced in both lines and the 2nd part should be added to the Custom JS section of all widgets.

This article explains where you can find the events on GA4 - Google Analytics 4 (GA4): Where to find my events - Elfsight Help Center.

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