How To Show Google Analytics To Visitors On The Frontend in WordPress

You will have no doubt seen a wealth of tutorials on how to add Google Analytics to WordPress, hell I even did one myself for GeneratePress users here.

You probably haven’t seen this before though

Adding analytics to WordPress is all well and good, giving you insight into what’s happening on your blog/website, allowing you to make changes, test things out .etc.

What if I said you could share this on a per post/page basis? On the frontend of your WordPress site?

Yeh, I thought you might be interested.

There’s a plugin to help you do just that. You may well have never heard of it before. Why? Well according to the WordPress.org page it has fewer than 10 active installations!

Frontend Analytics plugin for WordPress

How to show Google Analytics on the frontend

Using Frontend Analytics, you can share basic analytic information on a post/page basis using a shortcode or using a specific widget for Gutenberg. Or if you’d like in your WordPress sidebar.

Setting up Frontend Analytics

How to install Frontend Analytics
How to install Frontend Analytics

Here you need to add your Google analytics authorization code. To do this, all you have to do is click on the ‘Get Auth Code’.

Once clicked on a popup will be shown asking you to allow Frontend Analytics access to your GA account.

Google Authentication Frontend Analytics
Google Authentication Frontend Analytics

Once approved you will be given a code for you to copy and paste into the auth code box.

It looks like the Frontend Analytics plugin was engineered specifically for the GeoDirectory plugin, which is also available on WordPress.org.

If you don’t feel comfortable allowing the author access to your Google Analytics account, then don’t install this plugin. As I’m testing it out in a real-world environment (namely on LyrWP) I will take the gamble. I’m sure it’s not a gamble, but I do understand some would be reluctant to allow access to their data.

Once you’ve got your GA auth code, paste it into the corresponding field. Hit save. Once refreshed, you will be able to choose the Analytics account from the dropdown that’s relevant to your current site.

Under this, you have a checkbox to add the tracking code to your site, enable or disable. Handy if you don’t have a method for adding analytics, although I am unsure if it adds the code to the head or footer.

Anonymize user IP, I’ve checked this as I do receive visitors from Germany, and I’d like to be compliant as much as possible!

Lastly, refresh active users, here you can set a time interval in seconds to update the active users. The default as you will see is 5 seconds, and you can disable auto-refresh by leaving this field blank or by adding a zero. That’s it you’re good to go.

Adding Frontend Analytics to posts/pages

If you’re using Gutenberg, the Frontend Analytics plugin has a block you can add to your posts/pages. See below for the block in Gutenberg.

Frontend Analytics block in Gutenberg
Frontend Analytics block in Gutenberg

It’s good to see a block as an option for Gutenberg if you’re not using Gutenberg and using the classic editor instead you can add a shortcode to your post to enable the same functionality.

Weirdly I could not find the shortcode for classic editor users, don’t worry I’ve discovered it, I will show it to you in a bit.

Adding Frontend analytics with Gutenberg.

I’m a fan of Gutenberg; it’s my go-to content editor. It’s not for everyone, though, and I completely get that. First of all, I will show you how to add analytics using GB.

Incidentally, the reason I couldn’t find the shortcode for the plugin was in fact because I am using Gutenberg! See below for the block details in GB.

Frontend Analytics block in Gutenberg
Frontend Analytics block in Gutenberg

Once you’ve added the block, you will see options for it in the block settings. It’s here you can give your block a title, and set permission levels for visibility.

The options are: Administrator, Author or Profile owner, Everyone logged in and lastly Everyone.

Advanced options, if you hit the toggle and decide to enable it, you can also give the button to your analytics a title.

Advanced settings in Frontend Analytics
Advanced settings in Frontend Analytics

By default, it says ‘Show Google Analytics’, so if you wanted to call it something else, this is where you can do just that.

Adding Frontend analytics with the classic editor.

So as part of my testing process, I installed the classic editor plugin. By doing that, I was able to add a shortcode along with viewing options. See below for a screenshot:

Classic Editor add Frontend Analytics
Classic Editor add Frontend Analytics

It’s all reasonably self-explanatory here. Follow the shortcode setting options copy the shortcode, place it where you want your analytics info to display.

How does it display on the frontend?

Ah the meat of the matter, how does the Fronted Analytics look in a post/page? Answer see below:

Frontend Analytics call to action
Frontend Analytics call to action

This example is from a post elsewhere on LyrWP. You can see the call to action which I’ve left as the standard output. The title of the block ‘How popular is this tutorial’ is a Header 2 tag.

It’s quite dull and basic at present. Don’t worry; I will show you how to sex it up a bit.

