Avec l’importance croissante de la navigation mobile chez vos utilisateurs, vous êtes à la recherche constante d’amélioration de l’UX sur votre site web. Pour cela vous avez bien sûr travaillé le responsive design, l’affordance des fonctionnalités. Vous avez également regardé dans votre outil d’analyse quels sont les appareils les plus fréquemment utilisés chez vos visiteurs.
Afin de mieux cerner le contexte navigationnel de vos utilisateurs, nous vous proposons aujourd’hui de mesurer la part de votre trafic ayant une utilisation smartphone en format paysage.
De prime abord, l’utilisation du téléphone “couché” pour naviguer peut sembler anecdotique, et ce à juste titre. On pense notamment au cas d’une lecture vidéo au cours de laquelle on va volontiers switcher son écran en format paysage. Néanmoins, c’est justement l’aspect inhabituel de cette pratique qui peut vous donner des indications sur des anomalies présentes dans votre parcours. En effet, si on note une page au cours de laquelle les utilisateurs ont une tendance significativement plus élevée à passer en mode landscape, il y a peut-être un élément à corriger dans votre expérience utilisateur : lorsque le texte est trop petit par exemple.
Nous présentons donc aujourd’hui un tutoriel Google Tag Manager pour tracker deux événements Google Analytics: l’orientation du téléphone lors de l’arrivée de l’utilisateur mobile sur votre site, et le changement de position de l’écran lors de son parcours.
Pour ce faire, on commence par créer une première balise HTML personnalisée pour créer le code de suivi et saisir les informations à transmettre à la couche de données.
<script> var mql = window.matchMedia("(orientation: portrait)"); // If = portrait if(mql.matches) { dataLayer.push({'event':'orientation','pos':'Portrait'}) } else { dataLayer.push({'event':'orientation','pos':'Landscape'}) } // Change view mql.addListener(function(m) { if(m.matches) { dataLayer.push({'event':'changeori','oldpos':'Landscape','newpos':'Portrait'}) } else { dataLayer.push({'event':'changeori','oldpos':'Portrait','newpos':'Landscape'}) } }); </script>
Cette première balise sera déclenchée au page vue sur toutes les pages.
Ensuite on crée trois variables qui vont nous permettre d’alimenter nos deux events GA :
- pos : qui est la position de l’écran de l’utilisateur
- newpos : qui est la position de l’écran après une rotation d’écran
- oldpos : qui est la position de l’écran qui précède une rotation
Ceci étant fait, on peut ensuite passer à la création de nos deux balises universal analytics. Attention, pensez à bien indiquer que votre event n’est pas comptabilisé comme une interaction, auquel cas le calcul du taux de rebond serait modifié.
On crée donc la balise d’événement avec la position initiale du téléphone au démarrage de la session. On lui associe un déclencheur basé sur l’événement personnalisé “orientation” qui a été défini dans notre première balise HTML personnalisée :
Au sein de ce déclencheur, on applique une règle qui n’inclut que le device mobile, pour ne pas avoir d’éventuelles remontées provenant de desktop ou tablette qui viendraient biaiser nos statistiques.
Pour cela nous allons créer une variable de javascript personnalisé « Device type », avec la fonction suivante :
function(){
if (navigator.userAgent.match(/(android|iphone|ipad|blackberry|symbian|symbianos|symbos|netfront|model-orange|javaplatform|iemobile|windows phone|samsung|htc|opera mobile|opera mobi|opera mini|presto|huawei|blazer|bolt|doris|fennec|gobrowser|iris|maemo browser|mib|cldc|minimo|semc-browser|skyfire|teashark|teleca|uzard|uzardweb|meego|nokia|bb10|playbook)/gi)) {
if ( ((screen.width >= 480) && (screen.height >= 800)) || ((screen.width >= 800) && (screen.height >= 480)) || navigator.userAgent.match(/ipad/gi) ) {
return('t');
} else {
return('m');
}
} else {
return('d');
} }
Cette fonction va attribuer « d », « m » et « t » pour chaque device. On applique alors une règle à notre déclencheur pour que notre événement Google Analytics ne se déclenche que sur mobile.
Ensuite on crée l’événement qui va signaler un changement de position de l’écran, avec un déclencheur basé sur l’événement personnalisé “changeori”, auquel on n’inclut que le device mobile également.
Une fois la publication du conteneur GTM, voici les remontées dans Google Analytics :
Pour trouver les pages récurrentes lors du changement d’écran, pensez à appliquer “page” en dimension secondaire.
Si vous avez besoin d’accompagnement sur la mise en place de tracking ou d’analyse sur vos données analytics, n’hésitez pas à nous contacter!