Mouse pointer click tracking

Ask the Community General Questions
1

Good morning, I need to track clicks on each marker in my store locator. Is there a way to do this? If so, could you show me how? Thank you

3

Hi there, @Pracal_Srl :waving_hand:

Our devs will try to create a code for tracking clicks via Google Analytics. I’ll report back once the solution is ready :slightly_smiling_face:

4

Hi there, @Pracal_Srl :waving_hand:

I am happy to inform you that our developers 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=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 script was placed in the Custom JS field on the Settings tab of your widget’s settings:

const locations = {
  "b5050aff-e7a4-4b01-bd47-f15480e5bfc5": {
    "name": "Sescotec Srl",
    "address": "Via P. Solinas, 11, 07043 Bonnanaro SS, Italia"
  },
  "a1c4cfa1-2860-478b-a58a-f923bd1fe69b": {
    "name": "Radu Serramenti",
    "address": "Via Piossasco, 78, 10090 Bruino TO, Italia"
  },
  "81e4f2fc-1a00-4ba7-a3a9-8a987a457ddf": {
    "name": "Tech International Srl",
    "address": "Via Boschetto, 9, 23880 Casatenovo LC, Italia"
  },
  "a356028d-34e3-4af1-9888-85074be0139d": {
    "name": "Non Conventional House",
    "address": "Viale Giovanni Capreoli, 105, 73037 Poggiardo LE, Italia"
  },
  "21d97024-5d9c-4436-80cf-a4d6284e74d2": {
    "name": "CS SISTEMI",
    "address": "Via Po, 3/A, 10090 Castiglione Torinese TO, Italia"
  },
  "fde334ad-7142-4c0c-b718-bd8443202e54": {
    "name": "Dolermo Avvolgibili s.r.l",
    "address": "Via Antonio Cecchi, 34, 16129 Genova GE, Italia"
  },
  "82eeb593-b787-4082-948d-8f182446d9fc": {
    "name": "TECNODOOR porte blindate",
    "address": "Via dei Colli, 3, 31051 La Bella-ligonto TV, Italia"
  },
  "9c71ca4d-2211-45b2-b558-fa3f95c8f548": {
    "name": "Albaceramiche Srl",
    "address": "Via Oriago, 115, 30174 Venezia VE, Italia"
  },
  "11a51da0-40e6-4cad-aefd-1b0a683c41fc": {
    "name": "Bosetti Serramenti",
    "address": "Via Madonnina, 11, 25018 Montichiari BS, Italia"
  },
  "fe8626d7-4ecb-41f6-9a1f-1a3282d3e085": {
    "name": "Tende da sole Lucatelli Luigi",
    "address": "Via Augusto Dulceri, 48, 00176 Roma RM, Italia"
  },
...
};

function eappsDispatchAnalyticsEvent(event, selector, config) {
  function sendEvent(config) {
    if (typeof ga !== "undefined") {
      ga("send", "event", {
        eventAction: config.action,
        eventName: config.name,
        eventAddress: config.address,
      });
    }
    if (typeof gtag !== "undefined") {
      gtag("event", config.action, {
        event_name: config.name,
        event_address: config.address,
      });
    }
  }

  function isHitClass(e, selector) {
    const isHit = e.target && e.target.closest(selector);

    return isHit;
  }

  if (isHitClass(event, selector)) {
    sendEvent(config);
  }
}

document.addEventListener(
  "click",
  function (event) {
    const marker = event.target.closest('.maplibregl-marker');

  if (!marker) {
    return;
  }

  const locationIdClass = marker.classList[0];
  const locationId = locationIdClass.replace('elfsight_map_1_', '');
  const {name, address} = locations[locationId];
    
    eappsDispatchAnalyticsEvent(
      event,
      '.maplibregl-marker',
      {
        action: "marker-click",
        name,
        address,
      }
    );
  },
  true
);

This article explains where you can find info about clicks: Tracking Events in Google Analytics 4 - Elfsight Help Center

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