Google Map Click Analytics

Ask the Community General Questions
1

Would like the ability to track user clicks on the various Google map pinpoints and URL clicks within the map pinpoints.

1 Like
2

Hi @Monica :wave:

We are so happy to see you back!

Let me speak with our development team to check if anything can be done. I will get back to you as soon as I receive any news :slightly_smiling_face:

3

@Monica Thank you for waiting!

Happy to tell you that our devs have prepared a Google Analytics code for you. 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 isHitClass(e, selector) {
  return e.target && e.target.closest(selector);
}
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 clickToMarker(event) {
  var isClickToMarker = isHitClass(event, 'div[title][role="button"]');
  if (isClickToMarker) {
    setTimeout(function () {
      var popup = document.querySelector(".eapps-google-maps-marker");
      if (popup) {
        var titleElement = document.querySelector(
          ".eapps-google-maps-marker-title"
        ).innerText;
        var address = document.querySelector(
          ".eapps-google-maps-marker-info-item-text[title]"
        ).innerText;
        var title = titleElement || address;
        sendEvent({
          action: "click",
          category: "Click Google Maps",
          label: "Marker: ".concat(title)
        });
      }
    }, 300);
  }
}
function clickToLinkOnMarker(event) {
  var isClickToLink = isHitClass(event, ".eapps-google-maps-marker-content");
  if (isClickToLink) {
    sendEvent({
      action: "click",
      category: "Click Google Maps",
      label: "Link: ".concat(event.target.href)
    });
  }
}
document.addEventListener(
  "click",
  function (event) {
    clickToMarker(event);
    clickToLinkOnMarker(event);
  },
  true
);
</script>

Check it out and let me know how it worked :wink:

4

Hi Max! Is this for tracking clicks on the google map?

5

It’s for tracking clicks on map markers and URL clicks within map markers, as you’ve requested :slightly_smiling_face:

6

Thanks Max! And how would we access this information on our GA?

1 Like
7

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.4 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 :blush: