HTML Template with Event Tracking

This example shows you how to implement the code I discuss in my posts ‘Building A Landing Page Template’ and ‘Tally Clicks By Name With Google Analytics’.

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- meta -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    
    <!-- css -->
    <link href="css/index.css" type="text/css" rel="stylesheet" media="all">
    
    <!-- favicon -->
    <link rel="shortcut icon" href="img/favicon.ico" />
    
    <!-- the dark side -->
    <meta name="robots" content="noindex, nofollow, noarchive, nosnippet">

    <!--[if lt IE 9]>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->

    <!-- Google Analytics -->
    <script>
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        // replace UA-XXXXX-Y with your ID
        ga('create', 'UA-XXXXX-Y', 'auto');
        
        // optional: give the page a custom name
        // ga('set', 'page', '/new-page.html');

        ga('send', 'pageview');

    </script>
    <!-- End Google Analytics -->

</head>
<body>

    <h1>Basic template with tracking</h1>
    <p>Today is <script>printDate()</script></p>
    <p><a href="#" class="trackingLink">This is a link.</a></p>
    


<!-- ========================================== -->
<!-- scripts -->

<!-- function -->
<!-- display todays date -->
<script>
    function printDate() {
         
        // store the words for days and months
        var days =  ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        var months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"); ]

        // get the value of today's date
        var now = new Date();
         
        // write today's date
        document.write(dayNames[now.getDay()] + ", " + monthNames[now.getMonth()] + " " + now.getDate() + ", " + now.getFullYear());
         
    }
</script> 
<!-- end displayDate() -->


<!-- click event tracking -->
<script>
    
    // gets all elements with class name 'trackingLink'
    // adds tally function to clicks
    document.getElementsByClassName('trackingLink').addEventListener('click', tally);

    // the tally function itself
    // make sure to update the campaignName
    function tally(linkName) { ga("send", "event", "campaignName", "click", linkName); }
</script>

<!-- end scripts -->
<!-- ========================================== -->

</body>
</html>

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.