Google Tag Manager: tracking mobile swipes

Identifying users behaviors across different devices allows to make informed assessments regarding the customer journey and also evaluate the proficiency of the user interface for a website or an application.

If we consider the mobile devices, the swipe is the typical navigation gesture performed by users, which enable them perform tasks rapidly and intuitively using touch.

A swipe gesture occurs when the user moves one or more fingers across the screen in horizontal or vertical direction to browse through images, moving through menu entries or scrolling the content we are reading.

We usually rely on the clicks or the scroll tracking to look into the behaviors of mobile users. The following Custom HTML and the associated event help to enrich your data set, obtain more information about your users behavior and as a consequence outline targeted CRO actions.

A Custom HTML to track the swipes

As mentioned earlier, in order to initialize the tracking, we need to create a custom HTML which enable to track if a user performs a swipe in one of the four directions (up, down, left and right).

Find the custom HTML code below:

<script>
document.addEventListener('touchstart', handleTouchStart, false); //inizio tap
document.addEventListener('touchmove', handleTouchMove, false); // swipe
var xDown = null;
var yDown = null;
function handleTouchStart(evt) {
    xDown = evt.touches[0].clientX;
    yDown = evt.touches[0].clientY;
};
function handleTouchMove(evt) {
    if ( ! xDown || ! yDown ) {
        return;
    } //nessun movimento
    var xUp = evt.touches[0].clientX;
    var yUp = evt.touches[0].clientY;
    var xDiff = xDown - xUp;
    var yDiff = yDown - yUp;
    if ( Math.abs( xDiff ) > Math.abs( yDiff ) ) {
        if ( xDiff > 0 ) {
 
            /* swipe sinistra */
          dataLayer.push({'event':'Swipe', 'eventCategory':'Swipe','eventAction':'SX', 'eventLabel':document.location.pathname});
 
        } else {
            /* swipe destra */
         dataLayer.push({'event':'Swipe', 'eventCategory':'Swipe','eventAction':'DX', 'eventLabel':document.location.pathname});
 
        }
    } else {
        if ( yDiff > 0 ) {
 
            /* swipe up */
            dataLayer.push({'event':'Swipe', 'eventCategory':'Swipe','eventAction':'UP', 'eventLabel':document.location.pathname});
 
        } else {
 
            /* swipe down */
            dataLayer.push({'event':'Swipe', 'eventCategory':'Swipe','eventAction':'DOWN', 'eventLabel':document.location.pathname});
 
        }
    }
    /* reset values */
    xDown = null;
    yDown = null;
};
</script>

Each user’s gesture can be linked to a dataLayer which identifies both the direction and the page where the swipe occurred.

The tag should be set to be triggered on each page (or element you need to track) of your mobile/tablet version of your site. You don’t need necessarily to specify “is mobile”, but in such case you could have “false swipes” generated by fake mobile or tablet browsing simulated by users on desktop changing the user agent.

Event setup and Outcomes

Once the custom HTML triggering rule is set you can create a Google Analytics Tag and pass inside a variable eventCategory, eventAction and eventLabel, that will be fired when the event “Swipe” occurs.

Once the proper functioning via Google Tag Manager debugging tool, you can publish the container and the outcome is the following event:

where for each Swipe Type you can go into details and identify the page where the action is triggered.

Keyfindings

Analyzing users’ swipes in different sections or items is extremely valuable to better figure out our user behavior. It can provide very helpful data if combined together with the tracking of mobile device screen orientation: it enable us to understand if the user needs to swipe while visualizing our mobile site in landscape or portrait or shifting from a view mode to another (as an example in landscape mode he missed the ‘add to cart’ button and needs to swipe). The tracking allows to analyze the UI and evaluate new hypotheses to be tested.

The swipe tracking helps to analyze elements such slider view + slider click or navigation elements such as the menu items, that require gestures for achieving proper site navigation.

I suggest to combine the swipe tracking together with further trackings to obtain a full overview of the user behavior.