How to Add Google Analytics Tracking to Site with JavaScript

The analytics.js library (also known as “the Google Analytics tag”) is a JavaScript library for measuring how users interact with your website. This document explains how to add the Google Analytics tag to your site.

The Google Analytics tag

The Google Analytics tag should be added near the top of the `` tag and before any other script or CSS tags, and the string 'GA_MEASUREMENT_ID' should be replaced with the property ID (also called the “measurement ID”) of the Google Analytics property you wish to work with.

<!-- 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');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->

The above code does four main things:

1. Creates a `` element that starts asynchronously downloading the analytics.js JavaScript library from https://www.google-analytics.com/analytics.js
2. Initializes a global ga function (called the ga() command queue) that allows you to schedule commands to be run once the analytics.js library is loaded and ready to go.
3. Adds a command to the ga() command queue to create a new tracker object for the property specified via the 'GA_MEASUREMENT_ID' parameter.
4. Adds another command to the ga() command queue to send a pageview to Google Analytics for the current page.

Custom implementations may require modifying the last two lines of the Google Analytics tag (the create and send commands) or adding additional code to capture more interactions. However, you should not change the code that loads the analytics.js library or initializes the ga() command queue function.

Alternative async tag

While the Google Analytics tag described above ensures the script will be loaded and executed asynchronously on all browsers, it has the disadvantage of not allowing modern browsers to preload the script.

The alternative async tag below adds support for preloading, which will provide a small performance boost on modern browsers, but can degrade to synchronous loading and execution on IE 9 and older mobile browsers that do not recognize the async script attribute. Only use this tag configuration if your visitors primarily use modern browsers to access your site.

<!-- Google Analytics -->
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<!-- End Google Analytics -->

What data does the Google Analytics tag capture?

When you add either of these tags to your website, you send a pageview for each page your users visit. Google Analytics processes this data and can infer a great deal of information including:

• The total time a user spends on your site.
• The time a user spends on each page and in what order those pages were visited.
• What internal links were clicked (based on the URL of the next pageview).

In addition: The IP address, user agent string, and initial page inspection that analytics.js performs when creating a new tracker object is used to determine things like:

• The geographic location of the user.
• What browser and operating system are being used.
• Screen size and whether Flash or Java is installed.
• The referring site.

Next steps

For basic reporting needs, the data collected via the Google Analytics tag can suffice, but in many cases there are additional questions you want answered about your users.

The guides on this site explain how to measure the interactions you care about with analytics.js, but before implementing a particular feature, it’s highly recommended that you read the guides listed under the Fundamentals section in the left-side navigation. These guides will give you a high-level overview of the analytics.js library and help you better understand the code examples used throughout the site.

Thank for reading !

#javascript #css #googleanalytics #webdev