How to install Attriboo on Gatsby

Before you start

You need the Gatsby project and its production build. The example uses a CommonJS gatsby-ssr.js file. Keep the project’s existing module format and merge with any existing hook.

Add the published domain in Attriboo. Keep one tracking installation and preserve your site’s consent choices. Your website ID is public; private API keys do not belong in the page script.

Copy the script for this website

1. 1
   Choose your website in Attriboo.

   Check the address in the website selector. Add the website first if it is not listed.

2. 2
   Open Setup and choose Gatsby.

   Under Add the tracking script to your website, find Where is your site built? Choose this platform, then use Copy beside Your code. This gives you the right code format with your website ID filled in.

Add Attriboo to Gatsby

1. 1
   Open gatsby-ssr.js in the project root, or create it if the project does not have one.
2. 2
   Add the code from Setup.

   If onRenderBody already exists, add the setHeadComponents call inside it; do not replace the existing hook or repeat its React import.

3. 3
   Run the production build and deploy it.

   Test a generated page directly, then follow a Gatsby Link to another page.

const React = require("react");

exports.onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <script key="attriboo" defer data-site-id="site_YOUR_WEBSITE_ID" src="https://www.attriboo.com/t.js"></script>
  ]);
};

Check this platform’s behavior

A development preview alone does not prove the generated HTML includes this server-rendering hook. Keep the tracker on the main browser thread, and remove any second analytics plugin or route handler that loads Attriboo again.

Check that page visits reach Attriboo

1. 1
   Open the published website in another tab.

   Use the address your customers visit. Make your normal tracking choice if a consent banner appears.

2. 2
   Return to the same website in Attriboo → Setup.

   Select Test Connection. Look for a successful result such as Verified Live or activity on the correct address.

3. 3
   Follow an internal link, then use your browser’s Back button.

   Check those paths in the Pages view for the current reporting dates. Allow the reports to refresh. An active connection alone does not confirm every page change.

• Check your first visit
• Troubleshoot missing visits

Connect visits to recorded revenue

Installing the script records website activity. To bring sales into Attriboo, connect the service you use to collect payments in Setup as well. Then compare the recorded sources and customer journeys behind your sales.

A payment imported from before tracking was installed may have no matching visit. Installing today does not recreate old website activity.

• Connect your payment provider
• See supported integrations

Gatsby references

These placement instructions were reviewed against the platform’s documentation and Attriboo’s current tracker. Check the published site after deployment, theme changes or navigation changes.

• Gatsby onRenderBody and setHeadComponents