Installing Osano in React Applications 

  • Updated

Installing in React

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

In your React application, navigate to the index.html. Copy and paste your Osano script tag into the <head>. 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. 

<head> 
<script src="https://cmp.osano.com/user_id/config_id/osano.js"></script>
</head>

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.

Configuration_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!