The output of Frontend Analytics in a post/page

As the plugin does state, it shows quite simple information, and I’m just fine with that. Simple info is enough for users to view, you don’t want war and peace if you wish to get more in-depth stats login and view the detailed reports within Google Analytics!

Let’s take a look at what’s on offer.

Last Week Vs This Week

Analytics output last week vs this week
Analytics output last week vs this week

If a user clicks on our call to action for analytics, the first option is Last Week vs This Week, and it also displays active users.

Filter Frontend analytics
Filter Frontend analytics

Frontend Analytics also supports filtering, so if a visitor was interested, they could see how well your blog/website did last week, by clicking on this week. Pretty cool right?

This Year Vs Last Year

Pretty much the same as before, but over 12 months, as well as filtering. If you hover over a month, it will give you the exact number of visitors for that specific month as does last week/this week.

Top Visiting Countries

Ah, a lovely circle. Here you can hover over a specific segment and get exactly how many users from that country have visited this particular post/page. This data is over one month.

Widgets in Frontend Analytics

If you’re not keen on displaying analytics data on a post/page basis, you can always enable the widget that Frontend Analytics offers, add it to your sidebar. Same settings as a post/page basis it renders in the widget area of your choice.

Making Frontend Analytics standout more

No-fault of the plugin at all, but the output and call to action are a little bland. There are no settings to make it stand out, so I had to dig a little deeper and make changes.

The plugin has a Div class of: frontend-analytics

I know this as I used the Google Chrome Inspect tool and highlighted that specific section. With that in mind I made some changes to the class, see below for the code I used:

.frontend-analytics {
	color: #000000; 
	background: #f9f9f9;
	padding: 10px 20px 10px 20px;
	margin: 25px 0px 25px 0px;

}
.frontend-analytics h2 {
	font-size: 25px;
	font-weight: bold;
}
.frontend-analytics button {
	color: white;
	background-color: green;
}

I’ve changed the H2 tag to be more aligned to the blog aesthetic, by making it bigger and bolder. I’ve also added some padding to the top, left, right and bottom, so it looks better and doesn’t get cut off.

As well as this, I’ve added some margin to the block. This way if there is anything directly underneath this blog or above it, it has plenty of space and won’t look out of place.

I’ve also changed the colour of the button and of course the background. All you have to do is cut and paste the code, add it to the native customizer in WordPress. See below for example, obviously the code I used can be used by you, or you can create your own, based on your needs.

Additional CSS for Frontend Analytics Plugin
Additional CSS for Frontend Analytics Plugin

I’m not a coder, so please feel free to say I made a balls of it or something!

So I’ve shown you the how-to display Google analytics on the frontend — Heres the why.

For those of you who like to keep their analytics to themselves, then this is not for you. Chances are if you’re reading this, you want to show them.

So what are the benefits of showing Google Analytics on the frontend of your blog/site?

From my point of view, advertising is one. Sidebar adverts are all but dead in my opinion, people have become numb to them. In the post/page, advertising is where it’s at.

What better way to give potential advertisers insight into how well your content does, then giving them a brief overview of real-world statistics?

Let’s say you have an incredibly popular blog post, has thousands of views, and it’s getting constant traffic.

A potential advertiser can view the stats of that post and make an informed decision as to whether or not they would like to advertise.

They know the figures and can see how it’s doing from a visitor perspective, what countries visit the post and more. They have the info they need to sponsor the post, get in touch with you and discuss advertising.

That’s a win for me, right there.

Other benefits, people visiting your post and viewing the stats might be (might be) more inclined to share your content due to the volume of visitors you have.

Commenting, by viewing the stats, visitors might be encouraged to comment on your post if they see the content is popular.

Other bloggers might be inclined to link to your article, or indeed ask you to link to theirs, thus encouraging some link building!

Downsides, there’s always a downside. One could be a competitor could see how your post is doing, steal the idea, add more content to usurp you in the search engines.

By the same token on commenting, it could foster spammers to add links in comments to increase the exposure of their blog.

The beauty of the Frontend Analytics plugin

It’s not enabled sitewide, and it works on a post/page basis. If your post is new and not getting viewed (for whatever reason), you don’t have to enable it! Until you get to stage where it begins to get traffic, then add it and show the world your stats!

Hell, you don’t even have to allow everyone to view them. Keep your stats private by choosing Admin only.

See below for a real-world example on this very post.

Below is live, and it’s a real example of how this post is doing in the really-real world. Sure it probably doesn’t have a lot of traffic (yet), but it will give you an idea of how this tutorial will pan out. 👇👇👇👇

How many visitors have viewed this tutorial?

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.