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 |
|
Empfohlene React Native-Version |
|
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:
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 von
FullStory.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.