Custom Events provide a perfect solution for adding context and tracking more specific user actions. In this article, we are giving you a good amount of ideas for custom events you should implement on your own and/or your clients’ websites.

This post is divided into sections by different event categories so you could skip the ones that are not relevant for you.

Clicks

For almost all websites, the most common user interaction is a click. By default, Google Analytics isn’t very good at tracking them. Let’s see how we could improve this situation.

Navigation clicks

Tracking usage of the main menu, sidebar and other navigation elements is critical. This is how your visitors explore your business and move in the funnel.

Detecting navigation interactions is easy with Google Tag Manager and sending data to Google Analytics works as with any other event.

Since there may be several navigation elements containing links to the same page, it is important to also pass the information about which navigation was used. For example, you might a have link to your blog both in the header and in the footer.

Recommended event parameters:

category: click
action: top-navigation, sidebar etc.
label: link text
non-interaction: false

CTA clicks

Tracking clicks on all of your CTAs (call to actions) is extremely important if you have more than one CTA on a single page pointing to the same location (i.e. long-form sales pages).

Don’t forget that buttons like “Get a Quote”, “Add to Cart” and “Checkout” are also CTAs.

Setup is the same as with generic click tracking using GTM.

Recommended event parameters:

category: click
action: CTA
label: text (and index the same CTA appears multiple times)
non-interaction: false

Outbound link clicks

Also known as tracking website exits, this custom event tells you exactly to which external pages people navigate from your site.

Again, setting this up is quite easy with GTM.

Recommended event parameters:

category: click
action: outbound link
label: link URL - link text
non-interaction: false

File download clicks

Doesn’t matter if you provide whitepapers, ebooks, PDFs, or other types of downloadable files, you should be tracking how often they get downloaded.

There are some really good tutorials online but we recommend setting it up using Google Tag Manager. A simple “just links” click trigger with a regex that matches desired filetypes should work just fine.

Regex Example:

\.(pdf|docx)$

Recommended event parameters:

category: click
action: download
label: filename / link text
non-interaction: false

Rage clicks

Visitors rage clicking on certain elements on your website is a good indicator of a UX error. For example, people may click on a blue text that is not a link or on an image that has no click functionality.

We have a separate blog post about tracking rage clicks using Google Tag Manager and Google Analytics.

Recommended event parameters:

category: click
action: rage click
label: element selector
non-interaction: false

Button clicks

Your website is likely to have all sorts of clickable buttons. There might be some other ways for you to get an overview of the usage of the features related to those buttons but knowing how many clicks each button received definitely helps.

Some ideas for which buttons should be tracked:

• Add to wishlist/favorites
• Add/remove item from cart
• Update cart
• Continue shopping
• Log in/out
• Register
• etc.

Recommended event parameters:

category: click
action: button
label: button text/description
non-interaction: false

Form Interactions

When it comes to tracking forms, I would like to recommend a few good articles by Simo Ahava that cover everything you need for getting started.

• Track Form Engagement With Google Tag Manager
• Track Form Abandonment With Google Tag Manager
• Form Field Timing With Google Tag Manager

Since forms are the most important part of many websites (i.e checkout, lead form etc.) you should really nail tracking them correctly.

A/B Testing

Experiment and Variation

Most A/B testing tools provide some sort of integration with Google Analytics. Most of them, though, are using custom dimensions. A problem with custom dimension based integration is that you need to make sure that the dimensions aren’t overlapping between experiments because otherwise, you might end up overwriting the dimension value for some experiments.

What we recommend having, besides the default integration, is a secondary event-based integration. That is, sending a custom event for every running experiment in a following format:

category: ab testing
action: experiment ID
label: variation number
non-interaction: true

PS! One event per experiment-variation combination.

This gives you raw information about each experiment and variation that the visitor saw. You can easily use this information in your custom segments or reports.

Every testing has a bit different solution for exposing experiment data to the front-end but here are a few links that should be helpful.

