Right now there’s a big trend in long one-page websites out there. They look awesome, have more information on the page than most regular does and decrease the number of pages that the user needs to load. One downside is that these one-page websites may have high bounce rates.
Why are the bounce rates high?
Every person that comes to your website is tracked by Google Analytics. Analytics uses ‘events’ to track user movements within your website. When a person goes to another page a new event is being send to Analytics in order to track the user. When someone only visits one page Analytics registers this as a bounce since there’s only been 1 event on your website.
When you have a one-page website, you probably don’t consider a person who’s been on your website, reads all the content and then leaves as a bounce. After all this person engaged to your content, maybe found a phone number, send an e-mail or found everything he was looking for.
How to track
The trick to the right tracking is to use extra events so that Analytics sees more actions from the user that just ‘entering website’. This can be done several ways, depending on your goal of the website. Read the following parts and decide for yourself which is relevant to your case.
Track users that are longer than x seconds on your website
When you’ve got a lot of information on your website users take some time to read it. When they’re done reading they might leave and its counts as a bounce. You can set a timer on your page that sends a event to Analytics to tell that they’ve been longer than, lets say 30, seconds on your website. Use the following code to track these users after 30 seconds, I recommend it to place it within the original tracking code right after the ga(‘send’, ‘pageview’);
[js title=”Google Universal”]setTimeout("ga(‘send’, ‘event’, { eventCategory: ’30 seconds on page’, eventAction: ‘Read’ })", 30000);[/js]
[js title=”Google Classic”]setTimeout("_gaq.push([‘_trackEvent’, ’30 seconds on page’, ‘Read’]);", 30000);[/js]
The 30000 is the number of milliseconds after which the event will be send, edit to your desired (seconds * 1000) time.
Track user scrolling
An other option is to track the user scrolling. When a user lands on your website, they determine in seconds, if not milliseconds if they want to stay on your website. After that decision they might start to read and/or scroll down. If you made the decision to track users when they scroll, you can use the following code. You can replace the number of pixels to your desire.
[js title=”Google Universal”]
var runned = false;
$( window ).scroll( function() {
if ( $( document ).scrollTop() >= 250 && runned == false ) {
ga(‘send’, ‘event’, { eventCategory: ‘Scrolled 250px’, eventAction: ‘Scroll’ });
runned = true;
}
});
[/js]
[js title=”Google Classic”]
var runned = false;
$( window ).scroll( function() {
if ( $( document ).scrollTop() >= 250 && runned == false ) {
_gaq.push([‘_trackEvent’, ‘Scrolled 250px’, ‘Scroll’]);
runned = true;
}
});
[/js]
Track user clicks
An other way to track user events is by clicks that the user makes. This could be clicks on tabs, links, buttons, whatever you want.
Use the following code on each link you want to track events.
[js title=”Google Universal”]<a href="#yourlink" onclick="ga(‘send’, ‘event’, { eventCategory: ‘My Link’, eventAction: ‘Click’ })">My Link</a>[/js]
[js title=”Google Classic”]<a href="#yourlink" onclick="_gaq.push([‘_trackEvent’, ‘My Link’, ‘Click’]);">My Link</a>[/js]
Conclusion
These three options are a good way to track your website visitors. It will give you better statistics of your bounce rate and the engagement of your visitors. What you use depends on your decision of what you consider a bounce. I prefer to use the timer set to 30 seconds since people being 30 seconds on your website must have engaged in some way.
Tracking this way works great on one-page website and I even use it regularly on normal websites. When you implement this, no doubt your bounce rates will take a dive down.
Are you using this kind of codes on your website? Leave a comment with what you’re using.
Jeroen Sormani
I'm a professional WordPress plugin developer on a mission to create the best plugins for my clients. I'm specialised in developing general WordPress, WooCommerce and Easy Digital Downloads plugins.
Interested in talking about a WordPress project? Get in touch!
Leave a Reply
Who’s this guy?
My name is Jeroen, go ahead and try to pronounce that! I bet you get it wrong if you’re not Dutch 
I am a professional WordPress Plugin Developer, working from Alphen aan den Rijn in the Netherlands. Besides being a seasoned developer, I have a solid background in SEO and have been responsible for hundreds of websites and webshops in my previous work experience.
I build custom plugins for WordPress, WooCommerce and Easy Digital Downloads. My focus is to build the best, secure, reliable, optimized plugins with a good User Experience.
When not working, I like to watch tv series and eat some healthy home-made pizza.
27 thoughts on “Google Analytics One-page tracking”
Hi Jeroen, thanks for your guide!! Everything works smoothly, but the Track user scrolling code seems not working, where do you need to insert it? Right after the analytic tracking code?
Thanks
Hey Dan,
I recommend putting it at the end of your page before the closing tag.
You do require jQuery to use it, and you can probably put it best between;
[code lang=”js”]
jQuery( document ).ready(function($) {
<code here>
});
[/code]
(haven’t tested the code)
Let me know how that works out 🙂
Cheers!
Hey Jeroen,
awesome article – how to I use this in my wordpress – one pager?
Hi Marc,
That can depend on how your tracking code is implemented. With some luck you’ve inserted a block of JS, and you can paste it underneath it like this; http://cl.ly/image/101N323N0v34
Otherwise you can use a script like this: (untested)
[code lang=”js”]
add_action( ‘wp_footer’, function() { echo ‘<script>your code here</script>’; });
[/code]
How you want to track is up to you, I like to use the timer as that is a good indicator.
Hey Jeroen,
Thanks for your guide, it’s really helpful. But i’m bit confused about how to use the “Track user clicks” option. I have a single page website and i want to track the links “about,contact, portfolio”. So in the website where i add the “Track User Clicks” code and do i need to make any changes on the above mentioned script “My Link”
. Thanks in advance
Hi Shine,
The links ‘about/contact/portfolio’ on your website are anchors. They will have the code < a href='#'>About in the source, you can add the ‘onclick’ attribute as displayed in the article to track the clicks on those links.
You can see/verify clicks in real-time in the ‘real-time’ -> ‘events’ report in Google Analytics 😉
Hope that helps!
Jeroen
setTimeout(“ga(‘send’, ‘event’, { eventCategory: ’30 seconds on page’, eventAction: ‘Read’ })”, 30000);
That part of the code is universal or I have to change it?
Thanks!
Hi,
Yeah, thats the code for Google Analytics Universal.
You can change the category, actions etc if you like to other names/descriptions.
Cheers!
Thanks! Do you have a code that fires the event in every 30 seconds instead fire once?
Thank you for a really good and “easy to understand” article.
What about if you want to track how long a visitor stays on the site? I guess the timer won’t track that? Any ideas on how this can be solved?
Niklas
Hey Niklas,
The time a visitor stays on a page is already tracked by Google Analytics (well, the avg. time on site).
You can find this in the Adience -> Overview report. Clicking on the stat should give you greater detail too.
Hope that helps 🙂
Cheers
Hi and thanks for your answer.
Hmm – didn’t know this.
The situation I think of is a campaign site that won’t have any other “one-page clicks” either. I mean that there will be no event-tracking at all…
Niklas
Hi Niklas,
I think doing the ‘x time on page’ might be good for your situation 😉
Cheers,
Jeroen
Hi Im using the click method and although I can find the events in the real time reporting, where would they show up so I can view a proper record of them that may not be real time.
Thanks
Hi Anthony,
Events can be found under ‘Behaviour’ -> ‘Events’, the overview is always a good place to start and go further from there.
Jeroen
Is there an easy way to apply this tracking code to a single page of a wordpress site? I have applied the google analytics script on the settings of my website but like to start tracking more detailed goals.
Hi,
You can use a plugin like https://wordpress.org/plugins/per-page-add-to/ to add script to a specific page.
Hope that helps 😉
Jeroen
I think part of your code isn’t showing up correctly. I’m presuming that your instances of " are intended to be displayed as “
Hi Gray,
Your comment probably got filtered, but I think I spotted what you mean, and just fixed it.
Thanks for reporting!
Jeroen
sorry about that, I meant they are being displayed as "…
Very clear and helpful article, thanks. I implemented the 30 second timeOut and the click snippets. They brought my bounce-rate down from 80% to 34%!
I have currently 140 live viewers on my video site, but Google Analytics say I have 34 active users – I was wondering if you know any way I could get the analytics to be more accurate, like send aan automated simulated click every 5 minutes?
Hi Alan,
Glad you like the article 🙂
I don’t think you can send a simulated click, a event call might be worth checking out, but I don’t know if its recommended to do so…
I haven’t done any video tracking before, so I don’t think I can be of much help there.
Cheers,
Jeroen
Nice Article, but I have one more confusion regarding single page website. Single page website will have same bounce rate and exit rate?
Pretty! This was an incredibly wonderful article. Many thanks
for supplying this information. fan throws jersey
Same feeling here! Thanks!
Hi Jeroen, it is possible to create an event every time a single page is viewed? (wordpress)
These are exactly the sort of answers I was looking for.
Thanks so much Jeroen!
Matt