Google Analytics WordPress

How to Add Google Analytics Tracking Code to Your WordPress Site Without a Plugin

Google Analytics WordPress

When you are running your own site (specifically a WordPress site for this article), it is especially important to get analytic data about your visitors so that you can know what is working for you, what isn’t, and how you can improve a certain aspect of your site such as a specific page.

**Note: If you don’t have a WordPress site yet, you can get started by reading my post on How to Start a Blog with HostGator.

This is why Google Analytics was built -- to help you improve your site by giving you access to all sorts of statistical information about the visitors of your site.

So, why Google Analytics?

  • It's FREE and very easy to implement
  • You get to know your audience (visitors to your site)
  • You get to see exactly what they're doing -- what pages they're visiting, how long, how many pages per session, etc.
  • Many other stats about your visitors -- what browser were they using? what mobile device? what was their screen resolution? what country are they from? what city? what language are they set to use?
  • Real-time monitoring -- how many visitors are on your site at that exact moment
  • Much, much more

Okay, enough about how great and wonderful it is. Let's just get down to how to add Google Analytics code to your WordPress site without needing to use a plugin. Now, don't get me wrong, there are plenty of plugins out there to do this, but I don't see the use in installing another plugin on your site which is yet another plugin you have to maintain when adding the code yourself is a few minute process if you know what you're doing once you're signed up and have your code ready. Here are the steps:

  1. First, go to the Google Analytics home page. In the upper right, you'll see that it says "Sign in or create an account". If you have a Google account set up, you may already be signed in. Or, if you do have one that you'd like to use but aren't signed in, sign in using that one.
  2. Set up your account properties. This should be pretty self-explanatory and I won't get into big detail here. Basically you just go through your account properties specifying your Account Name you want, what website you'll be using for Google Analytics, and so on.
  3. Create a new JavaScript file on your server to hold your code. Once you have finished the account properties section and Google knows what site you will be using their code on, they will provide you with a block of JavaScript code that looks like the code block below:
    <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','//www.google-analytics.com/analytics.js','ga');
    
    ga('create', '<your unique tracking code>', 'auto'); ga('send', 'pageview');
    </script>
    Obviously, the 3rd line from the bottom that has the tag <your unique tracking code> will be the specific tracking code that Google generated for you. Other than that, though, the rest should be the same.

    Now, it's just a matter of getting this code onto your WordPress site. There are a few ways you can do this (as there are many tutorials out there explaining different ways). I'm going to teach you how I did it which I believe is the best way to incorporate it into your site.

    This is easiest if you go into the BACK end of your site. You will be logging into your main host site (whether that be HostGator, BlueHost, or whatever hosting company you're using). After you are logged into your main host site, click on "File Manager". HostGator's file manager is shown here:
    HostGator File Manager
    Once you click on "File Manager", it may ask you which directory you want to go to. Choose "Web Root (public_html/www)" and click "Go".

    Now, path out to your theme's folder. If you use a child theme (which you should be), path out to that theme's directory. The folder should be found out in wp-content/themes/<your theme name>. For example, I use the "Responsive" theme, so my parent theme's folder is located at wp-content/themes/responsive and my child theme's folder is located at wp-content/themes/responsive-childtheme-master. Once in the appropriate folder, you might see some files already out there such as "style.css", "functions.php", etc. Here is where you will be creating a new file where you'll paste your Google Analytics tracking code into.
    HostGator New File Button
    Next, hit the "New File" button shown above. A dialog pops up telling you to specify a file name. Give this file some descriptive name. I named mine analyticstracking.js. MAKE SURE you end your filename with .js so that the server knows it's a JavaScript file. Then, also make note of the line below it specifying where the new file will be created (mainly make sure that it is being saved to your child theme folder). Then, hit the "Create New File" button.

    The file will be created and will show up with the rest of the files on your screen. Right click your newly created file and choose "Edit". A box will pop up saying you should back up your file in case anything goes wrong. But, this is a brand new file so there is nothing to back up. Hit "Edit" again and you should be presented with a very basic, ugly looking text editor within your browser. With this blank white page up, paste in the code that Google gave you. However, you SHOULD NOT include the <script> and </script> tags that are at the beginning and the end of the code because since your file is set as a JavaScript file, the code doesn't need to be specified between script tags. So, you would just paste the following code in (with your unique tracking ID plugged in of course):
    (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','//www.google-analytics.com/analytics.js','ga');
    
    ga('create', '<your unique tracking code>', 'auto'); ga('send', 'pageview');
    After that, just hit "Save Changes" in the upper right. That file is done!
  4. Register and enqueue your new script file. The last step is to just register and enqueue your script file now.

    This part is explained with more detail in my How to Implement Prism.js Syntax Highlighting Into Your WordPress Site post. So, check that out if you want more detail.

    Anyway, back within your themes folder where you just put your analyticstracking.js file (or whatever you called it), you should also see a "functions.php" file in there. Right click and edit that file. However, YOU MUST be editing your child theme's functions.php file because if you modify your parent theme's functions.php file, you will lose all your changes whenever your theme updates.

    Once you have your functions.php file open for edit, copy and paste the code below into that file.
    <?php
    
    // Function to add analyticstracking.js to the site function add_google_analytics() { // Register analyticstracking.js file (Google Analytics) wp_register_script( 'google-analytics', // handle name referred to in the "wp_enqueue_script" call below get_stylesheet_directory_uri() . '/analyticstracking.js', // location of your file false, // no dependencies '1.0', // version number true // if true, the script is placed before the end tag ); // Enqueue the registered script file wp_enqueue_script('google-analytics'); } add_action('wp_enqueue_scripts', 'add_google_analytics'); ?>
    Just a couple things you MIGHT need to change in the file above. First, if you named your JavaScript file something other than analyticstracking.js you'll have to replace your file name with the correct one in the second line within the "wp_register_script" function. Also, it's important to note that the get_stylesheet_directory_uri() call in that same line gets the directory of your child theme, not your parent theme. But, since you should absolutely be using a child theme for this, then using get_stylesheet_directory_uri() is the right thing to do.

    Now, just hit "Save Changes" in the upper right and you're DONE!
  5. Make sure Google Analytics is receiving data. Lastly, you have to make sure the code was plugged in correctly and that the Google Analytics engine is receiving data. In order to do that, go back on your Google Analytics page where you first got your tracking code given to you. Google Analytics Receiving Data

    If you plugged in your code correctly, you should see the "Receiving Data" message up above. Otherwise, it will say "Tracking Not Installed".

    **Note: I have personally seen this take up to 24 hours for the message "Receiving Data" to show up, so you very well could have it installed perfectly, but may need to just wait it out.

    If you see the "Receiving Data" message, you're golden! Everything is set up and you won't have to do anything else anymore. Every time someone comes onto your site it will be gathering information about them, and you'll start to see all of your statistics show up on your Google Analytics page. Mission accomplished!

I know this definitely isn't the easiest route to take for plugging in Google Analytics code, especially if you don't somewhat know what you're doing, however this is absolutely the CORRECT way to do it. Whenever you're adding a script or style file to your site, you should always register and then enqueue that file in order for your files to run the most efficiently on your site. You can also read more on how to include JavaScript and CSS files into your WordPress site here.

Did you get it to work? Having troubles? Leave a comment and let me know. I'll try to help anyone I can!

Comments 10

  1. Pingback: How To Implement Prism.js Syntax Highlighting Into Your WordPress Site | Crambler

  2. Thanks for writing this one. It was helpful.

    I knew I wanted to enqueue the script but I needed someone to “hold my hand,” so to speak.

    1. Post
      Author

      Hey Jared,

      I was in the same boat as you. I knew what I needed to do but just couldn’t find a direct answer of how exactly to do it — everyone was doing a little something different. So after I figured it out I was hoping a blog post about it would help someone else!

    1. Post
      Author
  3. Pingback: Top 10 WordPress Plugins to Improve Your Blog - Crambler

  4. Hi there

    This is a great explanation, easy to understand, however I still have done something incorrectly, as I have received a syntax error.
    I have re-read and everything seems right though.
    Could you assist?

    Many thanks
    Heidi

    1. Post
      Author
    1. Post
      Author

Leave a Reply

Your email address will not be published. Required fields are marked *