How to add Tracking Code to a WordPress Theme

A common task that all WordPress users need to do is insert some form of tracking code into their WordPress theme to track their visitors. This is achieved by writing some very simple code and placing it in the theme’s functions.php file.

In this example we’re going to use Google Analytics’ tracking code but it really doesn’t matter what service you use, just as long as you use the correct code provided, and make sure you are inserting it into the correct place within your HTML markup.

Creating the function

Shown below is the absolute minimum we’ll need to create our function.

function my_theme_name_tracking_code() { ?>

// tracking code will be placed here

<?php }

All it needs is the actual tracking code as noted by the comment. Note how the function name has been prefixed with the name of the theme to lessen the chances of a conflicting function name.

Adding the tracking code

Your tracking code will vary, but generally it will look something like this:

function my_theme_name_tracking_code() { ?>

    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
	  _gaq.push(['_setDomainName', 'mydomain.com']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

    </script>

<?php }

Hooking the function to an action

Now that we have our function, we need to tell WordPress to actually load it somewhere. We do this by hooking the function to an action hook.

Because Google recommends placing their analytics tracking code just before the closing </head> tag, we’ll be using the wp_head action hook. As mentioned in the Codex, the wp_head action hook is triggered within the section of the user’s template by the wp_head() function.

Now that we know where to load it, we need to use the add_action() function, passing 3 parameters to it as seen in the example below.

add_action( 'wp_head', 'my_theme_name_tracking_code', 20 );

The first parameter is the wp_head action hook.

The second parameter is the name of our function that we created earlier. Double check that the function name matches exactly, or it won’t work.

And finally, the 3rd parameter is the priority. In our example we’re using a priority of 20 to make sure it’s loaded after other functions that may also be using the wp_head action hook. Don’t be afraid to increase this number if your tracking code isn’t quite loading before the closing </head> tag. You can check where it’s loading by viewing the HTML source in your browser.

Putting it all together

This is what the completed function should look like. Don’t forget to replace the tracking code with your own.

function my_theme_name_tracking_code() { ?>

    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-XXXXXXXX-X']);
	  _gaq.push(['_setDomainName', 'mydomain.com']);
	  _gaq.push(['_trackPageview']);

	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();

    </script>

<?php }
add_action( 'wp_head', 'my_theme_name_tracking_code', 20 );

Leave a Reply

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