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.
Hello,
I am also researching the FS integration with Ionic hybrid apps. Can you please send me info on the topic.
Thank you.
D
@megan - I’m looking for this as well - similar situation with an Ionic/Capacitor hybrid app needing FullStory integration. Thanks
Sending you an email, @swingrk!
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.
Hi @toddnestor! Thanks for reaching out. I’ll be in touch shortly via email.
Hi @megan,
Could you please share this information with me as I’m also working on the same setup?
Cheers
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
@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
4) set up `FS.setReadyListener(new FSSessionReadyListener());` in App.java
5) set up basic code for custom events in App.tsx
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
Also, @megan ...your documentation mentions to install the cordova plugin using cordova cli:
However, the Capacitor documentation says that Cordova plugins are to be installed as any other NPM package, like this:
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:
This error matches the values in the plugin.gradle, but why aren’t these overridden?
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!
@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.
@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:
in my root build.gradle, I’ve got the following line in the “dependencies” section:
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.
Hi @eyoung_ss:
You can define the FS object in your environment like this:
Once you’ve done that you should be able to call call FS.identify.
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?
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:Let me know how it goes!
Couldn’t I do the same with the @fullstory/browser too?
@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.
@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?
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!
@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.
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!
Please sign in to leave a comment.