Skip to main content
Version: 4.6.2-saas

Web/JavaScript Agent FAQ

Q. There are too many HTML pages where I need to insert the initialization code.​

A. If you already load a shared JavaScript file on every HTML page where the agent must run, you can inject and execute the NetFUNNEL script from that file instead of editing each page.

HTML

<html>
  <head>
    ...
    <script src="./netfunnel.js" defer></script>
    ...
  </head>
</html>

netfunnel.js

var scriptNF = document.createElement("script");
scriptNF.setAttribute("data-nf-client-id", "{{CLIENT_ID}}");
scriptNF.src = "{{AGENT_URL}}";
document.head.appendChild(scriptNF);

Q. I get errors when calling NetFUNNEL functions.​

A. NetFUNNEL start/stop helpers must run only after the agent script has loaded successfully. If you call them before they exist, the browser may report that the function is not defined. Defer execution until after the page has loaded—for example:

window.addEventListener('load', function () {
  nfStart(
    {
      projectKey: "{{PROJECT_KEY}}",
      segmentKey: "{{SEGMENT_KEY}}",
    },
    function () {
      nfCallback();
    }
  );
});

Q. I get TypeScript type errors when calling NetFUNNEL functions.​

A. NetFUNNEL exposes its start/stop APIs on the global window object. In TypeScript, extend the Window interface with the appropriate types. Create global.d.ts at the project root or under src, or append the following to whichever file declares your global types.

global.d.ts

interface Window {
  Netfunnel: {
    devtoolsAddListener: (callback: (isOpen: boolean) => void) => void;
    devtoolsLaunch: () => void;
  };
  NFStart: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  nfStart: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  NFStartSection: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  nfStartSection: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  NFStop: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  nfStop: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  NFStopSection: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  nfStopSection: (options: { projectKey: string; segmentKey: string }, callback?: (response: any) => void) => void;
  getNetfunnelVersion: () => string;
}