Installing Osano in Gatsby Applications 

  • Updated


In Osano, the "Get Code" button will become active after creating and publishing your configuration. This button will provide you with the osano.js.


Cookie Consent - Get Code


Gatsby uses a React component to server render the <head> and other parts of the HTML outside of the core Gatsby application. Most sites should use the default html.js shipped with Gatsby. 

The best way to add javascript globally to your site headers is via the onRenderBody API in gatsby-ssr.js. This allows you to globally customize the head elements of your entire website. Read more about the gatsby SSR API here.

In order to add this script to your website, create a file named gatsby-ssr.js at the root of your project. If you already have the gatsby-ssr.js file, then paste the below code.

Option 1:

// gatsby-ssr.js

const headComponents = [

export const onRenderBody = ({ setHeadComponents }) => {

Option 2:

import React from "react";
export function onRenderBody(
{ setHeadComponents }
) {

This allows the Osano Consent Manager to be loaded on every page of your application. For compliance purposes, ensure that the osano.js is the first script that loads on your site. 

User_id / Customer_id

This is generated by the Osano application when you create your osano.js. It is the first string of numbers in your javascript and will be unique to your organization. All configurations in your account will have the same user/customer_id.


This is generated by the Osano application when you create your osano.js. It is the second string of numbers in your javascript and will be unique to each configuration you create. All configurations in your account will have a unique configuration_id. 

Once added and saved, run the application, inspect and check. You will see the script added inside the head tag. 

Important: The Osano.js should be placed without any async or defer attributes. Compliance cannot be guaranteed when using the attributes above. 



Post Installation

Once the osano.js is in your site's <head>, it will begin identifying scripts and cookies that exist on your site. This process can take a few minutes to a few hours, depending on the level of site traffic.

Important: Remember, the osano.js defaults to "Listener" mode. In Listener mode, the consent manager will NOT block any trackers and will NOT display dialogs to your visitors. You can use Osano in "Listener" mode and another CMP simultaneously if you migrate away from another provider. This way, there are no gaps in compliance.

Once you have collected enough reports from osano.js, you can work with your other business units to identify and classify all cookies/scripts/and local storage items. This exercise ensures that no "strictly necessary" scripts, cookies, or local storage get blocked.

We recommend that users remain in "Listener" mode until you have discovered and classified all relevant scripts and cookies. 


Cookie Consent - Modes


After you have appropriately categorized each script and cookie, you can enable Permissive or Strict Mode and publish these changes. 

You will now see the consent dialog on your website!