• VWO – instead of custom dimension, send this data using custom event action and label.
• Google Optimize – this allows you to get experiment data to the datalayer, now send it using a custom event.
• Optimizely X – access data about live experiments using Javascript.

Google Optimize Anti-Flicker Snippet timeout

If you have any experience with JavaScript-based A/B testing and/or personalization tools you know that flicker can be a real headache.

In case your tool of choice is Google Optimize, you should be using their official anti-flicker snippet to minimize the flicker effect.

We wrote a full separate article on Tracking Optimize Anti-Flicker Snippet Timeout in Google Analytics.

Recommended event parameters:

category: optimize
action: snippet timeout
label: true/false
non-interaction: true

Scroll depth

Whether you are working with a blog, some landing pages or any other page that is longer than a fold, you want to know how far down do the visitors scroll.

It used to required some custom Javascript but now, tracking scroll depth is a built-in feature of Google Tag Manager.

Recommended event parameters:

category: scroll
action: scroll depth threshold
non-interaction: false

Social interactions

While Google Analytics has a dedicated feature for tracking social interactions, having this data in custom events gives you more flexibility in reporting.

There is a really thorough blog post about tracking social interactions using Google Tag Manager – although, if you want something simpler, tracking clicks on your social icons is a good starting point.

Recommended event parameters:

category: social
action: share/like/follow
label: social platform
non-interaction: false

Video events

Doesn’t matter if it’s a sales video, a video that explains how your product works or a tutorial – you do care about how many people start the video and how far through will they make.

Google Tag Manager provides a really easy solution for tracking YouTube videos but tracking others such as Vimeo is completely doable as well.

Recommended event parameters:

category: videos
action: start/pause/percentage
label: video id
non-interaction: false

Errors

No matter how good your site is, there will always be errors. Since errors are directly related to bad user experience, tracking them is absolutely crucial.

The first step here should be sending your Javascript errors to Google Analytics. Next, consider sending other errors like popup alerts and system errors as well.

Recommended event parameters:

category: error
action: error message
label: feature or other relevant information
non-interaction: true

reCAPTCHA bot score

Google Analytics does have a simple bot-filtering system in place but it comes nowhere near catching all the bots that visit your site. Even tools like reCAPTCHA by Google can’t usually say for sure whether a visitor is a bot or a human but they can give you a score (from 0.1 to 1). Simo Ahava has put together a great tutorial for tracking the reCAPTCHA both score using Google Analytics custom dimensions.

Recommended event parameters:

category: reCAPTCHA
action: reCAPTCHA answer
label: reCAPTCHA score
non-interaction: true

Don’t forget to test whatever new custom event you add to your setup.

Should you have any questions related to custom events in Google Analytics, shoot them in the comments below.

PS! If you need help with implementing custom events, you can hire us to help you out!

Photo by Annie Spratt on Unsplash

The post Data You Should Be Tracking Using Google Analytics Custom Events appeared first on Reflective Data.

Detecting and fixing such usability issues is crucial, and luckily the detection part is doable using Google Tag Manager and Google Analytics.

Rage click is a situation where, in a short period of time, a website user clicks multiple times on a specific element. I.e. in two seconds, a visitor clicks three times on an image.

Without further ado, let’s see how tracking rage clicks works in Google Tag Manager.

Step 1 – Create a new Tag that detects rage clicks

This tag is responsible for detecting rage clicks and pushing a custom event rage_click into the data layer.

There are a few variables that you can play with to make it best fit your use case:

no_of_clicks – after how many clicks do we consider it a rage click. Default is 3.

time – in what time period should the clicks happen. Default is 2 seconds.

radius – in what radius should the clicks happen. Default is 100px.

The following variables are pushed into the data layer when a rage click is detected:

event – rage_click

rc_element – selector of the element on which the clicks happened

rc_count – the number of clicks

rc_max_distance – maximum distance between the clicks

rc_time_diff – period from first to last click

PS! You don’t have to send all of them to GA, pick the ones you think make the most sense.

Full code snippet. – Requires jQuery to be loaded on the page.

