Erste Schritte mit der FullStory React Native-Erfassung

 

Bevor du beginnst 

Das FullStory React Native Plug-in unterstützt nicht die neue Architektur von React Native, Metro-Server oder Expo Go.

Ejectete Expo-Apps werden vollständig unterstützt. Wenn du den Metro-Server für die lokale Entwicklung verwenden möchtest, empfehlen wir, FullStory für diese Builds zu deaktivieren. Wenn du während der Entwicklung einen lokalen Metro-Server ausführst, empfehlen wir, FullStory zu deaktivieren (lies mehr zur Metro-Unterstützung).

Überblick

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

Mindestversion von React Native

0.61.0

Empfohlene React Native-Version

0.63.0+


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.

Eigenschaft Plattform Erforderlich Beschreibung
Version Android & iOS Plug-in-Version von FullStory für mobile Apps
org Android & iOS Deine zugewiesene Organisations-ID
host Android & iOS Optional. Standardmäßig: fullstory.com Die Server-URL, an die deine Sessions gesendet werden
enabledVariants Android Optional. Standardmäßig: release Gibt an, welche Varianten FullStory-Instrumentierung anwenden sollen
logLevel Android Optional. Standardmäßig: info Erfasst alle Log-Statements auf oder über der angegebenen Ebene


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:

Screen Shot 2022-06-17 at 11.53.36 AM.png

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:Screen Shot 2022-06-17 at 11.54.25 AM.png

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:Screen Shot 2022-06-17 at 11.55.19 AM.png

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.

Need to get in touch with us?

The FullStory Team awaits your every question.

Ask the Community Technical Support