ActionLab Analytics for Gatsby
Add privacy-first, AI-powered analytics to your Gatsby site in under 60 seconds. No cookies, no consent banners, no complex setup.
Setup at a Glance
Add ActionLab to Gatsby in 4 simple steps. Copy one script tag, paste it into your project, and start collecting privacy-friendly analytics immediately.
About Gatsby
Gatsby is a React-based static site generator that pioneered the concept of a content mesh — pulling data from multiple sources and generating optimized static pages. While Gatsby has evolved to support server-side rendering and deferred static generation, it remains popular for documentation sites, marketing pages, and content-heavy websites. ActionLab integrates through gatsby-ssr.js, which provides the cleanest injection method for external scripts in the Gatsby build pipeline.
Why Add Analytics to Gatsby
Gatsby sites are optimized for performance with static generation, image optimization, and prefetching. ActionLab lightweight, non-blocking script maintains this performance while adding analytics capabilities. The gatsby-ssr.js integration ensures the script is included in the build output without relying on Gatsby plugin ecosystem, which reduces dependency maintenance. For Gatsby documentation sites, the AI insights provide valuable content analytics that help teams understand which documentation pages are most accessed and which need improvement.
Installation Code
// gatsby-ssr.js
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
key="actionlab"
src="https://cdn.actionlabanalytics.com/actionlab.js"
data-site="YOUR_SITE_ID"
defer
/>,
]);
};Step-by-Step Setup
- 1
Create or open your gatsby-ssr.js file in the project root directory.
- 2
Export the onRenderBody function and use setHeadComponents to inject the ActionLab script into the HTML <head> section.
- 3
Replace YOUR_SITE_ID with your actual site ID from the ActionLab dashboard.
- 4
Build and deploy your Gatsby site. Client-side navigation via Gatsby Link is tracked automatically.
Why Use ActionLab with Gatsby
- Proper SSR injection via gatsby-ssr.js ensures the script is present in the statically generated HTML output.
- Gatsby Link client-side navigation is tracked automatically, capturing all page transitions in Gatsby prefetched navigation model.
- Works with Gatsby Cloud, Netlify, Vercel, and any other Gatsby hosting platform.
- No Gatsby plugin needed — the gatsby-ssr.js approach is simpler and more maintainable than adding a plugin dependency.
Frequently Asked Questions
Is there a Gatsby plugin for ActionLab?
No plugin is needed or recommended. Adding the script via gatsby-ssr.js using onRenderBody and setHeadComponents is the cleanest, most maintainable approach. It avoids the dependency on a third-party Gatsby plugin that would need to be updated when Gatsby versions change. The gatsby-ssr.js approach works with all Gatsby versions and requires no configuration beyond the site ID.
Does ActionLab track Gatsby Link navigation?
Yes. When users click Gatsby Link components, the navigation happens client-side using Gatsby router. ActionLab detects these route changes via the History API and records them as pageviews automatically. The prefetching that Gatsby Link performs does not trigger tracking — only actual navigations where the URL changes are recorded.
Does ActionLab work with gatsby-browser.js?
You can also add the script via gatsby-browser.js if preferred, though gatsby-ssr.js is recommended because it includes the script in the static HTML output. Both approaches result in the script loading on every page. If you use both, be careful not to add the script twice.
Can I use ActionLab with Gatsby DSG (Deferred Static Generation)?
Yes. DSG pages are generated on first request and then cached. ActionLab works identically on DSG pages, SSG pages, and SSR pages because the script runs on the client side regardless of how the page was generated and served.
Does ActionLab work with Gatsby Head API?
Yes. In Gatsby 4.19+, you can use the Head API to add the script. Export a Head function from your page or layout that returns the script tag. Both the Head API and gatsby-ssr.js approaches work correctly for adding ActionLab to your Gatsby site.