ckportfolio.com - Event Tracking (Advanced)

Event Tracking (Advanced)

Tracking Individual Clicks

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.

Screencast Recording

https://drive.google.com/file/d/12VBpxMT5svEQlT7cTo-XZo0boMLNu1xi/view?usp=drive_link

(Updated October 31, 2023)

Code Sample: 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>
Fin