# Cloud Product
You can track developers who access your cloud product to analyze their interactions on the product.
1. Start by clicking on **'Integrations'**
2. Then, click on **'Configure'** in the Cloud Product card
#### **Step 1: Configure Cloud Product URL**
1. **Add the Cloud Product URLs** you want to track in the Cloud Product URL field. You can choose to add multiple cloud instances of your product.
2. **Add a Page Name** for every domain under the Page Name field
Once added, you can create a Segment to view accounts/developers/buyers interacting with your product.The page name will appear under the ‘**Key Product Pages’** filter while creating segments.
#### **Step 2: Add Key Pages**
This is an optional step. But we highly recommend this. Some pages within your product signal **high user intent**—indicating that users are actively engaging with or setting up your tool. Tracking these **Key Pages** helps you identify accounts showing high intent.
For example:
* **Dashboard settings or integrations** – Users configuring integrations might indicate onboarding progress.
* **Account & Subscription pages** – Frequent visits to billing or account management suggest decision-making.
* **API Access or Authentication pages** – Developers generating API tokens signal deeper product adoption.
To add the key pages:
1. **Add URLs of specific pages/sections** in your product you want to track activities on.
2. **Add a Page Name** for each URL
You can create a Segment to see accounts/developers/buyers interacting with specific Key Pages. The page name will appear under ‘**Key Product Pages’** filter \*\*\*\*while creating segments.
#### Step 3: Install Tracking Pixel
Copy the tracking code snippet and paste it in the \ of your site
```jsx
```
Note: Here are a few more ways you can install Javascript on your cloud instance:
1. Using Google Tag Manager. [Here’s the setup guide.](https://docs.reo.dev/integrations/tracking-beacon/install-javascript-for-website-documentation-through-google-tag-manager#for-documentation-tracking-via-gtm)
2. Using NPM Package. [Here’s the setup guide.](https://docs.reo.dev/integrations/tracking-beacon/install-javascript-for-website-documentation-through-google-tag-manager#for-documentation-tracking-via-gtm)
#### **Step 4: Invoke Sign-in Event**
This is an essential step to track product logins.
Sign-in flows can be in-house, using a 3rd party or IDP based. Hence we have exposed an event which needs to be invoked in the call-back of your successful sign-in with appropriate payload.
The **payload for sign-in needs to contain two mandatory attributes *****username***** and *****type*****.** Invoke **`identify` method to send sign-in details** which basically tells Reo who the user is and that they have logged in.
```jsx
//Prepare the payload post successful login.
const identity = {
"username": "johndoe83",
"type": "github", // can be one of email, github, linkedin, gmail, userID,
"other_identities": [
{
"username": "johndoe@microsoft.com",
"type": "email"
}
],
"firstname": "John",
"lastname": "Doe",
"company": "microsoft.com" // domain name
}
Reo && Reo.identify(identity);
```
**In case of use with NPM, we need to resolve the promise before we can invoke `identify` method on it. Make sure to initialise the snippet using `Reo.init` before using `Reo.identify`**
{% hint style="info" %}
Note:
* In terms of preference, we recommend using LinkedIn, Github, Email *(in that order)* handle as `username` and corresponding `type:'linkedin'` ,`type:'github'` or `type: 'email'` as the primary identifier due to declining enrichment rates. If we receive multiple identifiers from IDP, we can accommodate other identifiers in the `other_identities` field.
* We need to invoke `identify` method on every successful login \
Once Done, click on Save.
{% endhint %}
Once you’ve set up the entire integration, click on Check status to see if all the URLs are connected.
#### **Error Scenarios**
* **Script initiation**
Script initiation has been modified to rely on code initiation only on successful callback post download from CDN. So it will only initiate if successfully downloaded. In case the download fails, the javascript won’t get enabled but this eliminates the likelihood of an error scenario of page breaking
* **API failure on token delete**
On deletion of **all** Reo tokens, the most recent event tracking data will likely fail, but subsequent API calls will work fine
* **Any inadvertent code failure on JavaScript**
This should not be an issue since the code is wrapped in a try-catch block, the console may throw errors, which won’t be visible even on the console since logger would be disabled on the script
**Cookie Management and Compliance**
To learn more about Reo.Dev's cookie usage, categorization, and best practices for implementation, refer to this [guide.](https://docs.reo.dev/integrations/tracking-beacon/reo.dev-javascript-cookies-and-consent-guide)
#### **Content Security Policy (CSP) Considerations**
If your website uses a strict Content Security Policy (CSP), you may need to update it to allow our script to load and execute correctly. Please ensure the following directives are updated to include our domains:
**Required CSP Directives**
Copy
```
script-srchttps://static.reo.dev;connect-srchttps://api.reo.dev;
```
You can track developers who access your cloud product to analyze their interactions on the product.
#### **Step 1: Configure Cloud Product URL**
1. **Add the Cloud Product URLs** you want to track in the Cloud Product URL field. You can choose to add multiple cloud instances of your product.
2. **Add a Page Name** for every domain under the Page Name field
Once added, you can create a Segment to view accounts/developers/buyers interacting with your product.The page name will appear under the ‘**Key Product Pages’** filter while creating segments.
#### **Step 2: Add Key Pages**
This is an optional step. But we highly recommend this. Some pages within your product signal **high user intent**—indicating that users are actively engaging with or setting up your tool. Tracking these **Key Pages** helps you identify accounts showing high intent.
For example:
* **Dashboard settings or integrations** – Users configuring integrations might indicate onboarding progress.
* **Account & Subscription pages** – Frequent visits to billing or account management suggest decision-making.
* **API Access or Authentication pages** – Developers generating API tokens signal deeper product adoption.
To add the key pages:
1. **Add URLs of specific pages/sections** in your product you want to track activities on.
2. **Add a Page Name** for each URL
You can create a Segment to see accounts/developers/buyers interacting with specific Key Pages. The page name will appear under ‘**Key Product Pages’** filter \*\*\*\*while creating segments.
#### Step 3: Install Tracking Pixel
Copy the tracking code snippet and paste it in the \ of your site
```jsx
```
Note: Here are a few more ways you can install Javascript on your cloud instance:
1. Using Google Tag Manager. [Here’s the setup guide.](https://docs.reo.dev/integrations/tracking-beacon/install-javascript-for-website-documentation-through-google-tag-manager#for-documentation-tracking-via-gtm)
2. Using NPM Package. [Here’s the setup guide.](https://docs.reo.dev/integrations/tracking-beacon/install-javascript-for-website-documentation-through-google-tag-manager#for-documentation-tracking-via-gtm)
#### **Step 4: Invoke Sign-in Event**
This is an essential step to track product logins.
Sign-in flows can be in-house, using a 3rd party or IDP based. Hence we have exposed an event which needs to be invoked in the call-back of your successful sign-in with appropriate payload.
The **payload for sign-in needs to contain two mandatory attributes *****username***** and *****type*****.** Invoke **`identify` method to send sign-in details** which basically tells Reo who the user is and that they have logged in.
```jsx
//Prepare the payload post successful login.
const identity = {
"username": "johndoe83",
"type": "github", // can be one of email, github, linkedin, gmail, userID,
"other_identities": [
{
"username": "johndoe@microsoft.com",
"type": "email"
}
],
"firstname": "John",
"lastname": "Doe",
"company": "microsoft.com" // domain name
}
Reo && Reo.identify(identity);
```
**In case of use with NPM, we need to resolve the promise before we can invoke `identify` method on it. Make sure to initialise the snippet using `Reo.init` before using `Reo.identify`**
{% hint style="info" %}
Note:
* In terms of preference, we recommend using LinkedIn, Github, Email *(in that order)* handle as `username` and corresponding `type:'linkedin'` ,`type:'github'` or `type: 'email'` as the primary identifier due to declining enrichment rates. If we receive multiple identifiers from IDP, we can accommodate other identifiers in the `other_identities` field.
* We need to invoke `identify` method on every successful login \
Once Done, click on Save.
{% endhint %}
Once you’ve set up the entire integration, click on Check status to see if all the URLs are connected.
#### **Error Scenarios**
* **Script initiation**
Script initiation has been modified to rely on code initiation only on successful callback post download from CDN. So it will only initiate if successfully downloaded. In case the download fails, the javascript won’t get enabled but this eliminates the likelihood of an error scenario of page breaking
* **API failure on token delete**
On deletion of **all** Reo tokens, the most recent event tracking data will likely fail, but subsequent API calls will work fine
* **Any inadvertent code failure on JavaScript**
This should not be an issue since the code is wrapped in a try-catch block, the console may throw errors, which won’t be visible even on the console since logger would be disabled on the script
**Cookie Management and Compliance**
To learn more about Reo.Dev's cookie usage, categorization, and best practices for implementation, refer to this [guide.](https://docs.reo.dev/integrations/tracking-beacon/reo.dev-javascript-cookies-and-consent-guide)
#### **Content Security Policy (CSP) Considerations**
If your website uses a strict Content Security Policy (CSP), you may need to update it to allow our script to load and execute correctly. Please ensure the following directives are updated to include our domains:
**Required CSP Directives**
Copy
```
script-srchttps://static.reo.dev;connect-srchttps://api.reo.dev;
```
### FAQs Does the JavaScript code introduce any vulnerabilities or risks to the website?
The JavaScript code has been tested thoroughly to ensure that it does not introduce any vulnerabilities or risks to the website. Data sent by the JavaScript code is encrypted using the HTTPS protocol to ensure secure transmission and prevent unauthorized access.
Does the JavaScript code use external dependencies or third-party libraries?
The JavaScript code uses secure third-party libraries that have been thoroughly checked for vulnerabilities and risks.
How does JavaScript handle user privacy? Is there a potential risk of collecting personally identifiable information (PII) without proper consent?
It is designed to collect anonymous data such as browser information, page views, copy and click events without collecting any non-consented PII.
What impact will including this JavaScript have on the page load times of my app?
The code has been optimized to minimize any negative impact on page load time and performance. This code uses asynchronous loading technology so it can load independently without blocking the rendering of the screen content.
Has the JavaScript been tested on different browsers and devices to ensure cross-platform compatibility and consistent behavior?
The JavaScript code is thoroughly tested on multiple browsers (Chrome, Firefox, Safari, Edge, Brave) and devices (desktop, mobile) to ensure compatibility and consistent behavior.
Will the inclusion of this JavaScript affect the overall user experience of the product, for example, slow down UI interactions or cause unexpected behavior?
It doesn't affect the overall user experience. It will not slow down, or introduce any intrusive elements that have an impact on the experience.
Are there any fail-safe mechanisms in place to prevent scripts from disrupting critical functionality in the event of an error?
We have implemented fail-safe mechanisms in the javascript to prevent scripts from interrupting the website's critical functionality in the event of an error, thus ensuring a smooth user experience.
Will the JavaScript code continue to perform optimally as the app traffic and user base increase over time?
The code is optimized for scalability. The JavaScript code is designed to scale as your online traffic and user base grow. It will continue to work best even as traffic to your site increases. There are no significant limitations or performance bottlenecks associated with the tracking mechanism.
