Track map events in Google Analytics (5 minutes)

Embed the map with an id

Embed the map and give the element an id so JavaScript can target it — here my-map:

<mapplic-map
	id="my-map"
	data-json="https://mapplic.com/getMapData?id=6AAA3HVY6u05TYjJvG42"
><script type="text/javascript" id="mapplic-script" src="https://mapplic.com/mapplic.js"></script></mapplic-map>

Wait for the map to be ready

The store that exposes the event API becomes available once the mapReady event fires on the element. Attach a listener and read the store inside it:

const map = document.getElementById('my-map');
 
map.addEventListener('mapReady', () => {
	const store = map.store;
	// event registration goes here
});

Forward map events to Google Analytics

Register an event listener on the store and pass each event to gtag. Prefixing the names with mapplic_ keeps the map’s events easy to find in your GA data:

map.addEventListener('mapReady', () => {
	map.store.getState().registerEventListener((name, data) => {
		gtag('event', `mapplic_${name}`, data);
	});
});

Two events reach GA4:

Verify the events

Interact with the map — open a few locations, toggle a group filter — and check that the mapplic_location and mapplic_group events arrive in your GA4 property’s realtime or debug view.