asmitabudhiraja

FullStory for analytics in your web app

Using FullStory for analytics in your web app (like an e-commerce site) gives you session replay, user insights, heatmaps, and more. Here’s how you can integrate FullStory into your Next.js or React app.

What is FullStory?

FullStory is a digital experience analytics platform that provides:

  • Session replays
  • Click maps, scroll heatmaps
  • Rage click detection
  • Funnel analysis
  • User-level behavior insights

Step-by-Step: Add FullStory to a React or Next.js App

1. Get Your FullStory Org ID

2. Add FullStory Script

For React / Next.js projects, you can insert the script in a useEffect or into the _app.tsx file.

Option A: Script Tag in pages/_document.tsx (Recommended)

// pages/_document.tsx (Next.js App Router)
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
  return (
    <Html>
      <Head>
        {/* FullStory Script */}
        <script
          dangerouslySetInnerHTML={{
            __html: `
              window['_fs_debug'] = false;
              window['_fs_host'] = 'fullstory.com';
              window['_fs_org'] = 'YOUR_ORG_ID';
              window['_fs_namespace'] = 'FS';
              (function(m,n,e,t,l,o,g,y){
                  if (e in m) {if(m.console && m.console.log) { m.console.log('FullStory namespace conflict. Please set window["_fs_namespace"].');} return;}
                  g=m[e]=function(a,b,s){g.q?g.q.push([a,b,s]):g._api(a,b,s);};g.q=[];
                  o=n.createElement(t);o.async=1;o.crossOrigin='anonymous';o.src='https://'+_fs_host+'/s/fs.js';
                  y=n.getElementsByTagName(t)[0];y.parentNode.insertBefore(o,y);
                  g.identify=function(i,v,s){g(l,{uid:i},s);if(v)g(l,v,s)};
                  g.setUserVars=function(v,s){g("userVars",v,s)};
                  g.event=function(i,v,s){g("event",{n:i,p:v},s)};
                  g.shutdown=function(){g("rec",!1)};
                  g.restart=function(){g("rec",!0)};
                  g.consent=function(a){g("consent",!arguments.length||a)};
                  g.identifyAccount=function(i,v){o='account';v=v||{};v.acctId=i;g(o,v)};
                  g.clearUserCookie=function(){};
              })(window,document,window['_fs_namespace'],'script','user');
            `.replace('YOUR_ORG_ID', 'ABC123'), // Replace with your real Org ID
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

✅ Replace 'ABC123' with your real FullStory Org ID.

3. Track Custom Events (Optional)

if (typeof window !== 'undefined' && window.FS) {
  window.FS.event('Add to Cart', {
    productId: '123',
    productName: 'Red Dress',
    price: 129.99,
  });
}

Track Users (Optional)

You can identify users by their ID or email:

if (typeof window !== 'undefined' && window.FS) {
  window.FS.identify('user-123', {
    displayName: 'Asmita Budhiraja',
    email: 'asmita@example.com',
    plan: 'Premium'
  });
}

Verify It Works

  1. Open your deployed site.
  2. Navigate, click, interact.
  3. Log in to FullStory Dashboard.
  4. Watch session recordings, see custom events and user data.

Best Practices

TipWhy
Use FS.identify on loginTo tie sessions to real users
Track key actionsLike “Add to Cart”, “Checkout”, “Search”
Use Segment or GTM if preferredFullStory can be piped through these
Avoid logging PII unless requiredRedact sensitive info where needed

Leave a comment