Getting Started with Cordova or Capacitor Data Capture

Cordova manages native tooling through an abstraction layer that generates native source files automatically. Continue reading to learn how to integrate Fullstory using the fullstory-cordova-plugin.

If your project manages custom native code manually, and the /platforms directory is checked into source control, you can follow the Android and iOS instructions to integrate Fullstory.

Capacitor projects should follow the Android and iOS instructions to integrate Fullstory, and subsequently follow the additional setup instructions below, skipping the instructions under Installation. We recommend working with Capacitor version 5.0 and above.

Integrating Fullstory using fullstory-cordova-plugin

This plugin will configure your native build files automatically with cordova build.

Supported Cordova versions:

• cordova-android 9.1.0+
• cordova-ios 6.0.0+

Installation

cordova plugin add @fullstory/cordova-plugin --variable 
FS_VERSION=1.38.0 --variable FS_ORG=<YOUR_ORG>

1. Add the following to the widget tag in your config.xml:

   xmlns:android="schemas.android.com/apk/res/android"

2. Add the following to your config.xml:

   <platform name="android">
       <config-file target="AndroidManifest.xml" parent="/manifest">
           <uses-permission android:name="android.permission.INTERNET" />
           <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
       </config-file>
   		<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="<http://schemas.android.com/apk/res/android>">
               <application android:name="com.fullstory.cordova.plugin.MainApplication" />
       </edit-config>
   </platform>

3. Add the necessary iOS configurations as Info.plist entries to your config.xml. Visit the iOS instructions to read more on possible configurations.

   <platform name="ios">
       <config-file parent="FullStory" target="*-Info.plist">
           <dict>
               <key>OrgId</key>
               <string>your-org</string>
               <key>IncludeAssets</key>
               <dict>
   	      <!--Use 'www' for Cordova or 'public' for Capacitor-->
                   <key>www</key>
                   <array>
                       <string>css</string>
                       <string>jpg</string>
                       <string>png</string>
                       <string>jpeg</string>
                   </array>
               </dict>
           </dict>
       </config-file>
   </platform>

4. Run build.

   cordova build android
   cordova build ios

Plugin variables

For more details on configurations, visit our Android and iOS articles.

Note: Plugin variables will configure Android automatically. Aside from FS_VERSION, you’ll need to manually configure your iOS settings through plist values in your config.xml.

Additional Setup Requirements

The fullstory-cordova-plugin handles these Android requirements automatically.

Android

• Some Cordova and Capacitor applications do not subclass from application class android.app.Application, which is a requirement. See these Android instructions.
• Permission requirements can be found in AndriodManifest.xml

iOS

• Our iOS SDK requires that you enumerate each asset file type in IncludeAssets so that they will be available during playback. Ensure that you include assets from the /www (Cordova) or /public (Capacitor) directory. For more instructions - find Asset Uploading for WebViews in iOS additional topics.

HTML

If you are using Content-Security-Policy (CSP), you’ll need to include Fullstory to your CSP.

Fullstory API

The FS global object has support for the following methods:

• anonymize
• consent
• event
• getCurrentSession
• getCurrentSessionURL
• identify
• log
• restart
• shutdown
• setUserVars

See our developer docs for examples of how to use these browser APIs.

Note: You do not need to add the browser capture snippet manually. fs.js and the FS global object is automatically imported and made available to your browser environment through the mobile SDK.

Code-first data capture rules

Fullstory recommends managing element data capture rules through the code-first approach. This method involves adding certain CSS classes to your <html/> elements. Fullstory has three classes for managing basic element data capture rules and three additional classes that interact with our fs.consent API:

<div class="containerStyle">
   <div>
      <p class="textStyle fs-exclude">This text is excluded.</p>
   </div>
   <div>
      <p class="fs-mask">This text is masked</p>
   </div>
<div>