I am trying to install FullStory to record sessions on SF. The script is uploaded as a static resource into SF, properly loaded, but then only the component that loaded it has access to it. The instalation of FullStory is very similar to most analytics tools, you just include a code snippet to your page header and it just works. However SF places it inside shadow dom and its not accessible globally, this prevents FS from capturing the screen because its not properly setup. this is how my component looks like
import { LightningElement } from 'lwc'; import fsScript from "@salesforce/resourceUrl/local-fullstory"; import { loadStyle, loadScript } from "lightning/platformResourceLoader"; export default class FullStoryTest extends LightningElement { connectedCallback() { console.log("in connect " + fsScript); loadScript(this, fsScript) .then(() => { console.log("Loaded"); console.log("FS obj " + FS); // here FS object is available }).catch((err) => console.log(err)); } } }
Inside I have access to FS object, but I have to be albe to access FS in the browser console once I open the page. Is there a way to achieve this in SF?
import { LightningElement } from 'lwc'; import fsScript from "@salesforce/resourceUrl/local-fullstory"; import { loadStyle, loadScript } from "lightning/platformResourceLoader"; export default class FullStoryTest extends LightningElement { connectedCallback() { console.log("in connect " + fsScript); loadScript(this, fsScript) .then(() => { console.log("Loaded"); window.FS = FS; // Attach FS to the window object console.log("FS obj " + FS); }).catch((err) => console.log(err)); } }
By attaching FS to the window object, you're making it globally accessible. After loading the component, you should be able to access the FS object from the browser console using window.FS or simply FS.