if ( typeof(jQuery) === 'function' ) {
    jQuery(document).ready(function($) {
        jQuery.fn.extend({
            getPath: function() {
                var path, node = this;
                while (node.length) {
                    var realNode = node[0],
                        name = realNode.localName;
                    if (!name) break;
                    name = name.toLowerCase();
                    var parent = node.parent();
                    var sameTagSiblings = parent.children(name);
                    if (sameTagSiblings.length > 1) {
                        var allSiblings = parent.children();
                        var index = allSiblings.index(realNode) + 1;
                        if (index > 1) {
                            name += ':nth-child(' + index + ')';
                        }
                    }
                    path = name + (path ? '>' + path : '');
                    node = parent;
                }
                return path;
            }
        });
        // Number of rage clicks
        var no_of_clicks = 3;
        //Time interval - 3 for 3 secs, 4 for secs and likewise
        var time = 2;
        var click_events = [];
        //internal variables
        var possible_click = 3;
        var radius = 100;
        function detectXClicks(count, interval) {
            var last = click_events.length - 1;
            var time_diff = (click_events[last].time.getTime() - click_events[last - count + 1].time.getTime()) / 1000;
            //returns false if it event period is longer than 5 sec
            if (time_diff > interval) return null;
            //check click distance
            var max_distance = 0;
            for (i = last - count + 1; i < last; i++) {
                for (j = i + 1; j <= last; j++) {
                    var distance = Math.round(Math.sqrt(Math.pow(click_events[i].event.clientX - click_events[j].event.clientX, 2) + Math.pow(click_events[i].event.clientY - click_events[j].event.clientY, 2)));
                    if (distance > max_distance) max_distance = distance;
                    if (distance > radius) return null;
                }
            }
            var result = {
                count: count,
                max_distance: max_distance,
                time_diff: time_diff
            }
            return result;
        }
        function removeUsedClickPoints(count) {
            click_events.splice(click_events.length - count, count);
        }
        $("body").click(function(event) {
            click_events.push({
                event: event,
                time: new Date()
            });
            //remain only required number of click events and remove left of them.
            if (click_events.length > possible_click) {
                click_events.splice(0, click_events.length - possible_click);
            }
            //detect 3 click in 5 sec
            if (click_events.length >= 3) {
                var result = detectXClicks(no_of_clicks, time);
                if (result != null) {
                    var path = $(event.target).getPath();
                    //console.log('Rage Click: ' + JSON.stringify(result));
                    dataLayer.push({
                        'event': 'rage_click',
                        'rc_element': path,
                        'rc_count': result.count,
                        'rc_max_distance': result.max_distance,
                        'rc_time_diff': result.time_diff
                    });
                    removeUsedClickPoints(3);
                }
            }
        });
    });
}

Step 2 – Create a new Trigger

The snippet from the previous step is pushing the rage_click event into the data layer every time a rage click is detected. Now we need to create a trigger that listens to that event.

Step 3 – Send an event to Google Analytics

Awesome, now let’s create a new tag that is responsible for sending the custom event to Google Analytics.

You can play around with the event parameters, especially with the event label to best match your needs but the recommended values are as seen in the screenshot above.

Before publishing your changes, don’t forget to enter the preview mode in Google Tag Manager and test the setup yourself. Go ahead and do a few rage clicks and see if an event is getting sent to Google Analytics. Also, check the event parameters and see if they match your expectations.

Step 4 – Using this data

Okay, so you have configured everything correctly, tested it and it works fine. Now, how do you put this data into use?

First, go into Google Analytics and find your rage click events. If you did as described in this post, you find them by clicking on Overview under Behavior –> Events, then find the “Rage Click” event category.

Click on the “Rage Click” event category and choose Event Action to see the elements on which the rage clicks happened.

Since elements with the same selectors might be on different pages, it might be helpful to apply a secondary dimension “Page”.

Now, all you need to do is to pick one element, copy its selector and go to the page seen in the secondary dimension.

Next, open the Javascript console of your browser (press F12) and paste your selector in the following format:

