Comment analyser les devices mobile dans CS Live

Cet article vous montre comment utiliser l'outil Developer de Chrome avec CS Live pour analyser votre site web mobile. En visualisant votre site en format mobile avec les métriques CS Live, vous pouvez voir exactement comment les utilisateurs mobiles interagissent avec votre contenu.

Avant de commencer

Ce dont vous avez besoin :

• Navigateur Google Chrome (l'outil Developer ne fonctionne pas avec Microsoft Edge pour CS Live)
• Extension CS Live déjà installée (voir Comment configurer CS Live si vous ne l'avez pas encore installée)
• Un site web avec le tag de suivi Contentsquare installé
• Au moins 30 jours de données de trafic mobile pour des métriques fiables

Instructions étape par étape

Étape 1 : Ouvrir les Developer Tools

Les Developer Tools (également appelés DevTools) sont une fonctionnalité intégrée dans Chrome qui vous permet d'inspecter et de tester les sites web.

Il y a deux options pour ouvrir les Developer Tools :

La méthode clic droit

1. Faites un clic droit sur votre page.

2. Sélectionnez 'Inspecter' dans le menu qui apparaît.

   

3. Les Developer Tools s'ouvriront en bas ou sur le côté de votre navigateur.

Le raccourci clavier

• Mac : Commande + Option + J
• Windows/Linux : Contrôle + Maj + J

Étape 2 : Positionner les Developer Tools sur le côté droit

1. Cliquez sur les 'trois points verticaux (⋮)' dans le coin supérieur droit du panneau Developer Tools.

   

2. Cliquez sur l'icône d'ancrage à droite (rectangle avec une barre à droite).

   

3. Les Developer Tools apparaissent maintenant sur le côté droit de votre écran.

Étape 3 : Trouver et ouvrir l'onglet CS Live

1. Regardez le menu supérieur dans les Developer Tools (vous verrez des onglets comme "Elements", "Console", "Sources").

   

2. Cherchez l'onglet Contentsquare - CS Live.
3. Cliquez dessus pour activer CS Live.

Si vous ne voyez pas 'Contentsquare - CS Live' dans le menu :

1. Cliquez sur les flèches '>>' à droite du menu des onglets.

   

2. Sélectionnez Contentsquare - CS Live dans le menu déroulant.

    

Étape 4 : Ouvrez et lancez CS Live

1. Assurez-vous d'être connecté à la plateforme Contentsquare.

2. Cliquez sur l'icône CS Live.

   

   Si vous ne voyez pas l'icône CS Live, cliquez sur les Extensions (icône puzzle) et trouvez CS Live dans la liste déroulante.

3. Cliquez sur 'Démarrer l'analyse'. 
    

Étape 5 : Passez en vue mobile

1. Cliquez sur le device en haut à gauche des Developer Tools.

   

2. Votre site web apparaît maintenant en format mobile sur la partie gauche.

3. Le panneau CS Live apparaît sur la partie droite.

   

Étape 6 : Sélectionnez un device mobile

1. Cliquez sur le menu déroulant Device en haut de la vue de votre site web (il peut indiquer 'Responsive' ou afficher un nom de device).

   

2. Sélectionnez un device spécifique.
3. Votre site se redimensionne pour correspondre à la taille d'écran de ce device.

Étape 7 : Configurez votre analyse

1. Cliquez sur l’icône 'calendrier' et définissez votre plage de dates. Par ex. Les 30 derniers jours.

   

2. Cliquez sur 'Appliquer'.
3. Le device est automatiquement réglé sur mobile (vous pouvez changer pour Tablette si nécessaire).

4. Sélectionnez une métrique que vous souhaitez appliquer à votre analyse.

   

Étape 8 : Analysez votre contenu

1. Cliquez sur 'Modifier les zones'.

   

2. Choisissez le mode de modification :
   • Zones simples : Créez une zone unique ou un groupe de zones non liées.
   • Zones multiples : Créez un groupe de zones qui sont au même niveau dans le HTML. Cliquez sur les éléments pour visualiser la date.
3. Cliquez sur l’élément pour créer la zone (un cadre coloré apparaît lorsqu’une zone peut être créée).
4. Répétez pour tous les éléments que vous souhaitez analyser.

Étape 9 : Enregistrez vos zones

Une fois que vous avez créé vos zones, vous pouvez les enregistrer.

1. Cliquez sur 'Plus d’actions'.

   

2. Cliquez sur 'Enregistrer dans Contentsquare'.
3. Choisissez de créer un nouveau zoning et donnez-lui un nom.
4. Cliquez sur 'Enregistrer'.