Erste Schritte mit der FullStory React Native-Erfassung

Überblick

Das FullStory React Native-Plug-in funktioniert in Verbindung mit dem Plug-in FullStory für mobile Apps und ersetzt es nicht.

Während du die folgenden Anweisungen implementierst, findest du es möglicherweise hilfreich, auf eine Beispiel-App mit integriertem FullStory zu verweisen. Wir haben hier ein Beispiel dafür, wie das SDK in eine React Native-App implementiert wird.

Konfigurieren von FullStory für mobile Apps

Stelle zunächst sicher, dass deine Android- und iOS-Projekte ordnungsgemäß mit FullStory für mobile Apps konfiguriert sind.

Dieser Schritt kann in einem Expo Managed Workflow übersprungen werden.

Hinzufügen des FullStory React Native Plug-in

Ändere die Datei package.json deiner Anwendung und füge das FullStory React Native Plug-in als Abhängigkeit hinzu:

"dependencies": {
   ...
    "@fullstory/react-native": "1.1.0"
  },

Sobald dies erledigt ist, führe yarn install oder npm install aus, um die neuen Abhängigkeiten einzufügen.

• iOS
  • Legacy-Projekte: Wenn dein React Native-Projekt Abhängigkeiten nicht automatisch verknüpft, füge Folgendes zu ios/Podfile hinzu:

pod 'fullstory_react-native', :path => '../node_modules/@fullstory/react-native'

Alle Projekte: Führe im ios-Unterverzeichnis pod update oder pod install aus.

Konfigurieren des React Native Plug-ins

Das FullStory React Native Plug-in enthält zwei Babel-Abhängigkeiten.

@fullstory/react-native muss konfiguriert werden, während @fullstory/babel-plugin-annotate-react optional ist.

Ändere die Datei babel.config.js deiner Anwendung und füge die Plug-ins hinzu:

module.exports = {
  ...
  plugins: [
    ...
    '@fullstory/react-native', ['@fullstory/babel-plugin-annotate-react', { native: true }],
  ]
};

Konfigurieren für Expo

FullStory React Native unterstützt derzeit keine Expo Go-Workflows. Für Expo Go-Benutzer:innen empfehlen wir den Übergang zu Development Builds, um die Expo-Client-Erfahrung mit der Möglichkeit zu erhalten, nativen Code anzupassen.

Füge das Config-Plug-in zum Plug-in-Array deiner app.json oder app.config.json hinzu.

{
 "expo": {
   "plugins": [
     [
       "@fullstory/react-native",
       {
         "version": "<THE PLUGIN VERSION>",
         "org": "<YOUR ORG ID HERE>"
       }
     ]
   ]
 }
}

Hinweis: <THE PLUGIN VERSION> bezieht sich auf die Plug-in-Version von FullStory für mobile Apps. In den Versionshinweisen findest du die neueste Version.

Plug-in-Eigenschaften

Plug-ins ermöglichen eine zusätzliche Anpassung, indem sie ein Objekt mit Eigenschaften übergeben. Wenn keine zusätzlichen Eigenschaften hinzugefügt werden, werden Standardwerte verwendet. Bestimmte Eigenschaften sind erforderlich.

Fehlerbehebung

Führe expo prebuild aus, um native Dateien zu generieren, ohne deine App auszuführen.

Stelle sicher, dass die richtigen nativen Dateiänderungen in deinen /ios- und /android-Ordnern angewendet wurden, indem du die Änderungen mit der iOS- und Android-Dokumentation vergleichst.

Wenn falsche native Dateiänderungen angewendet wurden, wende dich bitte an den Support, damit wir weitere Fehler beheben können.

Einschränkungen

Metro-Server-Unterstützung

