How to Lazy Load Analytics in WordPress

Hi to all, in this article I am going to tell you all about how to lazy load analytics in your WordPress websites easily in just few minutes.

Basically this lazy load analytics code will help your website to increase the page loading speed and it will not load the JavaScript unless and until, if there is any user interaction like scrolling the page.

As we know that google analytics code is a JavaScript it need to render the browser, which will slow down your website loading speed.

To avoid this, we can replace the existing analytics code with the following lazy load analytics code and improve your WordPress website page loading speed.

By adding this you will definitely increase your page speed and by this you can decrease your bounce rate and increase your revenue through this.

Read the below provided steps carefully and completely to get clear understanding about lazy loading analytics in your WordPress website without any error or issue.

Steps  to Lazy Load Analytics in WordPress

Step-1: First of all you need to login to your WordPress website dashboard by using login credentials.

Step-2: If you have already added analytics code in WordPress through plugins or manual.

Here I am going to tell you adding the lazy load analytics code through Header Footer Code Manager (HFCM) plugin and also you can use your own code manager plugin.

Step-3: If you not installed and activated the plugin, then find this plugin in your WordPress plugin store and install and activate it.

Step-4: In dashboard, if you scroll down, here you can see HFCM option, click on it.

I have used this plugin to insert the code inside the footer section.

Step-5: Now you need to click on edit snippet option from the HFCM settings page.

Step-6: Here at the last you can see snippet / code options, there you need to paste the code.

Step-7: Now you need to copy the below lazy load code and paste it in any text editor to edit code.

<script type='text/javascript'>//<![CDATA[ var lazyanalisis=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalisis||0!=document.body.scrollTop&&!1===lazyanalisis)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalisis=!0)},!0); //]]></script> <script> //<![CDATA[ window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-xxxxxxxxxx'); //]]> </script>
Copy

Step-8: Now in that you need to replace the default G- code with your analytics code and the you need to copy the full code and paste it inside the text area.

Step-9: After adding the code select display to site wide and snippet type as JavaScript and set location as footer and then click on update button.

Step-10: Now our lazy load google analytics Id is added, and you have successfully lazy loaded analytics code in your WordPress website without any error.

Note

For the G- code you need to login to your analytics account and go to admin panel and copy your G- code and paste it in the default code and add the code in your website through any code manager plugin or you can directly add the code manually.

If you any error then remove the added code and need to repeat the same process as above mentioned carefully.

You can also paste the code in footer.php manually as shown in below image.

Conclusion

I hope that you have understood about how to lazy load analytics in WordPress website easily in just few minutes without any issue or error.