Defer Google Tag Manager & Google Analytics Script Blogger ~ Technical Arp

How to Defer Google Tag Manager and Defer Google Analytics Script Blogger

Learn how to Defer Parsing of JavaScript like google analytics.js to improve Page Speed score. Are you facing slow page load issues after putting Google tag manager and analytics code? then you are not only to face this issue. After using defer parsing of Google Analytics and defer google analytics and google tag manager script on your website to prevent blocking of website content.

If you really want to improve your website speed then this can be resolved, by using our Technical arp defer google analytics javascript code. By referring to the Javascript website will request to analytics.js library after the website is completely loaded. Therefore it never blocks your website page and request after DOM is completely loaded to improve website speed.

Defer Google Tag Manager & Google Analytics Script Blogger

In our previous post about How to use DNS Prefetch to improve website speed, you must read about the DNS Prefetch attribute.

More Useful Script: Lazy Load Google Adsense Ads

What is Defer Parsing of JavaScript?

While check your website speed using Google Pagespeed Insights Tool, GTmetrix, or similar tools. you get some warnings and recommendations to fix those warnings/errors. And If you find you need to “remove render-blocking JavaScript,” “defer parsing of Javascript,” or “eliminate render-blocking resources,” issues then this article is for you.

Because you may ask, “How can I make JavaScript load faster? What do scripts have to do with my site’s speed, anyway?” Basically, In simple words, this means you need to alter when your Javascript files execute or load to speed up your site. In other words, you need to defer parsing of JavaScript.

In more simple words, the Defer Parsing of JavaScript means telling the web browser to render/download JavaScript only after the main content of the website has finished loading. This way visitors need not wait more to see the meaningful content of the website.

Technically, it is the process to defer (delay) JavaScript loading on a website.

How to defer parsing of Javascript Google Analytics and Tag Manager to Load faster?

What? I don't know to code how can I do this? Well, don't worry you can easily do it by following this tutorial. through JavaScript defer code. For WordPress, you can use many plugins like WP Rocket to safely resolve the issue in a couple of clicks. This tutorial is for website developers and bloggers using the Blogspot platform.

Why You Should Defer Parsing of JavaScript

In most cases, Google's Analytics javascript and tag manager javascript requests block the content of the web page.

For a browser, executing JavaScript is a heavier task (depending on the size of the script) and takes more time as compared to render the meaningful content (the first paint) of the webpage.

What does it mean?

When the web browser comes across any Javascript, it executes the script first before continue to load HTML that includes the content users are looking for. So because of this our web page loads slowly and users don't like slow websites.

Therefore, In this tutorial Defer Google Analytics and Tag Manager Script Blogger you will get a tested script that we are using on our Technical Arp website.

So Now Let's start this tutorial.

Steps to Defer Google Tag Manager and Defer Google Analytics Code on your website

This tutorial is for website developers of web apps and bloggers using the Blogspot platform. So we will guide you specifically for the blogger platform but you can easily put it into your custom website just follow from 3rd step.

STEP 1: Make sure to backup your whole blogger template code. (It’s important!)

STEP 2: Open Blogger Dashboard > Go to the Theme section > Click on the Edit HTML code of your template.

STEP 3: Remove the script tag provide by google from your head tag from your website template.

Example:

<script async='async' src='https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxx-x'></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());

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

Also Read: Remove Blogger Default Javascript and CSS

STEP 4: And Place Below Code just above of </body> ending of the body tag.

Function to Defer Google Tag Manager Script:


<script> 
//<![CDATA[ 
function deferGoogleJS() { 
var d = document.createElement("script"); 
d.src = "https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxx-x", 
document.body.appendChild(d) 
} 
window.addEventListener ? window.addEventListener("load", deferGoogleJS, !1) : window.attachEvent ? window.attachEvent("onload", deferGoogleJS) : window.onload = deferGoogleJS; 
window.dataLayer = window.dataLayer || [];

function gtag() { 
dataLayer.push(arguments); 
} 
gtag('js', new Date()); 
gtag('config', 'UA-xxxxxxx-x'); 
//]]> 
</script>

Function to Defer Google analytics user Script:


<script> 
//<![CDATA[ 
(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(); 
i.initAnalytics = function() { 
a = s.createElement(o), m = s.getElementsByTagName(o)[0]; 
a.async = 1; 
a.src = g; 
m.parentNode.insertBefore(a, m) 
} 
})(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga'); 
ga('create', 'UA-xxxxxxx-x'); 
ga('send', 'pageview');

function atOnload() { 
initAnalytics(); 
} 
if (window.addEventListener) window.addEventListener("load", atOnload, false); 
else if (window.attachEvent) window.attachEvent("onload", atOnload); 
else window.onload = atOnload; 
//]]> 
</script>

NOTE: Please change the code UA-xxxxxxx-x with your blog's Analytics ID.

STEP 5: Save the template and again check your website speed.

Also Read: DNS Prefetch to Increase Website Speed

NOTE: Please change the code ca-pub-xxxxxxxxxxx with your Publisher ID. And Bookmark our website for more such useful scripts and share this post.

Benefits to Setup Script to Load Ads After Page Load on your Website?

It will increase your Page Speed.
A webpage will load faster
Improve your FCP(First Contentful Paint) Good for SEO
Automatically Defer Ads Scripts
First Load Website Content then Load Ads After Page Load
Scripts can’t see DOM elements below them, so they can’t add handlers, etc.
Scripts with defer never block the page
Scripts with deferring always execute when the DOM is ready (but before the DOMContentLoaded event).
The page content shows up immediately.
and many more benefits to put on your website
visit: https://javascript.info/script-async-defer for more technical benefits.

NOTE: Defer the attribute is only for external scripts.

Amazing Script: Voice to Text Converter Tool Script

For a complete demo of the script with a proper installation and usage guide please watch the complete video.

Defer Google Analytics Script in Blogger

Now time for Conclusion Right!

In Conclusion of Function to Defer Google Analytics and Defer Google Tag Manager Script

So, I hope this script helps you to increase your website performance. Now you don’t want to worry about the slowdown of your blog speed because of Google codes.

Visit our Website for more such type of tricks and scripts: Thanks for Visiting.

Also Read and Use: Automatic sitemap generator in blogger website

Responsive Bottom Sticky Ads

How to Add Countdown Timer Download Button