Application mobile (React Native)

Sessio mesure aussi vos applications mobiles React Native : écrans vus, visiteurs, sessions, temps passé par écran, pays, appareil, version de l'app et événements personnalisés. Le SDK @sessio/react-native envoie ces données au même dashboard que vos sites web.

#1. Créer l'application dans Sessio

1. Dans le dashboard, ouvrez Sites puis Nouveau site ou app.
2. Choisissez Application mobile (Android ou iOS, avec React Native).
3. Donnez un nom à l'application. L'identifiant de l'app est facultatif.
4. Une fois l'application créée, ouvrez sa fenêtre d'installation : elle affiche votre code de suivi de 32 caractères et un extrait prêt à copier.

#2. Installer le paquet

npm install https://api-sessio.flamme.work/sdk/sessio-react-native-0.1.0.tgz @react-native-async-storage/async-storage

Le paquet est téléchargé depuis le serveur Sessio. Il s'installe sous le nom @sessio/react-native, c'est donc ce nom que vous importez dans votre code. Avec Yarn ou pnpm, la même adresse fonctionne : yarn add <adresse>, pnpm add <adresse>.

Pour passer à une nouvelle version du SDK, relancez la commande avec l'adresse de cette version (npm update ne la trouve pas toute seule).

• @react-native-async-storage/async-storage est facultatif mais recommandé. Sans lui, les données en attente restent en mémoire et sont perdues si l'application est fermée avant l'envoi.
• react-native-device-info est facultatif lui aussi. S'il est installé, le modèle du téléphone, le fabricant, la version et le build de l'app sont envoyés automatiquement.

#3. Démarrer le SDK

À l'entrée de l'application (index.js ou App.tsx) :

import { Sessio } from '@sessio/react-native';

Sessio.init({
  siteCode: 'VOTRE_CODE_DE_SUIVI',
  appVersion: '1.4.0', // inutile avec react-native-device-info
});

#4. Suivre les écrans

#Avec React Navigation (automatique)

import { NavigationContainer, useNavigationContainerRef } from '@react-navigation/native';
import { createNavigationTracker } from '@sessio/react-native';

export default function App() {
  const navigationRef = useNavigationContainerRef();
  const suivi = React.useMemo(() => createNavigationTracker(navigationRef), [navigationRef]);
  return (
    <NavigationContainer ref={navigationRef} onReady={suivi.onReady} onStateChange={suivi.onStateChange}>
      {/* vos écrans */}
    </NavigationContainer>
  );
}

Chaque changement d'écran envoie le nom de la route active, sans doublon si vous restez sur le même écran. Avec des navigateurs imbriqués, createNavigationTracker(navigationRef, { chemin: true }) envoie le chemin complet, par exemple Boutique/Produit.

#À la main

Sans React Navigation, appelez Sessio.screen() à chaque affichage d'un écran :

Sessio.screen('Accueil');
Sessio.screen('Produit/Détail');

Le nom de l'écran sert d'identifiant : gardez toujours la même orthographe.

#5. Envoyer des événements

Sessio.track('achat', { montant: 5000 });

Les événements apparaissent dans la page Événements et peuvent servir d'étapes dans un funnel. Le premier argument est le nom, le second est facultatif et porte des propriétés.

#6. Reconnaître un visiteur

Sessio.identify('[email protected]'); // un libellé pour reconnaître cette installation
Sessio.identify('');                 // l'efface

C'est facultatif. Utilisez-le avec le consentement de la personne.

Deux autres fonctions complètent l'API :

await Sessio.flush(); // envoi immédiat de ce qui est en attente
await Sessio.reset(); // nouvel identifiant visiteur (déconnexion, changement de compte)

#Comment ça marche

• Visiteurs : un identifiant aléatoire est créé au premier lancement et conservé. C'est lui qui compte les visiteurs uniques, nouveaux et récurrents.
• Sessions : une session démarre à chaque lancement à froid, et une nouvelle quand l'application est restée plus de 30 minutes en arrière-plan. Quand l'application passe en arrière-plan, l'écran ouvert est clos (c'est ce qui donne le temps passé) puis les données en attente sont envoyées. Au retour, l'écran courant est rouvert.
• Hors-ligne : les événements sont conservés (1 000 au plus, les plus anciens sont jetés au-delà) et envoyés par lots dès que le réseau revient, avec un délai croissant entre les essais, de 2 secondes jusqu'à 5 minutes. Chaque événement porte un identifiant unique : un lot renvoyé après une coupure n'est jamais compté deux fois.
• Pays et ville : déduits de l'adresse IP par le serveur, comme pour un site web.

#Ce qui est collecté

Ce qui n'est pas collecté : pas de replay ni d'enregistrement d'écran, pas de heatmap, pas de capture des appuis, pas de rapport d'erreurs ou de plantages, pas d'identifiant publicitaire, pas de contacts, pas de position précise.

#Vie privée

Le SDK n'utilise ni cookie ni identifiant publicitaire. L'identifiant d'installation est propre à votre application et sans lien avec l'appareil ; Sessio.reset() en crée un nouveau. N'envoyez pas de données personnelles dans les noms d'écrans ni dans les propriétés des événements.

#Dépannage

#Rien n'arrive dans le dashboard

1. Le code de suivi : il doit être celui de l'application (32 caractères), sans espace. Un code absent ou trop court laisse le SDK inactif, avec un avertissement [Sessio] siteCode manquant ou invalide dans la console.

2. L'adresse du serveur : si vous hébergez Sessio vous-même, passez endpoint à Sessio.init.

3. Le mode debug : activez-le pour voir dans la console ce que fait le SDK.

   tsCopier

   Sessio.init({ siteCode: 'VOTRE_CODE_DE_SUIVI', debug: true });

4. La plateforme : seuls iOS et Android sont pris en charge. Le SDK reste inactif ailleurs.

5. Un envoi en attente : les données partent toutes les 10 secondes et quand l'application passe en arrière-plan. Pour un test, appelez await Sessio.flush().

#Les écrans ne sont pas comptés

Vérifiez que onReady et onStateChange sont bien passés au NavigationContainer, ou appelez Sessio.screen() vous-même.

#Le modèle du téléphone ou la version de l'app est vide

Installez react-native-device-info, ou renseignez appVersion et appBuild dans Sessio.init.

#Des données manquent après une coupure réseau

Installez @react-native-async-storage/async-storage : sans lui, la file d'attente ne survit pas à la fermeture de l'application.