Das FullStory React Native-Plug-in verwendet Babel-Plug-ins, um Transformationen auf JSX durchzuführen, um Datenschutzdeklarationen zu ermöglichen und Klickereignisse zu erfassen. Während der Entwicklung ist es möglich, dass Metros Caching und Hot Module Reloading diese Transformationen beschädigen und unerwartete Fehler in FullStory-Sessions verursachen.

Daher empfehlen wir, FullStory zu deaktivieren, wenn während der Entwicklung ein lokaler Metro-Server ausgeführt wird.

Automatische Props für React Native-Komponenten

Die enthaltenen Babel-Plug-ins bieten bei richtiger Konfiguration schreibgeschützte und beschreibbare Props.

• Schreibgeschützte Props zur Unterstützung der Elementidentität:
  data-component
data-element
data-source-file
  
  
• Beschreibbare Props:
  fsAttribute
fsClass
fsTagName

Einschränkungen: Die automatischen Props werden zu diesem Zeitpunkt bei reinen Layout-Komponenten nicht berücksichtigt. Zusätzlich kannst du für benutzerdefinierte Komponenten auch den Support wie unten beschrieben weitergeben:

const MyCustomComponent = (props) => {
  return (
    <View fsClass={this.props.fsClass}>
      <Text >Text hier einfügen</Text>
    </View>
  );
}

Hinweis: Um unsere automatischen Eigenschaften mit TypeScript zu verwenden, kannst du eine tsx-Datei mit folgendem Inhalt erstellen:

declare global {
  namespace JSX {
    interface IntrinsicAttributes {
      fsAttribute?: {[key: string]: string};
      fsClass?: string;
      fsTagName?: string;
    }
  }
}

export {};

Verwenden von fsAttribute für Datenschutzregeln

• Du kannst die neue fsAttribute-Prop verwenden, um selektorbasierte Regeln in den FullStory-App-Einstellungen zu erstellen.

<Text fsAttribute={{attr1: 'custom_value1', attr2: 'custom_value2'}}>Textelement mit benutzerdefinierten Attributen</Text>

• Der entsprechende Selektor in den Einstellungen der FullStory-App:

Verwenden von fsTagName für Datenschutzregeln

• Du kannst die neue fsTagName-Prop verwenden, um selektorbasierte Regeln in den FullStory-App-Einstellungen zu erstellen. 

  <text fsTagName="my_tag_name">Textelement mit benutzerdefiniertem tagName</Text>

  Der entsprechende Selektor in den Einstellungen der FullStory-App:

Verwenden von fsClass für Datenschutzregeln

Du kannst die neue fsClass-Prop für React Native-Elemente verwenden, um Datenschutzregeln zu deklarieren.

• Standard-Datenschutzregeln

<Text fsClass="fs-exclude">Ausgeschlossenes Textelement</Text>
<Text fsClass="fs-mask">Maskiertes Textelement</Text>
<Text fsClass="fs-unmask">Textelement, dessen Maskierung aufgehoben wurde</Text>

• Datenschutzbestimmungen für die Zustimmung

<Text fsClass="fs-exclude-without-consent">Textelement, das ausgeschlossen wird, wenn der:die Benutzer:in nicht zustimmt</Text>
<Text fsClass="fs-mask-without-consent">Textelement, das maskiert wird, wenn der:die Benutzer:in nicht zustimmt</Text>
<Text fsClass="fs-unmask-with-consent">Textelement, dessen Maskierung nur dann aufgehoben wird, wenn der:die Benutzer:in zustimmt</Text>

Verwenden von testID für Datenschutzregeln

Du kannst auch die integrierte testID-Prop von React Native verwenden, um selektorbasierte Regeln in den FullStory-App-Einstellungen zu erstellen.

<Text testID="test_id_for_unmasking">Textelement, dessen Maskierung über die Einstellungen der Datenschutzregeln aufgehoben wird</Text>

• Der entsprechende Selektor in den Einstellungen der FullStory-App:

FullStory-API

Unterstützte API-Methoden

• Unterstützung für die FullStory-JS-API wurde mit den folgenden Methoden hinzugefügt:
  anonymize
