Analytics are an important part of a system to keep an eye on insights. Google analytics for websites and web-apps has become a key player in this race. It gives you tools you need to analyze data for a deeper understanding of the customer experience.
Google has made the integration of their analytics software quite easy, that it’s just a matter of copy and pasting the code in the pages of your website. Generally, you have to add the code in every page, you want to track (or analyze, in other words).
The code usually looks like:
|
1 2 3 4 5 6 7 8 9 10 |
<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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXXX-X', 'auto'); ga('send', 'pageview'); </script> |
As I mentioned above that you’ll have to add this code (or the actual code from your GA account), to the every page you want to track.
This scenario is an easy go with a templating system, which allows you to reuse a certain part of the code or content. In a WordPress system you have this opportunity. You can do this using different approaches. For example:
- Enqueuing the GA code directly in the theme
- Creating a plugin as a more robust solution
In the first option, it looks quite easy and straightforward. You can use wp_enqueue_scripts action in your active theme’s functions.php file. But what happens when you switch to another theme? Or, there’s an update to the current theme? In both cases, you will simply loose the GA integration. And, ‘ll have to add the code again.
However, the other method of creating a plugin, is much stable and highly maintainable. Creating a WordPress plugin isn’t a rocket science, but is all about fun and dedication.
In this article, we are not going to discuss much of the details about writing a plugin. But I’ll go straight and show you a simple plugin creation for the said purpose.
Let’s go step by step.
Step 1: Create a plugin file
As a first thing, create a simple .php file in plugins folder of your WordPress installation. For sake of understanding, let’s call it my-google-analytics-plugin.php
Step 2: Add basic plugin scaffold
WordPress recognizes plugin files by reading some particular markers in the beginning of a PHP file. Below is the simple and basic scaffold to make it recognizable by WordPress. Open my-google-analytics-plugin.php file in a code or text editor, and add following lines to it:
|
1 2 3 4 5 6 7 8 |
<?php /* Plugin Name: WPME Google Analytics Plugin Plugin URI: http://wpmadeasy.com Description: Adds a Google analytics tracking code to the <head> of active theme, by hooking to wp_head. Author: WPMadeasy Version: 1.0 */ |
Notice some of the tags in above commented code, like Plugin Name, Plugin URI, Description, Author and Version. Feel free to change the text in-front of these to your choice.
Step 3: Create a hookable function (a.k.a. Callback function)
A hookable or callback function is executed when a particular event occurs. In a WordPress system there are two types of events; Actions and Filters. Here, we’ll use an action, which we will discuss in next step. However, this action requires a callback function. So when this action is fired, we can inject our GA code in a proper place.
Add following lines to your plugin file, after the previously added comment block:
|
1 2 3 |
function wpme_google_analytics() { ?> <?php } |
Step 4: Spice up the callback
Now it’s time to grab your GA code from your Google analytics account and add it to the callback function. Simply, copy the Javascript code from your account and paste between the two lines (you added above). So the code in your file will look like followings:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<?php /* Plugin Name: WPME Google Analytics Plugin Plugin URI: http://wpmadeasy.com Description: Adds a Google analytics tracking code to the <head> of active theme, by hooking to wp_head. Author: WPMadeasy Version: 1.0 */ function wpme_google_analytics() { ?> <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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXXX-X', 'auto'); ga('send', 'pageview'); </script> <?php } |
Step 5: Hook it up
Finally, we need to hookup the callback function with the appropriate WordPress event. We are going to use wp_head action for this purpose. As a last line to your file, add add_action( 'wp_head', 'wpme_google_analytics', 10 );. Final code will look like following:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?php /* Plugin Name: WPME Google Analytics Plugin Plugin URI: http://wpmadeasy.com Description: Adds a Google analytics tracking code to the <head> of active theme, by hooking to wp_head. Author: WPMadeasy Version: 1.0 */ function wpme_google_analytics() { ?> <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','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXXXXXX-X', 'auto'); ga('send', 'pageview'); </script> <?php } add_action( 'wp_head', 'wpme_google_analytics', 10 ); |
You’re done. Your plugin is ready…!
Simply save the file, go to the plugins page, activate the plugin and check your website. You should see page source to confirm the presence of your Google analytics tracking code. Visit different pages and posts to ensure the implementation.
As an added point, you can involve more logics in your plugin. For example, where you want to include this and where you don’t. I recommend reading about WordPress conditional tags.