Documentation Intégration Analytics

1.1 Périmètre d'Application

2.1 Google Analytics 4 (GA4)

• Acquisition et attribution marketing
• Analyse du trafic et des sources
• Rapports d'audience et démographie
• Intégration Google Ads pour remarketing
• Conversion tracking (inscription, liaison carte)

2.2 Mixpanel

• Analyse comportementale approfondie
• Funnels de conversion détaillés
• Cohortes et rétention utilisateur
• Segmentation avancée
• A/B testing et expérimentation

2.3 Comparatif et Complémentarité

3.1 Schéma d'Architecture

[App Mobile Angular + Ionic]
        |
        v
[Analytics Service Layer]
    /              v             v
[GA4 SDK]    [Mixpanel SDK]
   |              |
   v              v
[Google]     [Mixpanel]
Analytics     Servers
   |              |
   v              v
[BigQuery]   [Data Export]
               /
         v     v
    [Data Warehouse]
            |
            v
    [Business Intelligence]
        (Metabase/Looker)

3.2 Flux de Données Analytics

4.1 Création du Compte et de la Propriété

1. 1

   Accéder à analytics.google.com

2. 2

   Créer un compte "REWAPP"

3. 3

   Créer une propriété "REWAPP Production"

4. 4

   Sélectionner "Application mobile" comme plateforme

5. 5

   Configurer le fuseau horaire : Europe/Paris

6. 6

   Devise : EUR

4.2 Installation SDK Mobile (Angular + Ionic)

Dépendances à installer

npm install @react-native-firebase/app @react-native-firebase/analytics

Configuration iOS (ios/Podfile)

pod 'Firebase/Analytics'

Configuration Android (android/app/build.gradle)

implementation platform('com.google.firebase:firebase-bom:32.0.0')
implementation 'com.google.firebase:firebase-analytics'

Initialisation dans l'application

import analytics from '@react-native-firebase/analytics';

// Log screen view
await analytics().logScreenView({
  screen_name: 'Home',
  screen_class: 'HomeScreen',
});

// Log custom event
await analytics().logEvent('transaction_completed', {
  transaction_id: 'TXN-123456',
  value: 25.50,
  currency: 'EUR',
  items: [{ item_name: 'Cashback', quantity: 1 }],
});

4.3 Configuration des Flux de Données

4.4 Paramètres de Consentement RGPD

Variables de Consentement GA4

analytics_storage: granted | denied
ad_storage: granted | denied
ad_user_data: granted | denied
ad_personalization: granted | denied

Configuration par défaut (avant consentement)

gtag('consent', 'default', {
  'analytics_storage': 'denied',
  'ad_storage': 'denied',
  'ad_user_data': 'denied',
  'ad_personalization': 'denied',
  'wait_for_update': 500,
});

Mise à jour après consentement

gtag('consent', 'update', {
  'analytics_storage': 'granted',
  'ad_storage': userConsent.marketing ? 'granted' : 'denied',
});

5.1 Création du Projet

1. 1

   Accéder à mixpanel.com

2. 2

   Créer un nouveau projet "REWAPP"

3. 3

   Sélectionner la région : EU (RGPD)

4. 4

   Récupérer le Project Token

5.2 Installation SDK Mobile (Angular + Ionic)

npm install mixpanel-react-native

Initialisation

import { Mixpanel } from 'mixpanel-react-native';

const mixpanel = new Mixpanel('YOUR_PROJECT_TOKEN', true);

// Initialisation avec options RGPD
await mixpanel.init();
mixpanel.setServerURL('https://api-eu.mixpanel.com');
mixpanel.setUseIpAddressForGeolocation(false);

5.3 Configuration des Environnements

5.4 Identity Management

Identification Utilisateur

// Après inscription/connexion réussie
mixpanel.identify(userId);

// Création du profil utilisateur
mixpanel.getPeople().set({
  '$email': user.email,
  '$name': user.firstName + ' ' + user.lastName,
  '$created': user.createdAt,
  'account_type': 'client',
  'has_linked_card': false,
});