jQuery('YOUR>SELECTOR>HERE');

Hover over the line that was returned in the console and it should highlight the element in the DOM.

If you prefer element class over the selector, you can change the event action in GTM from the rc_element to GTM’s built-in Click Class variable.

Great! That’s it, should you need any help with tracking rage clicks using Google Tag Manager and Google Analytics, post your questions in the comments below.

Should you need further help with your analytics setup, take a look at our services.

Cover photo by Emmanuel on Unsplash

The post Tracking Rage Clicks Using Google Tag Manager and Google Analytics appeared first on Reflective Data.

In case your tool of choice is Google Optimize, you should be using their official anti-flicker snippet to minimize the flicker effect.

<!-- Anti-flicker snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date; h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')}; (a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c; })(window,document.documentElement,'async-hide','dataLayer',4000, {'OPT_CONTAINER_ID':true});</script>

Looking at the anti-flicker snippet (previously known as page-hiding snippet), you see that the default timeout is set to 4000ms. That means that, potentially, some of your visitors may see a blank white page for 4 seconds.

Since four seconds is a long time, many companies reduce it. A common timeout I’ve seen is 2 seconds. Changing the maximum timeout to a shorter period, although, means that there can be a good amount of people to whom the snippet occasionally times out.

When the anti-flicker snippet times out, no experiments will be loaded on that page load (people will see the control for all experiments and personalizations) which can lead to a user experience where a single user is seeing different variations in single session.

What you probably want to know is the optimal timeout period for your website. To figure that out, you’d need to know how many timeouts occur with your current setup. Let’s take a look how to set that up using Google Tag Manager and Google Analytics.

Before moving forward, you should read about how the anti-flicker snippet works.

Catching the timeout

To make this a little bit easier for us, Google has added a variable in the data layer that indicates whether the snipped has timed out or not.

You can access this variable like so:

window.dataLayer.hide["GTM-xxxxxx"] where GTM-xxxxxx stands for your Optimize container ID.

To make sure it’s not too easy, though, they don’t push this variable into the data layer as you normally would. This means you can’t access it using GTM Data Layer variable nor the Custom Javascript variable.

What you need is a Custom Javascript function variable in GTM to check the value.

Here’s the function you can use

function () { 
    if ( window.dataLayer.hide ) { 
        return window.dataLayer.hide["GTM-xxxxxxx"]; 
    } 
}

And here is the same function implemented in Google Tag Manager.

PS! In the beginning, the value is always true, it turns to false if the timeout period is over and it managed to load Optimize before this happened (the snippet did not time out).

Our recommendation is to check the value on GTM’s default DOM Ready event.

Sending data to Google Analytics

This part is quite straightforward for anyone that has used GTM to send custom events to Google Analytics so let’s get right to it.

1. Create the DOM Ready trigger

In case you haven’t configured this default trigger in GTM, go ahead do it now.

2. Create a new Tag for sending the event to Google Analytics

Create a new Tag with a tag type of Google Analytics: Universal Analytics and choose track type of Event.

These are the recommended event parameters but you can use whatever works for you.

Category: optimize

Action: timeout

Label: true/false (using the Custom Javascript function variable you created before)

Non-Interaction Hit: True (because it’s not related to a user action)

That’s it. This is all you need to start tracking Optimize anti-flicker snippet timeouts using Google Tag Manager and Google Analytics.

How to use this data?

Your goal should be to find the optimal timeout duration for your website and audience. The percentage of users who experience the timeout should be kept under 10% and you might consider excluding those with timeouts from your post-analysis process using a custom segment in Google Analytics.

Any questions or ideas? As always, feel free to post them in the comments below.

The post Tracking Optimize Anti-Flicker Snippet Timeout in Google Analytics appeared first on Reflective Data.

Since using incognito mode can skew the numbers you see in analytics, it is really good to know the estimated percentage of visitors that prefer to stay incognito.

What kind of implications does incognito mode cause?

