Web
Analytics Made Easy - StatCounter

WordPress: Install Google Analytics Code In The Header

 

For many, many years, I have always installed the Google Analytics or for that matter any analytics code in the bottom of the Body Tag or sometimes in within the Footer Tags.

This was how I had learned to perform this procedure years ago.
This applied to any website platform that I used, whether it was a static or a CMS website.

<!-- analytics code -->
<body>
<script>
        ! function(e, a, t, n, c, g, s) {
            e.GoogleAnalyticsObject = "ga", e.ga = e.ga || function() {
                (e.ga.q = e.ga.q || []).push(arguments)
            }, e.ga.l = 1 * new Date, g = a.createElement("script"), s = a.getElementsByTagName("script")[0], g.async = 1, g.src = "//www.google-analytics.com/analytics.js", s.parentNode.insertBefore(g, s)
        }(window, document), ga("create", "UA-36102871-1", "islandwebtek.com"), ga("send", "pageview")
    </script>
</body>
<!-- Before closing body tag -->

Since then, I have come across Google Analytics Support Documents which recommends inserting the code inside the Head Tag.
Google Support [1]
 

So your analytics code should look like this (static website example):

<!-- analytics code -->
<head>
<script>
        ! function(e, a, t, n, c, g, s) {
            e.GoogleAnalyticsObject = "ga", e.ga = e.ga || function() {
                (e.ga.q = e.ga.q || []).push(arguments)
            }, e.ga.l = 1 * new Date, g = a.createElement("script"), s = a.getElementsByTagName("script")[0], g.async = 1, g.src = "//www.google-analytics.com/analytics.js", s.parentNode.insertBefore(g, s)
        }(window, document), ga("create", "UA-36102871-1", "islandwebtek.com"), ga("send", "pageview")
    </script>
</head>
<!-- Before closing head tag -->

Misunderstandings
Google analytics will work no matter where you place your code:

  • Header
  • Body
  • Footer

But for the most accurate and complete data feedback it works best if inserted into Head Tags.

Advantages

 

1) More accurate readings

It is mainly because JavaScript snippets are triggered in the order they are embedded in your page. Your page may prevent running your footer scripts due to other JavaScript errors or performance issues of other scripts/components. [MonsterInsights] [2]

2) Prevent Multiple, Half, and Wrong Tracking [3]

  • Double or Triple Tracking – firing multiple hits on each page load.
  • Half Tracking – code may not fire at the right time, or not at all.<.li>
  • Wrong Tracking – incorrect page load information, or ecommerce transaction.

3) Doesn’t Decrease Page Load Performance
With tracking code in the Header, it allows the other JS scripts to run asynchronously (at the same time)
In other words, it means it won’t affect page load as much as the footer (if script placed in the footer).

Installing Code In WordPress

 

There are three ways you can install the analytics script in the Header of WordPress:

1) Some themes like Divi (Elegant Themes) provide a field to install the code:
If you use a page builder, your theme or plugin may have an area to insert your analytics code.
Normally this code will remain during updates.

2) Using a plugin
In this example, I will be using a plugin by MonsterInsights.
This install pertains to all WordPress projects.

3) Manually inserting the code in the Head Tags inside the header.php file.
There are several ways of accomplishing this, but I will not go into this method.
The reason is that every time you perform a theme or core update, you will lose your analytics code.
You will then have to reinstall the scripts manually, again and again.

References

 

1) Set Up The Analytics Code Google Suport

2) Should You Put Google Analytics Code in WordPress Header or Footer? MonsterInSights Jan 2, 2019

3) AUDIT THIS: WHERE SHOULD YOUR GOOGLE ANALYTICS CODE GO? WHY DOES IT MATTER? SeerInterActive


Gerald Watanabe
Islandwebtek



Divi WordPress Theme




Share This