Erste Schritte mit der Fullstory React Native-Erfassung

Überblick

The Fullstory React Native Plugin works in conjunction with and does not replace the Fullstory for Mobile Apps SDK.

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.

New Architecture Support

Fullstory now supports the React Native New Architecture.

Fullstory will support the new Fabric renderer and Turbo Modules automatically. However, if you are using Fabric Native Components, we recommend configuring privacy rules by wrapping your Fabric Native Component with a <View />, and applying attributes to that <View />, as demonstrated below:

const MyScreen = () => {
 return (
   <View fsClass={"fs-exclude"}>
     <MyFabricNativeComponent />
   </View>
 );
}

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.4.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.

Additional properties provided to React Native components

The included babel plugins, when properly configured, will provide automatically generated and writable props.

• Automatically generated properties to help with element identity:
  data-component
data-element
data-source-file
  
  
• Writable properties available to be declared on components:
  fsAttribute
fsClass
fsTagName

Limitations: The additional properties are not respected on layout-only components at this time. Additionally for custom components, you can also inherit support as below:

const MyCustomComponent = (props) => {
  return (
    <View fsClass={this.props.fsClass}>
      <Text >Text goes here</Text>
    </View>
  );
}

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

• Support for the Fullstory JS API has been added with the following methods:
  anonymize
consent
event
getCurrentSession
getCurrentSessionURL
identify
log
onReady
restart
shutdown
setUserVars
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.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.

• 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();