Créer une variable GTM pour identifier la version du site affichée
Dans cet exemple, je vais vous montrer comment créer une variable GTM qui permet d'identifier si vos internautes naviguent sur la version classique ou responsive de votre site. Pour commencer, ouvrez votre conteneur GTM et dirigez vous dans la partie « variables ».
1. Créez une nouvelle variable, sélectionnez « JavaScript personnalisé » puis collez le code JS suivant :
function(){
var screenSize = window.innerWidth;
var screenVersion = 'normal';
if ( screenSize < 720 ) { screenVersion = 'responsive mobile';}
else if ( screenSize < 1280 ) { screenVersion = 'responsive tablette';}
return screenVersion;
}Interprétation du code :
La variable « screenSize » permet de récupérer la largeur du contenu visible de la fenêtre de navigation.
La variable « screenVersion » est initialisée à « normal » (qui correspond à la version web). Elle pourra évoluer en fonction de la largeur de l'écran.
Pour connaître la version du site affichée, on va procéder à différents tests (instructions IF) :
- Si la valeur de « screenSize » est inférieure à 720px, on modifie la valeur de « screenVersion » à « responsive mobile ».
- Sinon si la valeur de « screenSize » est inférieure à 1280px, on modifie la valeur de « screenVersion » à « responsive tablette ».
Dès lors que tous les tests sont effectués, la fonction javascript va retourner la dernière valeur de « screenVersion ».
Vous pouvez adapter les dimensions (en pixel) pour que cela puisse correspondre aux breakpoint de votre site.
Configuration GTM et Google Analytics GA4
Maintenant que vous avez créé votre variable, ajoutez-la en tant que paramètre d'événement à votre balise GA4
Vérifiez son bon fonctionnement en cliquant sur « prévisualiser » (tag assitant) ou directement via la console de votre navigateur. Vous devriez obtenir un nouveau paramètre « breakpoint » qui prend comme valeur la version affichée de votre site.
Avant de pouvoir utiliser cette dimension, il faudra au préalable la déclarer dans votre propriété GA4. Pour cela rendez-vous sur votre propriété GA4 puis cliquez sur « Administration > Affichage des données > Définitions personnalisées > Créer une dimension personnalisée ». Complétez les champs requis en renseignant dans la partie « Paramètre d'événement » le nom de la propriété « breakpoint ».
Attendez 24h à 48h pour pouvoir utiliser cette dimension et commencer vos analyses. Vous pouvez à présent utiliser cette nouvelle dimension en tant que segment ou croisement pour comparer les résultats entre chaque version d'affichage de votre site.
Si vous souhaitez aller plus loin dans vos analyses vous pouvez également perfectionner ce code pour identifier si vos internautes consultent votre site en mode portrait ou paysage et croiser cette dimension avec la dimension catégorie de l'appareil.
