How to view a website heat map using Google Analytics

Google Analytics provides a wealth of information about how and where visitors have interacted with your website.

But sometimes it’s hard to get your head around the pages of tables of information.

This is where heat maps come in handy – being able to see the information displayed along side your actual pages makes it much easier to understand what users have interacted with and where it relates to on the screen.

Google Analytics allows you to do this using the a addon for Google Chrome  –  Page Analytics (by  Google). It may not be as effective as a dedicated heat map tool (for example, some tools will record the path a mouse has moved and if it has clicked on a non-linked elements) – but it still allows you to understand a lot about more about your website from a visual perspective – such as elements below the fold aren’t getting clicked, or an icon is not being interacted with because it doesn’t look interactive.

 

To use the addon you need to have Google Chrome installed and then install the addon.

Once installed the Analytics icon will be at the top right of the window.

When you’re on a website that you control you can set it to ‘on’ and then use the “show colors” icon to display Analytics data as a heatmap.

Crude but free and (mostly) effective.

There are a couple of catches – for example, if you have the same link in two places on the page it will not know which one the users are clicking on.

Reference: https://support.google.com/analytics/answer/2558811?hl=en

How to track Adblocker users using Google Analytics

The JavaScript below can be used to collect the number of Adblocker users visiting your website in Google Analytics.

This has been written specifically for AdSense ads and will not work if you’re using another ad network on your website.

To use, simply include it in the footer of your website.

Note: there is a possibility that an Adblocker user may also be blocking Google Analytics – if they are they will not be counted at all.

<script>
window.onload = function() {
    setTimeout(function() {
        var ad = document.querySelector("ins.adsbygoogle");
        if (ad && ad.innerHTML.replace(/\s/g, "").length == 0) {
            //Adblock detected
            if (typeof ga !== 'undefined') {
                ga('send', 'event', 'AdBlock', 'True', {
                    'nonInteraction': 1
                });
            } else if (typeof _gaq !== 'undefined') {
                _gaq.push(['_trackEvent', 'Adblock', 'True', undefined, undefined, true]);
            }
        } else {
            //Not detected
            if (typeof ga !== 'undefined') {
                ga('send', 'event', 'AdBlock', 'False', {
                    'nonInteraction': 1
                });
            } else if (typeof _gaq !== 'undefined') {
                _gaq.push(['_trackEvent', 'Adblock', 'False', undefined, undefined, true]);
            }
        }
    }, 2000);
};
</script>

Once installed the statistics will start appearing in Google Analytics under ‘Real-time’ -> ‘Events’.

analytics-adblocker1

You will also be able to view the statistics under ‘Behaviour’ -> ‘Events’ after 24 hours.

How to find and track broken links using Google Analytics

Here’s a quick and easy way to track broken links using Google Analytics.

It requires you to have

  1. Google Analytics setup on your website,
  2. a dedicated 404 page,
  3. and have Google Analytics running on the 404 page.

 

  1. First step is to open up the 404 page on your website, so go ahead and try a link you know wont work like www.itsupportguides.com/fake-link
  2. Once you have the 404 page open, take note of the page title. For my website it starts with ‘Page not found’
  3. GoogleAnalytics-PageNotFound1
  4. Now open up Google Analytics
  5. On the left hand menu, navigate to (or search) and open ‘Behavior -> Site Content -> All Pages’
  6. GoogleAnalytics-PageNotFound2
  7. Directly under the graph, under the ‘Primary Dimension’ option click on ‘Page Title’
  8. GoogleAnalytics-PageNotFound3
  9. Now use the search box to the right of the page to search for the page title of your 404 page, for example ‘page not found’
  10. GoogleAnalytics-PageNotFound4
  11. The results should show one page – your 404 page.
  12. Click on it to view the list broken links that have created a 404 error
  13. GoogleAnalytics-PageNotFound5
  14. Now that you know which links are broken, you can find the working link and redirect the bad link to the good link.
  15. You can also add a secondary dimension to see the website that has the bad URL on it.
  16. To do this, click on the ‘Secondary dimension’ drop down list, search for and click on ‘Full Referrer’
  17. GoogleAnalytics-PageNotFound6
  18. Beside each link you’ll now see the URL to the website that has the bad link.

