Install JavaScript in Local Product
With Reo.Dev you can track developer activity on all your locally hosted products. Here's a step-by-step guide on how to set it up:
1. Configure Your Local Product for Tracking
Step 1: Click on the 'Integrations' under the settings section on the left navigation panel
Step 2: Click 'Configure' in the Tracking Beacon section.
Step 3: Head to the 'Local Product' Tab.
Next - Click on the 'Track locally hosted products and custom URLs' checkbox to enable tracking and then hit 'Save'
Installation & Initiation - Code Integration
You can install JavaScript to track the user activity on your local product in two ways.
Using our CDN
As an NPM package
Option 1: Using CDN
To install JavaScript code using our CDN, follow the instructions below:
1) Get the JavaScript Snippet:
Copy the JavaScript code snippet from Reo.Dev Dashboard. Go to Integrations >> Tracking Beacon >> Local Product >>Method 1: Using CDN
2) Integrate the JavaScript into Your Local Environment:
Go to the root index.html page of product web pages
3) Locate the <head> Tag:
For optimal performance, it’s recommended to place the script within the <head> tags of your HTML document. This ensures it's loaded early in the page's lifecycle.
4) Insert the JavaScript Snippet:
Insert the JavaScript snippet provided within the <head> section of your HTML file.
5) Save and Deploy:
Save the changes to your HTML file and deploy it to your server.
6) Verification:
Go to any screen after login and right-click anywhere
In the dropdown menu, select Inspect.
In the elements tab, Use the Ctrl + F or Cmd + F and search for “reo”
If the tracking code appears, verify that the code matches.
Option 2. As an NPM Package
To install JavaScript code as an NPM package, follow the instructions below:
Install the Package:
Open your terminal or command prompt.
npm i reodotdev
# or
yarn add reodotdevIntegrate the Package into Your Project:
Within your project, identify the file or module where you want to incorporate javascript.
Use with NPM:
Import the required function from the installed package and set up the script to load the Reo tracking.
// Use with NPM
import { loadReoScript } from 'reodotdev'
// Declare clientID from environment variable or directly as string
const clientID = process.env.CLIENT_ID || "c07f38f6d83bb7e";
// Resolve promise to get access to methods on Reo
const reoPromise = loadReoScript({ clientID, source: "internal" });
reoPromise
.then(Reo => {
Reo.init({ clientID });
})
.catch(error => {
console.error('Error loading Reo', error);
})
Our npm package is promised-based, so we need to resolve loadReoScript before invoking the init method on it.
4) Adjust Environment Variables (if needed):
If using environment variables, make sure to set them up in your environment configuration or .env files.
5) Save Changes:
Save the file containing the updated code.
6) Build and Deploy:
Compile or bundle your project based on your build process, and deploy the changes to your server or hosting service.
7) Verification:
Go to any screen after login and right-click anywhere
In the dropdown menu, select Inspect.
In the elements tab, Use the Ctrl + F or Cmd + F and search for “reo”
If the tracking code appears, verify that the code matches
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
Once you've added the JS, you can create a Segment to see accounts or developers interacting with your local product. Use filter 'Local Product' from the Segment filter list.
Then, select the specific activities you want to track from the Segment Criteria attribute.
Once you've save this segment, check out the activity timeline on any account or developer in this segment.
Here, you can see which developers have interacted with your local product, how often they've engaged, and gain valuable insights to tailor your messaging effectively.
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
script-src https://static.reo.dev;
connect-src https://api.reo.dev;FAQs
Last updated
Was this helpful?