This page provides instructions for integrating Adora into your application. You can integrate Adora using a JavaScript snippet, Google Tag Manager, or a script tag in Next.js.

​
Integrating the Snippet Using HTML

1

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.

2

Insert the Adora Script

Add the following script to your application in a location where you want Adora to capture session data. Replace ORGANIZATION_ID with the value you received.

<script>
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://adora-cdn.com/adora-start.js";
  script.onload = function () {
    adoraStart({
      orgId: "ORGANIZATION_ID",
    });
  };
  document.head.appendChild(script);
</script>

NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.

3

Confirm it works

You should see the following network calls if the snippet is correctly setup:

  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.

If this does not work, visit our Troubleshooting section;

4

Our team will be in contact

Our team will be in touch when your instance is ready for you!

In the meantime, you can consider enriching your Adora experience by:

You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Integrating the Snippet Using Google Tag Manager

1

Install Google Tag Manager

2

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.

3

Insert the Adora Script

Insert a Custom HTML tag through Google Tag Manager. Use the snippet below as the value, replacing the ORGANIZATION_ID with the value you received.

<script>
  var script = document.createElement("script");
  script.type = "text/javascript";
  script.src = "https://adora-cdn.com/adora-start.js";
  script.onload = function () {
    adoraStart({
      orgId: "ORGANIZATION_ID",
    });
  };
  document.head.appendChild(script);
</script>

NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.

4

Confirm it works

You should see the following network calls if the snippet is correctly setup:

  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.

If this does not work, visit our Troubleshooting section;

5

Our team will be in contact

Our team will be in touch when your instance is ready for you!

In the meantime, you can consider enriching your Adora experience by:

You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Integrating the Snippet Using Next.js

1

Obtain an ORGANIZATION_ID

Obtain an ORGANIZATION_ID for your organization by contacting us.

2

Insert the Adora Script

Insert the following script into your _app.page.tsx or layout file in your application where you want Adora to capture session data. Replace the ORGANIZATION_ID with the value you received.

// in _app.page.tsx

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Layout>
        <Component {...pageProps} />
      </Layout>
      <Script
        src="https://adora-cdn.com/adora-start.js"
        onReady={() => {
          window.adoraStart({
            orgId: "ORGANIZATION_ID",
          });
        }}
      />
    </>
  );
}

NOTE: You may need to configure the requisite Content Security Policy (CSP) settings for your application.

3

Confirm it works

You should see the following network calls if the snippet is correctly setup:

  • A call for adora-start.js, which loads the snippet.
  • A call to /sessions/preload, which fetches the requisite configs to process sessions.
  • A call to /sessions/start, which creates a session.
  • Many calls to /sessions/SESSION_ID/events, which sends browser data for processing.

If this does not work, visit our Troubleshooting section;

4

Our team will be in contact

Our team will be in touch when your instance is ready for you!

In the meantime, you can consider enriching your Adora experience by:

You are free to send us data from your local, staging or production environments. We can segment or remove these sessions afterward if desired.

​
Troubleshooting

​
adora-start.js fails to load

Ensure you have script-src header set up as per the Content Security Policy Settings.

​
adora-start.js loads, but calls to /sessions/preload 500s.

Ensure you have connect-src header set up as per the Content Security Policy Settings.

​
Appeasing the TypeScript compiler

If you are getting a complaint from TypeScript that adoraStart does not exist, you can add the following snippet in the file you are calling adoraStart from:

declare global {
  interface Window {
    adoraStart: (settings: {
        orgId: string;
        uid?: string;
        userCohorts?: Record<string, string>;
        language?: string;
    }) => void;
    adoraStart: () => void;
  }
}

​
Content Security Policy Settings

Content Security Policy (CSP) is a feature that helps to prevent or minimize the risk of certain types of security threats. It consists of a series of instructions from a website to a browser, which instruct the browser to place restrictions on the things that the code comprising the site is allowed to do. This may be enabled on your application - in which case, you will need to allowlist Adora for a successful integration.

If you have CSP enabled on your application, you will need to add adora-cdn.com and *.adora-cdn.com to the connect-src and script-src directives.