WordPress – How to track outbound links using Google Analytics

The following code can be added to your theme functions.php file (anywhere after the opening <?php line) to enable the tracking of outbound links (links to other website domains).

The code requires you to be using the universal analytics code, so if you haven’t already head over to here: Set up Universal Analytics: An overview.

The code inserts a jQuery script at the end of each page. The jQuery script will:

  • load once the page has finished loading
  • target all links in the article tag (you may have to change this to suit your website, or you could completely forgo it and just make it target all links using just ‘a’ instead of ‘article a’)
  • excludes anchor links, e.g. #top
  • when a user clicks on one of the links, a Google Analytics event is triggered recording the link as ‘Outbound traffic’, then the link is opened.

You can see if the jQuery script is working by opening your Google Analytics account for the website and going to Real-Time -> Events

You should see an event if a link as been clicked. When you click on Outbound Links you will see which link was clicked.

GoogleAnalytics-OutboundTrack1

After a few days the data will be available under Behavior -> Events -> Overview.

add_action('wp_enqueue_scripts', 'itsg_track_outbond_links',999);

function itsg_track_outbond_links() {
    add_action('wp_footer', 'itsg_track_outbond_links_js');
}

function itsg_track_outbond_links_js() {
?>
<script>
jQuery(document).ready(function() {

    jQuery("article a:not([href^='#'])").each(function() {
        var href = jQuery(this).attr("href");
        var target = jQuery(this).attr("target");
        var text = jQuery(this).text();
        var _gaq = _gaq || []; // in case _gaq is not defined - i.e. the analytics code has not ran on the page
        jQuery(this).click(function(event) { // when someone clicks these links
            event.preventDefault(); // don't open the link yet
             if (href.indexOf(window.location.host)==-1) {
                _gaq.push(["_trackEvent", "Outbound Links", "Clicked", href, , false]); // track outbound links
            }
            setTimeout(function() { // now wait 300 milliseconds...
                window.open(href,(!target?"_self":target)); // ...and open the link as usual
            },300);
        });
    });

});
</script> <?php
}

 

Google Analytics – How to exclude query parameters

One of the key bits of information Google Analytics collects is the URL that was loaded.

Sometimes a URL may have one or more query parameters, for example:

www.domain.com/?query1=1&query2=2&gf_token=123

By default Google will collect the full URL with all the query parameters.

Sometimes this is useful, for example if the query parameter shows search terms people use in your website – and sometimes it can be bad, creating duplicate page loads in your Analytics data or even worse including personal identifiable information.

If you do not already know, the terms of service for Google Analytics makes it critical that personal identifiable information is never collected through Google Analytics.

The following steps detail how to exclude specific query parameters from being collected by Google Analytics. In this example we will be excluding the gf_token query parameter – which is used by the WordPress Gravity Forms plugin.

  1. Sign into your Google Analytics account – http://www.google.com/analytics
  2. At the top of the window click on ‘Admin’
  3. GoogleAnalytics-ExcludeQueryParameter1
  4. Under ‘Account’, ‘Property’ and ‘View’ make sure the correct account is selected
  5. Then click on ‘View Settings’
  6. GoogleAnalytics-ExcludeQueryParameter2
  7. Now under ‘Exclude URL Query Parameter’ enter the query you want to exclude. Additional query parameters can be added by separating with a comma. For example:
  8. gf_token,query1,query2
  9. GoogleAnalytics-ExcludeQueryParameter3
  10. Click ‘Save’ at the bottom of the screen to save the changes.
  11. Analytics will now stop collecting the information for the specified query parameters. Please note that past data will not be affected.