Alias pour tracking pré-inscription

// Avant inscription (utilisateur anonyme)
const anonymousId = mixpanel.getDistinctId();

// Après inscription
mixpanel.alias(newUserId);
mixpanel.identify(newUserId);

6.1 Événements Cœur de l'Application

6.2 Événements Transaction et Points

6.3 Événements QR Code

6.4 Événements Navigation et Engagement

6.5 Format des Événements

Structure JSON Standard

{
  "event": "transaction_detected",
  "timestamp": "2025-11-24T14:30:00.000Z",
  "user_id": "usr_123456789",
  "session_id": "sess_abcdef123",
  "device": {
    "platform": "ios",
    "os_version": "17.1",
    "app_version": "1.2.0",
    "device_model": "iPhone 14"
  },
  "properties": {
    "amount": 45.50,
    "currency": "EUR",
    "merchant_id": "mer_987654321",
    "merchant_name": "Boulangerie du Coin",
    "merchant_category": "food",
    "points_earned": 18,
    "transaction_id": "txn_xyz789"
  },
  "context": {
    "locale": "fr_FR",
    "timezone": "Europe/Paris",
    "network": "wifi"
  }
}

7.1 Propriétés de Base

7.2 Propriétés Comportementales

7.3 Propriétés de Segmentation

8.1 Service Analytics Centralisé

Création d'un service abstrait pour centraliser les appels analytics :

// services/analytics/AnalyticsService.ts

import analytics from '@react-native-firebase/analytics';
import { Mixpanel } from 'mixpanel-react-native';
import { ConsentManager } from './ConsentManager';

interface EventProperties {
  [key: string]: string | number | boolean | object;
}

interface UserProperties {
  [key: string]: string | number | boolean | Date;
}

class AnalyticsService {
  private static instance: AnalyticsService;
  private mixpanel: Mixpanel;
  private isInitialized: boolean = false;
  private consentManager: ConsentManager;

  private constructor() {
    this.mixpanel = new Mixpanel(process.env.MIXPANEL_TOKEN!, true);
    this.consentManager = ConsentManager.getInstance();
  }

  static getInstance(): AnalyticsService {
    if (!AnalyticsService.instance) {
      AnalyticsService.instance = new AnalyticsService();
    }
    return AnalyticsService.instance;
  }

  async initialize(): Promise<void> {
    if (this.isInitialized) return;
    
    await this.mixpanel.init();
    this.mixpanel.setServerURL('https://api-eu.mixpanel.com');
    this.mixpanel.setUseIpAddressForGeolocation(false);
    
    this.isInitialized = true;
  }

  async trackEvent(
    eventName: string,
    properties?: EventProperties
  ): Promise<void> {
    if (!this.consentManager.hasAnalyticsConsent()) {
      return;
    }

    const enrichedProperties = this.enrichProperties(properties);

    // Envoi parallèle GA4 + Mixpanel
    await Promise.all([
      analytics().logEvent(eventName, enrichedProperties),
      this.mixpanel.track(eventName, enrichedProperties),
    ]);
  }

  async trackScreen(screenName: string, screenClass?: string): Promise<void> {
    if (!this.consentManager.hasAnalyticsConsent()) {
      return;
    }

    await Promise.all([
      analytics().logScreenView({
        screen_name: screenName,
        screen_class: screenClass || screenName,
      }),
      this.mixpanel.track('screen_view', {
        screen_name: screenName,
        screen_class: screenClass || screenName,
      }),
    ]);
  }

  async identify(userId: string): Promise<void> {
    await analytics().setUserId(userId);
    this.mixpanel.identify(userId);
  }

  async setUserProperties(properties: UserProperties): Promise<void> {
    if (!this.consentManager.hasAnalyticsConsent()) {
      return;
    }

    // GA4 User Properties
    for (const [key, value] of Object.entries(properties)) {
      await analytics().setUserProperty(key, String(value));
    }

    // Mixpanel People Properties
    this.mixpanel.getPeople().set(properties);
  }

  async reset(): Promise<void> {
    await analytics().setUserId(null);
    this.mixpanel.reset();
  }

