Adding analytics.js to Your Site

The analytics.js library is a JavaScript library for measuring how users interact with your website. This document explains how to add analytics.js to your site.

The JavaScript tracking snippet

Adding the following code (known as the "JavaScript tracking snippet") to your site's templates is the easiest way to get started using analytics.js.

The code should be added near the top of the <head> tag and before any other script or CSS tags, and the string 'UA-XXXXX-Y' should be replaced with the property ID (also called the "tracking ID") of the Google Analytics property you wish to track.

<!-- 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 <script> 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 'UA-XXXXX-Y' 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 JavaScript tracking snippet (the create and send commands) or adding additional code to track more interactions. However, you should not change the code that loads the analytics.js library or initializes the ga() command queue function.

Alternative async tracking snippet

While the JavaScript tracking snippet 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 tracking snippet 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 tracking snippet 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 tracking snippet capture?

When you add either of these tracking snippets 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 analytics.js does when creating a new tracker is used to determine things like the following:

  • 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 JavaScript tracking snippet can suffice, but in many cases there are additional questions you want answered about your users.

The guides on this site explain how to track 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.

The next guide in this series explains how analytics.js works.