While Google Analytics may be actively monitoring the website, it also provides us a flexible option of tracking individual events that occur in the website. For instance:
Using custom code, we can track all the clicks made to the email link, even if that link does not redirect to any web page. Refer to the following documentation:
https://developers.google.com/analytics/devguides/collection/gtagjs/events
Note that this jumps into the realm of Javascript, and that you are not expected to fully learn this concept. What we can take away is the following snippet:
The above code sends a customized signal to Google Analytics, and this can be implemented this way:
Placing a version of the above snippet under the "onclick" attribute simply allows us to broadcast a tracking event for Google Analytics to store. This can be accessed in "Events" under "Behavior":
All done: we now have the capacity to build larger, more complex websites complete with user traffic monitoring.
https://drive.google.com/file/d/12VBpxMT5svEQlT7cTo-XZo0boMLNu1xi/view?usp=drive_link
(Updated October 31, 2023)
contact.html
<html>
<head>
<link href="https://fonts.googleapis.com/css?family=PT+Serif|Roboto:400,700" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-75268709-7"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-75268709-7');
</script>
</head>
<body>
<div id="container">
<div id="title">John Doe</div>
<div id="menu">
<a href="index.html">Home</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</div>
<div id="content">
<img src="https://picsum.photos/800/300/?image=250">
<h1>Contact</h1>
<p>
John Doe can be reached at
<a href="mailto:john@doe.com" onclick="gtag('event', 'email')">
john@doe.com
</a>.
</p>
</div>
</div>
</body>
</html>