  private enrichProperties(properties?: EventProperties): EventProperties {
    return {
      ...properties,
      app_version: process.env.APP_VERSION,
      timestamp: new Date().toISOString(),
      session_id: this.getSessionId(),
    };
  }

  private getSessionId(): string {
    return 'sess_' + Date.now();
  }
}

export default AnalyticsService.getInstance();

8.2 Exemples d'Implémentation

Tracking d'une transaction détectée

// hooks/useTransactionTracking.ts

import AnalyticsService from '../services/analytics/AnalyticsService';

export const trackTransactionDetected = async (transaction: Transaction) => {
  await AnalyticsService.trackEvent('transaction_detected', {
    amount: transaction.amount,
    currency: 'EUR',
    merchant_id: transaction.merchantId,
    merchant_name: transaction.merchantName,
    merchant_category: transaction.category,
    points_earned: transaction.pointsEarned,
    transaction_id: transaction.id,
  });

  // Mise à jour des propriétés utilisateur
  await AnalyticsService.incrementUserProperty('total_transactions', 1);
  await AnalyticsService.incrementUserProperty('total_points_earned', transaction.pointsEarned);
  await AnalyticsService.setUserProperties({
    last_transaction_date: new Date(),
    current_balance: transaction.newBalance,
  });
};

Tracking de la génération QR Code

export const trackQRGeneration = async (qrCode: QRCode) => {
  await AnalyticsService.trackEvent('qr_generated', {
    qr_id: qrCode.id,
    points_amount: qrCode.pointsAmount,
    euro_equivalent: qrCode.pointsAmount * 0.105, // Ratio +5% commerçant
    expiration_seconds: 60,
  });

  await AnalyticsService.incrementUserProperty('qr_codes_generated', 1);
};

Funnel d'inscription complet

export const trackSignupFunnel = {
  started: async (method: string) => {
    await AnalyticsService.trackEvent('signup_started', { method });
  },

  emailEntered: async () => {
    await AnalyticsService.trackEvent('signup_email_entered');
  },

  passwordCreated: async () => {
    await AnalyticsService.trackEvent('signup_password_created');
  },

  termsAccepted: async () => {
    await AnalyticsService.trackEvent('signup_terms_accepted');
  },

  completed: async (userId: string, method: string, referralCode?: string) => {
    await AnalyticsService.identify(userId);
    await AnalyticsService.trackEvent('signup_completed', {
      method,
      referral_code: referralCode || null,
      has_referral: !!referralCode,
    });
    await AnalyticsService.setUserProperties({
      created_at: new Date(),
      auth_method: method,
      acquisition_source: referralCode ? 'referral' : 'organic',
    });
  },
};

8.3 Gestion du Consentement

// services/analytics/ConsentManager.ts

import AsyncStorage from '@react-native-async-storage/async-storage';

interface ConsentState {
  analytics: boolean;
  marketing: boolean;
  personalization: boolean;
  updatedAt: string;
}

class ConsentManager {
  private static instance: ConsentManager;
  private consent: ConsentState | null = null;
  private readonly STORAGE_KEY = '@rewapp_consent';

  static getInstance(): ConsentManager {
    if (!ConsentManager.instance) {
      ConsentManager.instance = new ConsentManager();
    }
    return ConsentManager.instance;
  }

  async initialize(): Promise<void> {
    const stored = await AsyncStorage.getItem(this.STORAGE_KEY);
    if (stored) {
      this.consent = JSON.parse(stored);
    }
  }

  async updateConsent(newConsent: Partial<ConsentState>): Promise<void> {
    this.consent = {
      ...this.consent,
      ...newConsent,
      updatedAt: new Date().toISOString(),
    } as ConsentState;

    await AsyncStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.consent));
    
    // Mise à jour GA4
    if (typeof gtag !== 'undefined') {
      gtag('consent', 'update', {
        analytics_storage: this.consent.analytics ? 'granted' : 'denied',
        ad_storage: this.consent.marketing ? 'granted' : 'denied',
      });
    }
  }

  hasAnalyticsConsent(): boolean {
    return this.consent?.analytics ?? false;
  }

  hasMarketingConsent(): boolean {
    return this.consent?.marketing ?? false;
  }

  async revokeAllConsent(): Promise<void> {
    await this.updateConsent({
      analytics: false,
      marketing: false,
      personalization: false,
    });
  }
}

