Google Analytics

A step-by-step guide to setup Google Analytics in Plus UI Blogger Template.

Setup Analytics plugin

Analytics script will be automatically loaded if Google Analytics Measurement ID is set in Blog Settings.

You can either add your Google Analytics 4 Measurement ID through Blog Settings or you can explicitly set it by finding the following code snippet in Edit HTML and add your measurement id.

<Variable name="analytics.accountNumber" description="Google Analytics GA-4 Tracking Code" type="string" default="" value=""/>
[!] Google Analytics GA-4 Tracking Code
[!] @type {String}
[!] If Blank: Tracking Code is added from Blogger Blog Settings
[!] Example: G-0000000H00
<Variable name="analytics.accountNumber" description="Google Analytics GA-4 Tracking Code" type="string" default="" value="G-XXXXXXXXXX"/>
[!] Google Analytics GA-4 Tracking Code
[!] @type {String}
[!] If Blank: Tracking Code is added from Blogger Blog Settings
[!] Example: G-0000000H00

Note that you don't have to add any of the following code snippets anywhere in the Edit HTML which is recommended by Analytics because it will be automatically added for you with the measurement id specified above.

<!-- 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>

Change script loading behaviour

By default script is loaded normally which may impact the PageSpeed Insights Performance. If you don't want performance to be slow, you can switch between script loading behaviour.

The plugin provides 4 types of script loading, generally Normal, Defer, Lazy and Defer + Lazy. The default type is set to Normal.

Behaviours of these loading types are as follows:

  1. Normal: Loads script normally by adding it above </head>. It impacts PageSpeed Insights performance.
  2. Defer: Loads script dynamically after page load. It impacts PageSpeed Insights performance.
  3. Lazy: Loads script dynamically on user interaction for the first time and next time it instantly loads script. It doesn't impact PageSpeed Insights performance.
  4. Defer + Lazy: Same as Lazy but it makes sure page is loaded first. It doesn't impact PageSpeed performance.

When using any script loading type other than Normal, it may sometimes not track events as script loading is delayed, not only that user visiting site for the first time need to interact with the page to load script in case of Lazy and Defer + Lazy types. All types have advantages as well as disadvantages, choose it wisely.

To switch between loading types, follow these steps:

  1. Go to Theme Designer.
  2. Click on Advanced tab.
  3. From the dropdown selection list, select Plugin: Google Analytics.
  4. Change the length of Load Type to 1px, 2px, 3px or 4px for Normal, Defer, Lazy or Lazy + Defer respectively.

Disable Analytics plugin

If you don't want to load Analytics script or want to explicitly add script tags. You can disable the Analytics plugin to prevent theme to load script for you.

Go to Theme Designer > Advanced > Plugin: Google Analytics and set Enable Script to 1px in order to disable in-built Analytics plugin.

If you intend to disable the Analytics plugin to manually add script tags through Edit HTML, be careful if you have enabled the AMP plugin. We always recommend you to use the Adsense plugin to load Analytics script as it handles both AMP and Non-AMP script.

About the author

Deo K.
~ Hello World!

Post a Comment

Comment form message goes here. Can be set from Blog Settings > Comment form message (under Comments)