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>