Add Google Analytics using code snippet

Watch tutorial on YouTube.

Adding analytics is one of the important steps for measuring website performance.

This tutorial shows how to add Google Analytics code to your WordPress website using code snippet.

Code Snippet

First add your website to google analytics → https://analytics.google.com/

Default (not optimized) Google Analytics code

Important: Replace G-XXXXXXXXXX with your Google Analytics Measurement ID.

add_action( 'wp_footer', function () { ?>
<!-- Google tag (gtag.js) --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script> 
<script> 
window.dataLayer = window.dataLayer || []; 
function gtag(){dataLayer.push(arguments);} 
gtag('js', new Date()); 
gtag('config', 'G-XXXXXXXXXX'); 
</script>
<?php } );

Optimized (delayed) Google Analytics code

This version inserts Analytics code dynamically after page completes loading. All important elements like text, images etc. will be visible faster.

Important: Replace G-XXXXXXXXXX with your Google Analytics Measurement ID.

add_action( 'wp_footer', function () { ?>
<script>
/* Google tag GA4 */
setTimeout(function(){
var id='G-XXXXXXXXXX';
var s=document.createElement('script');
s.type='text/javascript';
s.async='async';
s.crossorigin='anonymous';                      
s.src='https://www.googletagmanager.com/gtag/js?id='+id;
document.getElementsByTagName("head")[0].appendChild(s);
window.dataLayer=window.dataLayer||[];                      
window.gtag=function(){dataLayer.push(arguments);}; 
gtag('js',new Date());
gtag('config',id);                      
},100);
</script>
<?php } );

FAQ

How optimized Analytics code affects performance?

Optimized Analytics code starts to load after some delay. This helps to break long taking process and start loading when browser is idle. By delaying you allow browser to load page content first and analytics later.

Your page contents: like main text, images, navigation, forms are much important than loading analytics.

Where to get Google Analytics Measurement ID?

Find Google Analytics Measurement ID using following steps:

1. Login to your Analytics account and select web property that you want to get ID.
2. Click “Admin” menu located at left bottom corner.
3. On opened page navigate to “Data collection and modification” →  “Data streams”  page.
4. Click on data stream for your website.
5. On opened page on the top right corner you will see “Measurement ID”.

Where to get default Google Analytics code?

1. Login to your Analytics account and select web property that you want to get ID.
2. Click “Admin” menu located at left bottom corner.
3. On opened page navigate to “Data collection and modification” →  “Data streams”  page.
4. Click on data stream for your website.
5. At the bottom of the page click “View tag instructions”.
6. On opened page click on “Install manually” tab. From there copy default google analytics code.

Why not to use “Install with website builder or CMS” for adding analytics code to WordPress?

Because there google offers to use “Site Kit” plugin for adding and viewing your analytics, adsense, search console data inside WordPress.

Plugin is designed to add tracking code and display performance data. It is a big plugin which uses your server resources for showing performance reports. Which can slow down your website.

For this reason I prefer adding analytics code manually. Just tiny code. And use Google’s own websites for displaying analytics, adsense and search console performance data.

You can learn why I removed Site Kit and many other plugins from my WordPress website.

Can I load google analytics only for humans?

Yes, you can use plugin to load analytics only after human interaction like mouse move, mouse click, page scroll etc.

It is also known as lazy loading JavaScript. Which also helps to load webpage super fast.

Check how I to use that plugin as one step of website speed optimization tutorial.

—

What is next?

• Watch how I optimize all JavaScript (including Analytics) to always get 100 PageSpeed score.
• Adsense code snippet
• Get more code snippets.
• Correct way of lazy loading JS.