export default ConsentManager;

9.1 Endpoints API Analytics

{
  "success": true,
  "data": {
    "user_id": "usr_123456789",
    "period": "last_30_days",
    "metrics": {
      "transactions_count": 15,
      "total_amount_spent": 450.75,
      "points_earned": 180,
      "points_spent": 50,
      "current_balance": 230,
      "qr_codes_generated": 3,
      "favorite_merchant": {
        "id": "mer_987654",
        "name": "Café des Arts",
        "visits": 5
      }
    },
    "engagement": {
      "app_opens": 28,
      "avg_session_duration": 180,
      "days_active": 12
    }
  }
}

{
  "date_from": "2025-11-01",
  "date_to": "2025-11-24",
  "event_types": ["transaction_detected", "qr_scanned"],
  "format": "csv",
  "include_user_properties": true
}

{
  "success": true,
  "data": {
    "export_id": "exp_abc123def",
    "status": "processing",
    "estimated_completion": "2025-11-24T15:00:00Z",
    "download_url": null
  }
}

9.2 Export de Données

Export vers BigQuery (GA4)

1. 1

   Admin → Data Settings → BigQuery Linking

2. 2

   Sélectionner le projet GCP

3. 3

   Activer l'export quotidien

4. 4

   Tables créées

   events_YYYYMMDD, events_intraday_YYYYMMDD

Export Mixpanel vers S3

{
  "type": "s3",
  "bucket": "rewapp-analytics-exports",
  "region": "eu-west-3",
  "prefix": "mixpanel/",
  "format": "json",
  "schedule": "daily",
  "time": "02:00"
}

9.3 Webhooks vers Data Warehouse

{
  "event_type": "analytics.batch_ready",
  "timestamp": "2025-11-24T02:00:00Z",
  "data": {
    "batch_id": "batch_20251124",
    "events_count": 15420,
    "date_range": {
      "from": "2025-11-23T00:00:00Z",
      "to": "2025-11-24T00:00:00Z"
    },
    "download_urls": {
      "events": "https://storage.rewapp.fr/exports/events_20251124.json.gz",
      "users": "https://storage.rewapp.fr/exports/users_20251124.json.gz"
    }
  }
}

11.1 Consentement Utilisateur

11.2 Anonymisation des Données

// Configuration Mixpanel (anonymisation IP)
mixpanel.setUseIpAddressForGeolocation(false);

// Configuration GA4 (anonymisation IP)
// Activée par défaut dans GA4
// Pas de configuration supplémentaire requise

11.3 Politique de Rétention

11.4 Droits Utilisateur

{
  "success": true,
  "message": "Analytics data deletion scheduled",
  "data": {
    "deletion_id": "del_xyz789",
    "status": "scheduled",
    "estimated_completion": "2025-12-24T00:00:00Z",
    "platforms": ["ga4", "mixpanel"]
  }
}

12.1 Dashboards GA4 Préconfigurés

• Acquisition Overview : sources, campagnes, conversions
• Engagement Report : sessions, pages vues, événements
• Monetization : transactions, revenus
• Retention : cohortes, taux de retour

12.2 Dashboards Mixpanel Préconfigurés

• Signup Funnel : étapes d'inscription, taux de conversion
• Transaction Funnel : de la détection au crédit points
• QR Payment Funnel : génération → scan → paiement
• User Retention : J1, J7, J30, J90
• Power Users : top utilisateurs par engagement

12.3 Rapports Automatiques

Prochaines Étapes

1. 1

   Configuration des comptes GA4 et Mixpanel

2. 2

   Implémentation du service Analytics dans l'app mobile

3. 3

   Déploiement des dashboards préconfigurés

4. 4

   Formation des équipes produit et marketing