How To Add Google Analytics To WordPress
Google Analytics is such an important part of a webmaster's arsenal, that I honestly don't know a single site owner who doesn't use it. For tracking and reports, there's nothing better. And it's free! All you need to do is add a snippet of code to your website and you're done. The problem however, comes with Content Management Systems (CMSs) like WordPress where you don't want to manually change the page code.
Usually, articles on the web will recommend that you use a plugin for this. There are many great plugins that add code, and some like the well-known Yoast SEO plugin that integrates it into the basic functionality. But sometimes you don't want to install a plugin for just a single purpose like this. In this tutorial, I'll show you how to add Google Analytics to your site without a plugin.
Step 1: Getting Google Analytics Code
To start with, you need to know where you get your Google Analytics code. It can be surprisingly difficult to find within the GA interface, so here's how to go about it. After logging into your Google Analytics account, click the settings gear icon. This will bring you to the admin page with multiple columns. One of them will be called "property" as shown here:
In this, click the item labeled "Tracking Info". It'll expand with a list. Click the first one called "Tracking Code". This will then provide you with the code you need to add to your website as shown here:
For obvious reasons, I've blocked out my own tracking number, but you need to add this "as is".
Should You Use the Header or Footer?
Google recommends that you place the code in the header of WordPress. But doesn't conventional wisdom dictate that you place all Javascript in the footer so that it doesn't slow down the page? Actually, it's more complicated than that.
Modern GA code uses the "async" tag as you can see from this line:
<script async src="https://www.googletagmanager.com/gtag/js?
"async" ensures that HTML parsing isn't interrupted while the browser downloads the Javascript. "defer" is another (even stronger) attribute that ensures that the script isn't even executed until the DOM is loaded.
Anyway, the point is that there's no risk of keeping the Google Analytics code in the <head> section of WordPress. The async attribute ensures that it's not render blocking and doesn't slow your site down.
Option 1: Step 2: Inserting the Code into <head>
The easiest way to insert Google Analytics code into WordPress is to just use the theme options if they exist. For example, in all Genesis themes, you have the following box in the theme customizer:
That's convenient! No need for any additional work. Just paste the code you got from Step 1 and you're done! However, many of us aren't so lucky to have a WordPress theme with an automatic option like this. Which moves us to option 2.
Option 2: Adding Code Manually
The second way to do it is to add code to your theme's functions.php at the bottom. Better still, create a custom plugin for PHP code which you'll use for all future code insertions. It's totally worth the extra effort, trust me!
Here's the code you need to use:
function add_analytics() {
$font_script = <<<'EOD'
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=XX-XXXXXXXX-X"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'XX-XXXXXXXX-X');
</script>
EOD;
echo $font_script;
}
add_action('wp_head', 'add_analytics');
Replace XX-XXXXXXXX-X with your UA code - the number you see in Step 1.
Here, we hook into the "wp_head" action and use the HERENOW syntax to paste our GA code. Make sure you paste the above exactly as written apart from the replacements!
Once you save your changes, you can refresh your page and you should see the code added as shown here:
And you're done. You've successfully added Google Analytics code to your site!