consent
event
getCurrentSession
getCurrentSessionURL
identify
onReady
restart
shutdown
setUserVars
FullStory.shutdown

Verwenden der FS-API

• Importiere die FullStory-API über:
  

import FullStory from '@fullstory/react-native';

In deiner React Native-App kannst du nach dem Importieren des FullStory-Plug-ins jede der unterstützten API-Methoden aufrufen.

• Verwendung von FullStory.anonymize
Anonymize kann aufgerufen werden über:

FullStory.anonymize();

• Verwendung von FullStory.consent 
  Die Einwilligung kann erteilt werden über:

FullStory.consent(true);

• Verwendung von FullStory.event 
  Ein benutzerdefiniertes Ereignis kann aufgerufen werden über:

FullStory.event('Checkout invoked', {
  page_str: 'Checkout Page',
  cart_amount_real: 299,
});

Hinweis: Array-Werte werden derzeit nicht unterstützt. 

• Verwendung von FullStory.getCurrentSession 
  Wir können die aktuelle Session-ID abrufen:
  

  FullStory.getCurrentSession().then(function(result) {
    const sessionId = result;
  });

  Hinweis: Dies ist Null, wenn es aufgerufen wird, bevor eine Session aktiv ist.
  
  

• Verwendung von FullStory.getCurrentSessionURL 
  Wir können die aktuelle Session-URL abrufen:
  

  FullStory.getCurrentSessionURL().then(function(result) {
    const sessionUrl = result;
  });

  Hinweis: Dies ist Null, wenn es aufgerufen wird, bevor eine Session aktiv ist.
  
  

• Verwendung von FullStory.identify 
  Die Benutzerkennung wird eingestellt über:
  

  FullStory.identify('462718483', {
   displayName: 'Daniel Falko',
   Email: 'daniel.falko@example.com',
  });

  Hinweis: Array-Werte werden derzeit nicht unterstützt.
  
  

• Verwendung von FullStory.onReady
  Wir können eine Rückruffunktion abonnieren, die aufgerufen wird, wenn wir eine Session haben:
  

  FullStory.onReady().then(function(result) {
    const replayStartUrl = result.replayStartUrl;
    const replayNowUrl = result.replayNowUrl;
    const sessionId = result.sessionId;
  });

• Verwendung von FullStory.restart
  Wir können eine Anfrage für eine neue Session stellen:

FullStory.restart();

• Verwendung vonFullStory.setUserVars
  Benutzervariablen können eingestellt werden über:

FullStory.setUserVars({
"displayName" : "Daniel Falko",
"email" : "daniel.falko@example.com",
"pricingPlan_str" : "free", // is he a freemium, basic, or pro customer?
"popupHelp_bool" : true, // did he turn off the aggressive in-app help?
"totalSpent_real" : 14.50 // how much has he spent on in-app purchases so far?
});

Hinweis: Array-Werte werden derzeit nicht unterstützt.

• Verwendung von FullStory.shutdown
  Wir können die aktuelle Session beenden:

  FullStory.shutdown();

Neu im FullStory React Native Plug-in 1.0.3

• Verwendung von FullStory.log
  Logging kann verwendet werden über:
  

  FullStory.log(FullStory.LogLevel.Log, 'Log at Log'); // auf iOS, an Debug gebunden

  FullStory.log(FullStory.LogLevel.Debug, 'Log at Debug');

  FullStory.log(FullStory.LogLevel.Info, 'Log at Info');

  FullStory.log(FullStory.LogLevel.Warn, 'Log at Warn');

  FullStory.log(FullStory.LogLevel.Error, 'Log at Error');

  FullStory.log(FullStory.LogLevel.Assert, 'Log at Assert'); // auf Android, an Error gebunden

  Hinweis: Wenn eine ungültige Ebene angegeben wird, wird sie standardmäßig auf Info gesetzt.