Skip to main content
PlayerZero’s browser SDK lets you manage PlayerZero on your site, identify your users, as well as generate links to devtools and send your own custom events. The SDK itself is published as an npm package and hosted on Github with an MIT license. Let’s get started!

​
Install the SDK

npm i @goplayerzero/sdk-web --save

​
Initialize the SDK

Call the PlayerZero.init(<PROJECT_ID>) function with your Project ID as soon as you can in your website startup process. You can find your projectId in the Setting > Data Collection section in your project.
Calling init a second time after successful initialization will trigger console warnings. If you need to programmatically check if PlayerZero has been initialized at some point in your code, you can call PlayerZero.isInitialized().
import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import PlayerZero from "@goplayerzero/sdk-web";

PlayerZero.init("your project id here");

ReactDOM.render(<App />, document.getElementById("root"));

​
Setup user Identity

Once PlayerZero is initialized, you can make calls to the PlayerZero SDK. The best next step is to set up user identity. This snippet is best placed in your codebase wherever you establish identity or know who the user is. For many, this means its can be placed as a side effect of your authorization logic. 
PlayerZero.identify("userId", {
name: "Billy Joel",
    email: "[[email protected]](/cdn-cgi/l/email-protection)",
    group: "Pied Piper",
});

​
Configure your domains

You can control how we collect data and turn on and off specific features based on your preferences via the dashboard. Take a look at the Web Configuration page for more. Most teams don’t have to change these, but they’re always there for you. You should be all set up & ready to go! Explore the PlayerZero API below.

​
Advanced Usage

Once PlayerZero is initialized, you can make calls to the PlayerZero SDK. These are optional, but you may find yourself needing them one day.

​
Track custom analytics events

PlayerZero.track("checkout", { item: "chocolate" });

​
Generate a Devtools URL

PlayerZero.devtoolsUrl().then((url) =>
console.log("PlayerZero Devtools URL", url)
);

​
PlayerZero API

  • PlayerZero.init(projectId: string) - Initialize PlayerZero on your site with the specific Project ID. The project id can be found on the Settings > Data Collection page
  • PlayerZero.isInitialized(): Boolean - Check if PlayerZero is initialized in your application.
  • PlayerZero.identify(userId: string, metadata: Record<string, unknown>) - Identify your user with PlayerZero
  • PlayerZero.setUserVars(metadata: Record<string, unknown>) - Set user properties & metadata without resetting the identity`
  • PlayerZero.track(event: string, metadata?: Record<string, unknown>) - Send an analytics event to PlayerZero
  • PlayerZero.prompt() - Prompt the user to upload their Devtools Report`
  • PlayerZero.devtoolsUrl(): Promise<string> - Generate a Devtools URL for the current session
    • PlayerZero.kill() - Shut down PlayerZero immediately. PlayerZero cannot be reinitialized after this is called.