Cookie Banner for Gatsby
Gatsby sites are fast by default, and your cookie banner should be too. TinyConsent integrates with Gatsby through gatsby-ssr.js — no heavy plugins or GraphQL queries. Keep your build times short and your site compliant.
Get Your Gatsby Code
No signup required to get started
Live Banner Preview
This is how the cookie banner will appear on your Gatsby site.
My Gatsby Site uses cookies to enhance your experience and analyze traffic. By clicking "Accept", you consent to our use of cookies.
Gatsby Integration Code
Add this to: gatsby-ssr.js
// gatsby-ssr.js
import React from 'react';
export const onRenderBody = ({ setHeadComponents }) => {
setHeadComponents([
<script
key="tinyconsent"
src="https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID"
async
/>,
]);
};
// Alternative: gatsby-browser.js for client-only loading
export const onClientEntry = () => {
const script = document.createElement('script');
script.src = 'https://scripts.tinyconsent.com/api/scripts/YOUR_SCRIPT_ID';
script.async = true;
document.head.appendChild(script);
};Replace YOUR_SCRIPT_ID with your actual script ID from TinyConsent.
Why Gatsby Sites Need a Cookie Banner
Gatsby sites often use gatsby-plugin-google-analytics, Facebook Pixel, and other tracking. Even static sites need cookie consent if they collect any user data from EU visitors.
What TinyConsent Handles for Gatsby
- Automatic blocking of tracking scripts until consent
- Technical consent collection with region detection
- Google Consent Mode v2 integration
- Consent storage and audit logging
- Customizable design to match your site
How to Add a Cookie Banner to Gatsby
Generate your script
Get your TinyConsent script ID from tinyconsent.com.
Open gatsby-ssr.js
Create or edit the gatsby-ssr.js file in your project root.
Add onRenderBody export
Use setHeadComponents to add the script to the document head.
Build and deploy
Run gatsby build and deploy your site.
Test on production
Verify the banner appears on your deployed site.
Gatsby Tips
- •Zero impact on build time — script loads at runtime
- •Works with Gatsby Cloud, Netlify, Vercel
- •Compatible with all Gatsby versions
- •No gatsby-plugin needed
Why TinyConsent for Gatsby
60-Second Setup
No npm packages, no build configuration. Just one script tag and you're compliant.
Lightweight
Under 5KB initial load. Zero impact on your Gatsby bundle size.
Technical Infrastructure
Script blocking, consent logging, and region detection. Technical foundation for consent workflows.
Developer-Friendly
JavaScript API for checking consent status. Perfect for conditional script loading.
Frequently Asked Questions
Should I use a Gatsby plugin for cookies?
Gatsby cookie plugins add build complexity. TinyConsent is simpler — just add to gatsby-ssr.js. No npm install, no config.
Does this affect my Gatsby build?
No. The script loads at runtime from our CDN. Your build times stay fast.
How do I conditionally load gatsby-plugin-google-analytics?
You can remove the plugin and load GA conditionally using TinyConsent's consent events.
Does it work with Gatsby Image and other optimizations?
Yes. TinyConsent doesn't interfere with Gatsby's image optimization, prefetching, or any other features.
Can I use gatsby-browser.js instead?
Yes. For client-only loading, you can add the script in gatsby-browser.js's onClientEntry.