Web Tools

In order to effectively use Causal's Web Tools, you need to identify your devices to the system. This enables Causal to:

• Show you your events
• Push changes to your device for preview and QA

Identifying a device is called registration, and consists of two parts:

1. Creating a registration page on your site. This is a simple web page that associates a persistent key to a Web Tools user using a redirect. The example project has a registration page that you can start with.
2. Visiting the registration page with the device to register. The Web Tools make this easy by providing links to the registration page.

Creating a Registration Page

A registration page simply needs to do a 302 redirect to Causal, with the user's persistent key in a query parameter.

Optionally, you can set a local storage value that will set up server sent events to flush the client side cache. Causal typically does extensive caching in the browser to insure speedy page renders. When a page is changed in the Tools UI while debugging, this cache has to be flushed.

The complete code for the example registration page is below.

import { useRouter } from "next/router";
import React from "react";
import { ClientOnly, getOrGenDeviceId } from "../utils";

export default function Page() {
  return (
    <ClientOnly>
      <RegistrationPage />
    </ClientOnly>
  );
}

export function RegistrationPage() {
  const router = useRouter();

  // the "deviceId" is our persistent key
  const deviceId = getOrGenDeviceId(router);
  router.push(`https://tools.causallabs.io/QA?persistentId=${deviceId}`);

  return <></>;
}

See full example on GitHub

Once you have created the page, email support@causallabs.io and we will update your account configuration so it is visible in the tools UI.

Registering a device

Once the registration page has been created and configured for your account, do the following to register a device:

1. Go to the QA tab in the tools UI
2. Click on each registration link to register the device for the corresponding environment.
3. To register other devices, do one of:
   • Log in from those devices and repeat
   • Copy the registration links to your clipboard and then email, txt or otherwise send to your other devices. Then on those devices, click on the links

Registration screen:

Registration success screen: