View how many downloads

I want to be able to track how many times the file was downloaded

1 Like

Hi @Fabienny_Thielman :wave:

I agree that it would be awesome to track the number of PDF downloads right form the editor. We’ll strive to take this idea under consideration.

As for now, you can use the Google Analytics code to track the number of downloads. Please add this part of the code to your website :

<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 sendAnalyticsEvent(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) {
	if (event.target.classList.value.indexOf('embed-file-link') > -1) {
		const element = event.target || event.srcElement
		const findAncestor = (el, cls) => {
			while ((el = el.parentNode) && el.className.indexOf(cls) < 0) ;
			return el;
		}
		const parentBlock = findAncestor(element, 'embed-file-component');
		const infoBlock = parentBlock.querySelector('[class*="embed-file-name"]');
		const info = infoBlock.innerHTML;
		
		sendAnalyticsEvent({
			action: 'click',
			category: info,
			label: 'Elfsight File Embed'
		})
	}
}, true);
</script>

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