Wordpress: Adding Google Analytics Without a Plugin

There are many Google Analytics plugins for WordPress. Most also give you some form of display of this data in the wp-admin area. But you also get the endless plugin promotions trying to get you buy the enhanced version. While I don’t mind (that much) people trying to sell their wares (especially when I’m using a free version) sometimes it just grates.

So if rather than using a plugin you would like to just code and forget it, you can simply add a function into a file in the site child theme. Then you can check it works and forget about it. That’s what I do.

But first you really, Really, REALLY must have a child theme. If you don’t have one already, setting one up is easy. If you already have one then skip this bit.

A child theme acts as a front end onto your actual theme. Any code/css in the child theme overrides that in the actual theme.

If you don’t have a child theme then any changes you make to either the code or the css of your website will be obliterated next time you update the theme you are using.

If you have a child theme you can update the actual theme as many times as you like but it won’t touch your modifications.

Setting up a Child Theme

So here’s a quicky on setting up a child theme. If you’ve already done this then just skip it.
Open a directory. Call the directory whatever you like but xxy-child-theme is a good idea if your theme was called (say) xxy

In this directory open/create a file called style.css

Put the code below into it.

Now change the “Theme Name:” field, the “Description:” field and (crucially) the “Template:” field to match the theme name this is a child of. In this example the theme that this is a child theme of is called “xxy”.

/*
 Theme Name:   xxy Child
 Theme URI:    
 Description:  xxy Child Theme
 Author:       Your name
 Author URI:   http://your-website.com
 Template:     xxy
 Version:      1.0.0
 */

That’s it for style.css. Save it. Now create a file in the same directory called functions.php. Put this into it:

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );

function enqueue_parent_styles() {
   wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Save it then copy the whole directory you have just made into directory wp-content/themes/ of your website

You have just made a child theme for a theme called xxy. Now enable it. Log into the admin panel, go to Appearance/Themes and there you will find a new theme – your child theme. Select the child theme you just made.

Check it works. Your website should perform exactly like it did before you enabled the child theme.

Adding Google Analytics to a Child Theme

There are two ways you can do this.

By adding the Goodle Analytics code to a copy of the main themes header.php you place in the child theme directory.
By adding a function to the new functions.php file

Which is better? Search me. I always do the header.php version but both work equally well as far as I can see. To state the obvious: You only need one or the other. Not both.

Adding Google Analytics to header.php

If you have just set up a child theme then header.php definitely won’t be in your child theme directory. In which case copy the file called “header.php” from the main theme and place the copy in the child theme folder with the style.css and functions.php files you just made.

NOTE: If you have previously set up a child theme then “header.php” may be there already, if it is there use that one. DON’T copy over it. Amend it instead.

Open the child theme “header.php” file in a text editor. Find the tag “</header>”

Meanwhile on a browser go to your Analytics account and click on the admin tab (bottom left). If you have multiple websites MAKE SURE you have selected the correct one (top left).

Click on “tracking info” in the middle column, then click on “tracking code”. Copy the code that is displayed.

Paste this code immediately above the </header> tag in the child copy of header.php. My code for this site looks like this (my Analytics ID is starred out). Yours should be similar but with a valid id.

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*******-**"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

gtag('config', 'UA-*******-**');
</script>

Save it. You are done.

Adding Google Analytics as a function to functions.php

Open the child theme functions.php file and paste the code below into it at the bottom. You then need to change (at least) the ID in the functions.php code section to that given to you in your Google Analytics account.

This will probably just mean changing the *******-** fields to your account ID. But if you want to be safe replace everything from “<!– Global” down to the last </script> tag with a full copy of your Google Analytics code.

//-------------------------------------------------------------------
// Add Google Analytics in child theme using functions.php
//-------------------------------------------------------------------

add_action('wp_head', 'wpb_add_googleanalytics');
function wpb_add_googleanalytics() { ?>
 
    <!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-*******-**"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-*******-**');
</script>

<?php }

And you are done.

Either of the above methods should work. ONLY do one or the other not both.

Also, if previously you have been using a plugin for Google Analytics make sure it is disabled. Otherwise you may get a double count. There will be (of course) no stats displayed in the WordPress admin area. But IMHO you are better off logging into you Analytics account to view the data rather than in the WordPress admin area anyway.

Hope that helps.

WordPress: Adding Google Analytics Without a Plugin