ckportfolio.com - Google Analytics

Google Analytics

A quick note before before we begin

Google Analytics is currently in the process of introducing a new way to activate and integrate its code snippet to a select group of users. This means that your account may not necessarily qualify for the new approach and that you may encounter a different onboarding experience. To mitigate confusion, Google recently released a step-by-step guide introducing its integration process, and I recommend that you review this guide at https://analytics.google.com/analytics/academy/course/6.

Enabling Google Analytics

Visit analytics.google.com to activate access to Google Analytics. If you are logging in for the very first time, you will be greeted with the following image:

Upon entering the signup form, feel free to include as much information as possible. Note that the "Website URL" does not have to a real URL, and that you can always come back to modify this value:

This effectively creates a "data stream," which serves as a direct line of communication between the web browser accessing our websites and the Google Analytics server. You can refer to a section called "Tagging Instructions" to retrieve the code snippet:

Copy the provided code, and ensure that each web page contains the snippet in the <head> section:

The website should be now fully tracked by Google Analytics. You can verify this by visiting the website on multiple (different) browsers your local machine, and checking the "Real-Time" tab:

If you can verify that the number rises above 0, we can confirm that Google Analytics is indeed active. Not working? This may be due to delay in Google's server, and you may safely continue on if you can confirm that the code is placed correctly. Upon verifying that the code snippet has been inserted correctly, go ahead and ensure that all three files (index.html, about.html, and contact.html) are equipped with it.

Screencast Recording

https://drive.google.com/open?id=1Fz5IgNYPhBz_347YzhuOa4bisOHbf9-_

Code Sample: index.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=129">
                <h1>Welcome</h1>
                <p>John Doe is a Toronto-based creative.</p>
            </div>
        </div>

    </body>
</html>
Fin