53

My questions is, do you put Google Analytics Javascript code in the header or at the very bottom of the page (before </body>). I've heard people say it's best to put Google Analytics Javascript code at the very end of your html. Others say its best to put it in the header. Is there a best practice?

Tyler
  • 19,113
  • 19
  • 94
  • 151
  • related: http://stackoverflow.com/questions/143486/unobtrusive-javascript-script-at-the-top-or-the-bottom-of-the-html-code – ajax333221 May 23 '12 at 03:41

8 Answers8

82

Put it in your header. It's asynchronous so it won't block your page from loading and by placing it in your header you'll be more likely to get a accurate stats.

John Conde
  • 217,595
  • 99
  • 455
  • 496
  • Trouble is that the person may not even get a look at the page before the analytical stuff is done. Therefore the stats will be inaccurate. – Ed Heal May 23 '12 at 03:16
  • 7
    It's better to have a few false positives then many missed hits – John Conde May 23 '12 at 03:22
  • Is it a hit if the person has not seen the page? See https://developers.google.com/analytics/devguides/collection/gajs/gaTrackingOverview – Ed Heal May 23 '12 at 03:29
  • 7
    Google *requires* the Analytics tracking code to be in the `` tag if you want to use it to authenticate Google Webmaster Tools (for SEO and site analysis, etc.). That suggests to me, that would be the right place to do it from the outset. See http://support.google.com/webmasters/bin/answer.py?hl=en&answer=185871 – Chris Apr 26 '13 at 08:04
  • I think it's a hit and a bounce and you can use the analytics stats to track that. – Charlie Schliesser Jan 22 '14 at 23:09
  • 3
    Hey, guys. We are in 2020, this answer should be marked as deprecated. – AldorEla May 12 '20 at 15:15
  • 1
    @ElaAle Deprecating the answer w/o validation seems useless to me. It shows up on Google SERP, I think, there should be atleast a comment explaining why this answer is deprecated. – Jarmos Feb 21 '21 at 18:00
31

This what google says about it:

Once you find the code snippet, copy and paste it into your web page, just before the closing </head> tag*. If your website uses templates to generate pages, enter it just before the closing tag in the file that contains the section. For the best performance across all browsers we suggest you position other scripts in your site in one of these ways:

  1. before the tracking code snippet in the <head> section of your HTML
  2. after both the tracking code snippet and all page content (e.g. at the bottom of the HTML body)

and here comes the *:

*One of the main advantages of the asynchronous snippet is that you can position it at the top of the HTML document. This increases the likelihood that the tracking beacon will be sent before the user leaves the page. It is customary to place JavaScript code in the section, and we recommend placing the snippet at the bottom of the section for best performance.

guido
  • 18,864
  • 6
  • 70
  • 95
8

The difference is simple, and the answer depends of your needs Suppose someone clicked your site by mistake and close it really quick.

If the script is in the top, you have a visitor, If the script is in the bottom, you don't have a visitor.

I use it in the bottom, cause to me if someone don't look to my site, is not a visitor.

Edu Ruiz
  • 1,878
  • 1
  • 17
  • 27
  • 7
    Disagree. I would want to know that someone came and then "bounced". It may signify some problem with the page loading or whatever. In your example, you would not know at all. In Google Analytics, you can see what percentage of your traffic are "bouncers" and it is a very useful piece of information. – matt burns Jan 10 '14 at 14:14
  • 1
    Years and years later response @matt, I understand your point and depending on what you want to do with your data it really make a lot of sense, but I put performance first because a lot of my websites aren't much "data driven" and usually people just want to know how many visitors they had and don't really act on campaigns based on the user activity. – Edu Ruiz Aug 22 '18 at 20:48
  • 1
    Yeah, with the passing of the years, I can now see the argument both ways ;) I would also prioritise performance over slight inaccuracies in the analytics data. Although most sites could do with going on a diet first anyway and could get better performance gains elsewhere. (Using the async analytics is assumed ;) ) – matt burns Aug 23 '18 at 10:59
2

According to google Analytic

Where to Place the Tracking Code

The tracking code is designed to read data from your page after the content for the page has finished loading. For this reason, the snippet should be located just before the closing tag for your web page. Once the content for your page has loaded, the tracking code, when executed, reads the content for your page following the Document Object Model (DOM). All information relevant to tracking is then used to establish page information, set/update cookies, and to send the GIF request to the Google Analytics servers.

