DataSag guides · Updated 27 October 2026

Verify DataSag analytics on Gatsby

A script tag alone does not confirm that analytics works. Verify the published document, the request to DataSag and the matching visit in the correct project. This guide applies to Gatsby.

Start with the Gatsby installation

Use the Gatsby SSR onRenderBody API to add one deferred external script through setHeadComponents. Merge the addition into an existing hook rather than overwriting it, and keep the React import required by your file format. Build and publish the generated site; inspect its HTML because this hook concerns generated documents.

A browser onRouteUpdate hook, a plugin and gatsby-ssr can all add analytics behavior. Do not add a second pageview sender without testing the current tracker. gatsby develop is not a substitute for checking generated production documents.

Use the public project key from the DataSag project you are inspecting. A test on a preview domain does not confirm that the production domain has the same code or settings.

Verify DataSag analytics in Gatsby

  1. Inspect the root gatsby-ssr.js onRenderBody hook and its setHeadComponents call. Merge the DataSag element into any existing hook and preserve its React import and other head components.
  2. Run the production build and deploy its generated site. Open a generated nested page directly and inspect the HTML script and accepted pageview request. A gatsby develop session is not proof of generated-document output.
  3. Use Gatsby Link navigation and Back, then inspect path requests. Check whether gatsby-browser or an analytics plugin also dispatches pageviews before adding a browser onRouteUpdate integration.

The built Gatsby documents and tested client navigation use one SSR-installed tracker with no assumed development-only behavior.

Complete the collection checks

  1. Open the published website in a normal browser window with the Network panel recording. Use a browser profile where you can control extensions and your consent choice.
  2. Filter network requests for tracker.js. Confirm it returns JavaScript successfully and that the rendered script has the project's data-datasag-key attribute. The example YOUR_PUBLIC_KEY must be replaced.
  3. Filter for /api/track and reload once. Inspect a request with eventName null or absent. Its projectKey and path should match the chosen project and the page you opened.
  4. Open that DataSag project, choose a date range containing today and inspect the matching path. Use the configured report timezone when checking dates.
  5. Navigate to a second path, then use Back. Compare pageview requests with the route changes rather than counting every request as a pageview.
document.querySelectorAll('script[data-datasag-key]').length
// Expected: 1

document.querySelector('script[data-datasag-key]')?.getAttribute('data-datasag-key')
// Expected: your project's public key

typeof window.datasag?.track
// Expected after the script runs: 'function'

What a successful check looks like

One rendered tracker installation, a successful request for the intended page and a corresponding entry in the intended project. Scroll and engagement requests are separate event types.

Record the public path you tested, the browser state, the approximate time and the observed request. Check one direct page load and one later navigation so the result covers more than the homepage.

Common mistake

A successful tracker.js download only proves that a file loaded. It does not validate the project key, consent state or tracking endpoint. Test a real published path before declaring setup complete.

Installation snippet for Gatsby

The shared installation belongs in an onRenderBody head component in the root gatsby-ssr.js file. Use this as the installation reference while checking the procedure above.

const React = require("react");

// Merge into your existing onRenderBody hook if one exists.
exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script key="datasag" defer
      src="https://www.datasag.com/tracker.js"
      data-datasag-key="YOUR_PUBLIC_KEY" />
  ]);
};

Related Gatsby guides

Full Gatsby setup guide · Search and AI visibility

References

Official Gatsby documentation covers the integration point. For DataSag data handling, read the privacy policy. Use support if a request fails after these checks.