• Inaccurate user count – every session is a new user
• Inaccurate sessions per user count – incognito users will always have only one session
• Broken A/B testing logic – users in incognito are likely to see different variation every time they visit
• Broken promotions – users are likely to see “only once” popups and other elements in every session

Tracking incognito users in Google Analytics

Unfortunately, browsers don’t have a default solution for detecting whether users are in incognito or not. Nor are they making it easy to figure it out using custom Javascript.

For every browser, the solution is a bit different and they might be changing when a new version of the browser is released. We are doing our best to keep this post up to date.

Here’s the Google Tag Manager setup that we are using to track incognito visitors to Reflective Data blog.

Google Tag Manager custom HTML tag

Name: Detect Incognito Browser

Type: Custom HTML

Trigger: All Pages

Code:

<script>
(function (cb) {
    var db,
    on = cb.bind(null, 'true'),
    off = cb.bind(null, 'false')

    function tryls() {
        try {
            localStorage.length ? off() : (localStorage.x = 1, localStorage.removeItem("x"), off());
        } catch (e) {
            // Safari only enables cookie in private mode
            // if cookie is disabled then all client side storage is disabled
            // if all client side storage is disabled, then there is no point
            // in using private mode
            navigator.cookieEnabled ? on() : off();
        }
    }

    // Blink (chrome & opera)
    window.webkitRequestFileSystem ? webkitRequestFileSystem(0, 0, off, on)
    // FF
    : "MozAppearance" in document.documentElement.style ? navigator.serviceWorker ? off() : on()
    // Safari
    : /constructor/i.test(window.HTMLElement) || window.safari ? tryls()
    // IE10+ & edge
    : !window.indexedDB && (window.PointerEvent || window.MSPointerEvent) ? on()
    // Rest
    : off()
})(function (isPrivateMode) { window.dataLayer.push({event: 'detected_incognito', is_incognito: isPrivateMode}); });
</script>

Credit: This code is a slightly modified version of the snippet posted on Stack Overflow by the user Endless.

Works in the following browsers:

• Chrome
• Firefox
• Safari
• IE 10+
• Edge

Google Tag Manager Data Layer variable

Name: DLV – Is Incognito

Data Layer Variable Name: is_incognito

Data Layer Version: Version 2

Google Tag Manager Custom Event trigger

Name: CE – Detected Incognito

Event name: detected_incognito

This trigger fires on: All Custom Events

Google Tag Manager Google Analytics tag

Name: UA – Is Incognito Browser

Type: Event

Category: browser_info

Action: incognito

Label: {{DLV – Is Incognito}}

Non-Ineraction Hit: True

Bonus: sending data to a custom dimension

The previous setup sends incognito usage info to Google Analytics as a custom event. In some cases, having it as a custom dimension could be more useful. Here’s how you set that up.

1. Go to Admin panel of your Google Analytics account
2. In property settings, choose Custom Dimensions under Custom Definitions
3. Add a new Custom Dimension

Name: Is Incognito
Scope: Session

Now, remember the index your newly created dimension has. In our case, it is 12.

Modify your Google Tag Manager tag “UA – Is Incognito Browser” to include a Custom Dimension and set its value equal to {{DLV – Is Incognito}}.

Using this in reports

Congratulations! If you did everything correctly, you will soon see data about incognito users flowing into Google Analytics.

There are several ways how you can include this data in your reports but perhaps you will find using it in custom segments the most useful. This allows you to see how regular vs incognito users perform based on any metric you track in Google Analytics.

Also, you could build all kinds of custom reports. Here’s a very basic one that’s good for testing if your setup works as expected.

And here’s how it will look like.

As we can see from the custom report above, our demo site received 794 sessions, out of which 4.3% came from browsers turned into incognito mode.

---

That’s it – now you have information about users that have turned their browser into incognito or private mode and how big impact they might have on your metrics and A/B testing program.

If you have any questions or ideas for improvement, please let us know in the comments below.

The post How to Detect and Track Incognito Users with Google Analytics and Google Tag Manager appeared first on Reflective Data.