Today, we assessed the current engagement with our website, and it comes as no surprise that we don’t have a significant amount of traffic yet. We will need to employ more SEO techniques. However, one issue we noticed is the lack of an overview of image downloads. Currently, our website only provides a direct download link without routing it through another page where we could potentially display additional ads or similar content. Perhaps it would be a better idea to implement such a setup. Nevertheless, considering the current design, it would still be beneficial to have visibility on the downloaded images for the sake of curiosity.
Google Analytics gtag()
As it turns out, solving this problem is relatively straightforward. All we need to do is identify the appropriate hook, and we can then send custom Analytics events. Here’s an example of how it can be done:
gtag('event', 'image_download', {
'event_category': 'Image',
'event_label': image.downloadUrl
});The gtag function is readily accessible since we initialized it in the index.html. However, for the React environment, there is likely a more suitable option called react-ga4. It’s important to mention that we have a new property set up in Google Analytics (GA), which already utilizes the GA4 version. While you can still utilize Universal Analytics, it is scheduled for decommissioning in the near future. Nonetheless, there is a library available specifically for Universal Analytics as well.
We removed the Google Analytics <scritpt> tag from the index.html and switched to this little helper:
ReactGA.event({
category: "Image Download",
action: "click image",
label: image.downloadUrl
});With Google Analytics we can programmatically capture data, which is pretty useful in an SPA world. We should then find the data in our dashboard soon.
Conclusion
Using custom Analytics events was a good thing, and we found that the experience of implementing it with the ReactGA helper library for tracking image downloads from www.usmalbilder.ch was quite straightforward.
Meanwhile my kids are trying out some of the AI generated coloring pictures. 🙂