Best place to insert the Google Analytics code

html

async-loading

google-analytics

script-tag

byAlex Kataev·Nov 20, 2024

Insert the Google Analytics (GA) code right before the closing </head> tag utilizing an async attribute for better performance and efficient tracking. See the following example:

<head>
  <!-- ... -->
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID"></script>
  <!-- Over here! Google sees everything (swiftly) -->
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'YOUR_GA_ID');
    <!-- Getting loaded and keeping track, simultaneously. Couldn't we all learn from this script? -->
  </script>
  <!-- ... -->
</head>

Ensure you replace the YOUR_GA_ID with your personal unique identifier.

Essentials of async loading

For minimal blockage, utilize the async attribute in the <script> tag. It allows continuing parsing, thus not hindering the page load, while your GA script is being fetched.

Most optimal placement for Google's analytics.js or gtag.js is undeniably within the <head> tag. It guarantees the accurate capturing of every single pageview, even those that may not completely load.

Load and execution: set your priorities

To balance between script load time and site interaction, by applying async attribute in the <head>, we can prioritize loading while permitting user-friendly interaction. Importantly, script positioning influences tracking reliability.

Caching rewards

Since analytics.js is vastly cached, majority of your website's audience are going to load the script from the cache leading to increased load times and better user experience.

Clearing out trade-offs

Between accuracy of data and latency, one has to decide where they would like to place the analytics code in their HTML document. Usually, it's worth having your script in the <head> for more reliable data.

Deferred loading via getScript

To further optimize load times, you can defer loading using jQuery's getScript. Nonetheless, ensure that loading isn't deferred at the cost of losing important tracking information:

$(document).ready(function() {
  $.getScript("https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID", function() {
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', 'YOUR_GA_ID');
    <!-- We're delaying loading here, so take a number and line up! -->
  });
});