By placing the script at the end of the page body, you ensure that the tracking code is executed as the last element of the DOM. If a given page load is interrupted for some reason, it is possible that the GIF request for that page view will not be executed. However, should you place the tracking code at the top of the page, any load interruptions might result in incomplete or inaccurate reporting anyhow, since the tracking code relies on page data for its reports.

Additionally, the physical placement of the tracking code call at the bottom of the page is more effective than using an onLoad() function to call the tracking code. If you use onLoad() to execute the tracking code, execution relies on the event model for the browser instead of the DOM. In such a situation, should a remote image fail to load on a page, onLoad() will not be called, whereas the DOM for the page could still load completely.

Josh15
  • 21
  • 1
  • For those defending that code should be at the head, I mean, before close header tag should update their head and update their answer as well. It is not acceptable to advice someone to do your way while it is the not standard or best way. Standard and best way should be according to what service provider is advising not somehow how you feel or think .... – Josh15 Jun 20 '15 at 16:36
2

For best practices you must understand the new asynchronous code which clear most of the earlier page load and performance issues.
Although Google official recommendation says that it should be placed before the close of the <head> tag but there are few exceptions which are noteworthy.

  1. For using the code for general purposes code placement before the head tag is justified and works perfectly.
  2. But if there are events tracking or e-commerce conversion tracking and there are custom codes involved, then it is recommended to put it before the </body> tag to get the better results.

Note: There will still be discrepancies in the Search Console clicks and reals users with 10-20% but regular integration of Google Adwords it has shown 100% accuracy with precision so if you are using Google Adwords for your site try to integrate them all.
Also read Google Analytics Header or Footer

sachin arora
  • 41
  • 2
  • The "Note" section could use some editing for grammar. As is, it is not entirely clear what is trying to be conveyed. – SherylHohman Feb 02 '19 at 22:50
  • Checked with Grammarly but I got your point Sheryl thanks Also check more information about discrepancies here https://support.google.com/analytics/answer/1034383?hl=en – sachin arora Feb 05 '19 at 17:32
  • Sorry, I am trying.. I do not understand this `...the Search Console clicks and reals users with 10-20% but regular...` I cannot parse the long sentence at all, and particularly that part, into anything intelligible. Perhaps it's just me, sorry. Is there any other way to re-state it. Perhaps breaking it into separate sentences? There seem to be 3 or more distinct ideas here combined in a way that I just don't understand. I am a native speaker, and am usually able to even figure out what non-native speakers are trying to convey, but I'm at a true loss here. Thanks for your help. – SherylHohman Feb 08 '19 at 18:20
  • Maybe this? "There will still be discrepancies between the number of Search Console clicks, and the number of real users by about 10-20%. But with regular integration of Google Adwords, it has been shown that it is possible to achieve 100% accuracy. So if you are using Google Adwords for your site, try to integrate them all." Is that close to what you are trying to convey? – SherylHohman Feb 08 '19 at 18:26
  • Yes you need to connect analytics, Search console, and Google Adwords within same account for getting 100% accuracy otherwise you will se 10-20% discrepancy. They have to be connected within same Gmail account – sachin arora Feb 08 '19 at 19:14
1

Things changed over time as they evolved. On my GA account, as 2016, when I get the code they said:

This is the Universal Analytics tracking code for this property. To get all the benefits of Universal Analytics for this property, copy and paste this code into every webpage you want to track.

GA code

Use the code above to create a file named "analyticstracking.php", and include the file on each PHP template page. Add the following line to each template page immediately after the opening <body> tag:

<?php include_once("analyticstracking.php") ?>
Adrian P.
  • 5,060
  • 2
  • 46
  • 47
0

I would say it is best to put it into the footer - as it is best that the punter gets the whole page and has a chance to see everything. removes some of the possibility of getting false positives where the person has selected your site on error.

Ed Heal
  • 59,252
  • 17
  • 87
  • 127
0

I would put it in the footer, above the </body> tag, so that once the tracking code loads, the whole page has loaded for the analytics tracking code to track.

desbest
  • 4,746
  • 11
  • 51
  • 84
  • This is how i've always done it actually but i have seen a lot of people put it in the header also. – Tyler May 23 '12 at 03:10
  • 1
    Because they're using _asynchronous_ code, putting the tracking code in the header won't slow down the loading of the page. Normally javascript loads subsequently in order. Only 1 javascript can load at once. _(Also javascript takes hostage from the browser, so when the web browser is loading javascript, the web browser won't load anything else.)_ As their javascript is _asynchronous_, they can do that, and know that they're not slowing down their website in the process. – desbest May 23 '12 at 03:25
  • desbest it still has a slight negative impact to your page score. – Galactic Ranger Dec 06 '19 at 17:52