Is Fullstory compatible with an Ionic Capacitor app?

New

I have an Ionic 7 Capacitor 5 react app, currently using Firebase Analytics. I was not able to find anything about Ionic in documentation or community topics. Has anyone been able to implement FS in an Ionic app?

0

Comments

23 comments

  • Hi @jduds27! Thanks for reaching out. Sending you an email now, so keep your eye out for something from megan@fullstory.com

    0
  • Hello,

    I am also researching the FS integration with Ionic hybrid apps. Can you please send me info on the topic.

     

    Thank you.

    D

    0
  • @megan - I’m looking for this as well - similar situation with an Ionic/Capacitor hybrid app needing FullStory integration. Thanks

    0
  • Sending you an email, @swingrk! 

    0
  • Hi @megan I also am looking at this.  We use FullStory for our web app, and in Ionic it is reporting the sessions but what we see is not what the user is actually seeing and interacting with.

    0
  • Hi @toddnestor! Thanks for reaching out. I’ll be in touch shortly via email. 

    0
  • Hi @megan,
    Could you please share this information with me as I’m also working on the same setup?

    Cheers

    0
  • Hi @pg-mayven! Absolutely. Support for Capacitor is now GA, so we have documentation available here: https://help.fullstory.com/hc/en-us/articles/16924219219223-Getting-Started-with-Cordova-or-Capacitor-Data-Capture

    0
  • @megan, I’m trying to implement an Ionic Capacitor/ReactJS app. I’m having a little difficulty understanding how exactly to set it up.

    I managed to get the gradle instrumentation running during my app builds, but I’m definitely having a little trouble understanding how to set up a capacitor app and send custom events and data, including how to properly identify the user.

    As it is a hybrid app, I’ve done several things while trying Android:
    1) added snippet in my index.html
    2) added maven repository and dependency classpath in root build.gradle
    3) added “apply plugin” and fullstory settings 

    fullstory {
    org "[REDACTED]"
    enabledVariants "all"
    logLevel "info"
    logcatLevel "info"
    recordOnStart true
    }

    4) set up `FS.setReadyListener(new FSSessionReadyListener());` in App.java

    5) set up basic code for custom events in App.tsx

        FS('trackEvent', {
    name: 'Subscribed',
    properties: {
    uid: '750948353',
    plan_name: 'Professional',
    plan_price: 299,
    plan_users: 10,
    days_in_trial: 42,
    feature_packs: ['MAPS', 'DEV', 'DATA'],
    },
    schema: {
    properties: {
    plan_users: 'int', // override default inferred "real" type with "int"
    days_in_trial: 'int', // override default inferred "real" type with "int"
    }
    }
    });

    FS('setIdentity', {
    uid: '462718483',
    properties: {
    displayName: 'Test User',
    email: 'test.user@example.com',
    custom_field: 1
    }});



    My results…

    1) without the snippet in index.html, screen capture and only the uid recording in UserVars, but custom event received

    2) WITH snippet in index.html, custom event received, custom properties received, screen capture NOT received

    0
  • Also, @megan ...your documentation mentions to install the cordova plugin using cordova cli:

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

    However, the Capacitor documentation  says that Cordova plugins are to be installed as any other NPM package, like this:

    npm install cordova-plugin-name
    npx cap sync

    When I install using NPM install, then build using `ionic cap build android`, it appears to fail to find my Fullstory settings block in the app build.gradle and opts instead for the settings in `node_modules/@fullstory/cordova-plugin/src/android/plugin.gradle`, giving me this error:
     

    * What went wrong:
    A problem occurred evaluating script.
    > Could not get unknown property 'fs_record_on_start' for extension 'fullstory' of type com.fullstory.plugins.gradle.FullStoryExtension.

    * What went wrong:
    A problem occurred configuring project ':app'.
    > Invalid log level 'fs_log_level' - valid values are [off, log, debug, info, warn, error]

    This error matches the values in the plugin.gradle, but why aren’t these overridden?

    apply plugin: 'fullstory'

    fullstory {
    org 'fs_org'
    enabledVariants 'fs_enabled_variants'
    serverUrl 'fs_server_url'
    logLevel 'fs_log_level'
    recordOnStart fs_record_on_start
    }


     

     

    0
  • Hello @eyoung_ss ,

    If your application is built using Capacitor, there's no need to add the Cordova plugin(you can skip that step). Instead, you should follow the native Android and iOS integration guidelines for FullStory. After completing these steps, please proceed with the additional setup as detailed here: FullStory Capacitor Integration Guide.
     

    Cheers!

    0
  • @eyoung_ss 

    Could you please specify which version of the FullStory iOS and Android SDKs are integrated into your app? It's important to note that in version v1.43.0 , we improved support for the FullStory Browser API in WebViews and introduced support for FullStory Browser API Version 2.

    Also, it's not necessary to manually insert the FullStory snippet in your index.html. The fs.js file and the FS global object are automatically imported and made available in your browser environment through the mobile SDK’s.

    0
  • @eyoung_ss

    Could you please specify which version of the FullStory iOS and Android SDKs are integrated into your app? It's important to note that in version v1.43.0 , we improved support for the FullStory Browser API in WebViews and introduced support for FullStory Browser API Version 2.

    Also, it's not necessary to manually insert the FullStory snippet in your index.html. The fs.js file and the FS global object are automatically imported and made available in your browser environment through the mobile SDK’s.

     

    @ualla 

    Hi, so I’ve currently got EVERYTHING installed. 🤣

    I’ve got NPM package `"@fullstory/browser": "^2.0.0"` because while you say that the FS object is available, I don’t see a way to set the user identity within my javascript code during startup?

    In my app build.gradle, I’ve got the following line in the implementation section:

        implementation 'com.fullstory:instrumentation-full:1.43.1@aar'

    in my root build.gradle, I’ve got the following line in the “dependencies” section:

            classpath 'com.fullstory:gradle-plugin-local:1.43.1'

    How can I reference fs.js in my React app initialization in order to properly call FS.identify? The only way I found to do it was to use the @fullstory/browser package.

    0
  • Hi @eyoung_ss:

    You can define the FS object in your environment like this:

    declare global {
    interface Window {
    FS: any;
    }
    }

    Once you’ve done that you should be able to call call FS.identify. 

    0
  • Are you saying to replace the @fullstory/browser NPM package and let the SDK handle initializing it? 

     

    This doesn’t seem to be compatible with TypeScript and linting and I lose intellisense. Any thoughts on how I can retain all of that?

    0
  • Hello @eyoung_ss ,

    Could you try a different approach - Please install the following package:

    npm i --dev @fullstory/snippet

    This package is available at npm: @fullstory/snippet.

    After installing, declare FS in your project using this method:

    import { FSApi } from '@fullstory/snippet';

    declare global {

       interface Window {

          FS: FSApi;

       }

    }

     

    Let me know how it goes!

     

     

     

    0
  • Couldn’t I do the same with the @fullstory/browser too?

    0
  • @eyoung_ss correct - You can achieve a similar outcome using @fullstory/browser as well.

    @fullstory/browser includes @fullstory/snippet as a dependency. However, since your setup requires only the snippet, opting for @fullstory/snippet alone is more efficient in terms of saving space compared to installing the entire @fullstory/browser package. This approach ensures a leaner installation while meeting your specific needs.

    0
  • @ualla @megan 

    I was able to work with your team and get this mostly implemented in my Ionic app. The only issue I’m running into now is that when I’m watching the playback on iOS, it does not display as clean as with Android. For example:


    I know there are some limitations, and I noticed that you provide links to documentation in the logs, which is nice. I added SwifUIEnabled to the info.plist. But I’m still getting the same display issues. Is there something more I can do?

    0
  • 0
  • Hi @jduds27 - have you completed the “Asset Uploading for WebViews” step mentioned here: https://help.fullstory.com/hc/en-us/articles/16924219219223-Getting-Started-with-Cordova-or-Capacitor-Data-Capture#:~:text=in%20AndriodManifest.xml-,iOS,-Our%20iOS%20SDK


    @ualla That was it! Thank you!

    0
  • @ualla Another question for you. I have a third party building a native SDK (ios and android) how can I make sure that the content in there sdk is unmasked. I’ve added fs-unmask in my react code, but it does not trickle down to the sdks. 

    0
  • Hi @jduds27 ,

    While I can't provide a definitive answer without seeing specific examples, it sounds like you might need to set up unmasking rules directly in fullstory for those particular views, especially if modifying the 3rd party SDK code directly isn't an option.

    I'm more than willing to dive deeper into this issue and offer more targeted advice. Could you please send over a few FullStory session links where the 3rd party SDK's components appear? You can reach out to us at mobile-support@fullstory.com with those details.

    Cheers!

    0

Please sign in to leave a comment.

Didn't find what you were looking for?

New post