Widget user data insights

Wishlist Pricing Table
1

We want more in-depth metrics and insights on how users visiting our website are interacting with the widget. Metrics detailing where users are clicking and how long they are staying on the page would be especially useful.

These metrics would help us understand the impact of the widget and would encourage us to use it more.

2 Likes
2

Hi there, @user12251 :waving_hand:

Thanks for sharing your idea with us!

I agree that it would be great to pull this info right to the dashboard. If this request gets more votes, we’ll try to consider it in the future :slightly_smiling_face:

As for now, you can track clicks on the column buttons using 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=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 then just add the rest of the script right before closing </body> tag:

<script>
  const withColumnTitle = true;
  const withColumnNumber = true;
  const withButtonLabel = true;

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

  document.addEventListener("click", function (event) {
    let eventLabel = "";
    const button = event.target.closest(
      ".es-column-element.es-button-container button",
    );

    if (button) {
      const column = button.closest(".es-column-container");

      if (withColumnNumber) {
        const columnNumber =
          Array.from(column.parentNode.children).indexOf(column) + 1;

        eventLabel += `Column Number: ${columnNumber}`;
      }

      if (withColumnTitle) {
        const columnTitle = column.querySelector(
          ".es-title-container .es-title",
        ).textContent.trim();
        eventLabel += eventLabel !== ""
          ? `; Column Title: ${columnTitle}`
          : `Column Title: ${columnTitle}`;
      }

      if (withButtonLabel) {
        const buttonLabel = button.textContent.trim();
        eventLabel += eventLabel !== ""
          ? `; Button Label: ${buttonLabel}`
          : `Button Label: ${buttonLabel}`;
      }

      sendEvent({
        action: "click",
        category: "Elfsight Pricing Table",
        label: eventLabel.replaceAll("\n", ""),
      });
    }
  }, true);
</script>

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

Try it out and let us know if it worked :slightly_smiling_face:

1 Like