The script tag is probably the simplest and most universal way to enable PlayerZero.

In order to do this you will need to make sure you have:

​
Embed the Script Tag

Each project in PlayerZero represents a unique application, not environment. Therefore most teams that use PlayerZero only have one project. Each project has a unique project Id and therefore its own unique script tag to properly separate the data the we collect from that tag and manage the configuration. You can find your project’s script tag on the Settings > Setup Data Collection page. It should look a little something like this.

Include it as one of the first elements in the <head> tag of your index.html file.

<script
  type="text/javascript"
  src="https://go.playerzero.app/record/<your project id>"
  async
  crossorigin
></script>

​
Setup User Identity

Once the script is loaded, we expose the playerzero object on the window with a few utility functions to help you identify and manage different actions around the PlayerZero script’s lifecycle.

The most important and useful thing to do with this is to use playerzero.identify() to distinguish and describe your users as well as introduce your own custom per-user properties. It really adds a final touch of context & polish to the data we collect.

You can set this up with the snippet below wherever you can resolve your app’s user identity:

// This is an example script - don't forget to change it!
playerzero.identify("<USER_ID>", {
  name: "<DISPLAY_NAME>",
  email: "<USER_EMAIL>",
  group: "<CUSTOMER_ID_OR_OTHER_GROUP>",
});

​
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.

​
FAQ

​
ReferenceError: playerzero is not defined when you’re calling identify

By default, the async tag on the <script> above asynchronously loads the script in the background without affecting the load performance of the page. Because of this, there is a chance that your application codebase get’s to calling playerzero.identify() before the script has had a chance to load. There are a few ways to work around this.

  1. If you’re really trying to do this in a Javascript application such a React or Angular product, we’d recommend looking at the Web SDK so that the identify call automatically waits for playerzero to be loaded before and handles the complexity gracefully.
  2. If you’re populating the identity from the server side or need to instrument identity directly in the HTML and cannot use the Web SDK there’s still an option for you! The playerzero script emits a playerzero_ready event the moment it’s loaded, and if the playerzero object is not yet available in the window, you can wait for the event before calling the identity. This could look a little something like this.
const userId = "userId";
const metadata = {
  name: "<DISPLAY_NAME>",
  email: "<USER_EMAIL>",
  group: "<CUSTOMER_ID_OR_OTHER_GROUP>",
};

if (window.playerzero) {
  // PlayerZero has loaded
  window.playerzero.identify(userId, metadata);
} else {
  // PlayerZero has not loaded, so we'll wait for the ready event
  window.addEventListener(
    "playerzero_ready",
    () => {
      window.playerzero.identify(userId, metadata);
    },
    { once: true }
  );
}

Was this page helpful?

npm LibrarySetup with Segment