Getting Started with Cordova or Capacitor Data Capture

Available for the following Plan types:

Fullstory Enterprise*

Fullstory Advanced*

Fullstory Business*

Fullstory Free

*with the following add-on:

Fullstory for Mobile Apps

Available to the following User roles:

Admin

Architect

Standard

 

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 the additional setup instructions below. 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

  Required Targeted Platform
FS_VERSION Android & iOS
FS_ORG Android
FS_SERVER_URL   Android
FS_ENABLED_VARIANTS   Android
FS_LOG_LEVEL   Android
FS_RECORD_ON_START   Android


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.

Browser API v2 is not currently supported in WebViews. If you are using Browser API v2 on your Cordova/Capacitor app, it will not work as expected.

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:

Element Data Capture CSS Classes Consent Related Data Capture Classes
.fs-exclude .fs-exclude-without-consent
.fs-mask .fs-mask-without-consent
.fs-unmask .fs-unmask-with-consent

 

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


In case you’d like access privacy controls on native mobile views, see our Android and iOS instructions.

You can learn more about Fullstory Privacy support here.

Limitations

  • Over-the-air updating of app resources is currently not supported by the mobile SDK. Assets such as JPGs, CSS, and TTFs are uploaded to Fullstory during build time. For OTA resource support, see our web solution’s asset uploader. Contact Fullstory support for more information.
  • Fullstory Pages, Heatmaps and the FS.setVars API are currently not supported.

Need to get in touch with us?

The Fullstory Team awaits your every question.

Ask the Community Technical Support