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>