Identify vs Reload

Understand the difference between userpilot.identify and userpilot.reload, and when to use each.

Overview

Userpilot provides two key functions for managing user sessions and content targeting: userpilot.identify and userpilot.reload. Understanding when and how to use each is essential for accurate user tracking and seamless content delivery, especially in modern web applications and Single Page Apps (SPAs).

---

userpilot.identify

The userpilot.identify function is used to uniquely identify a user and set their properties. This is typically called on the first page load after authentication, but can also be called whenever user properties change.

When to use:

• On initial page load after user authentication.
• Whenever user properties (such as name, plan, or preferences) change during a session.

Example: Initial identification

userpilot.identify("443", // Unique user ID
  { 
    name: "James",
    created_at: "2019-10-17", // ISO8601 Date
    plan: "Trial"
    // Additional user properties
    // projectId: "1"
    // trialEnds: "2019-10-31" // ISO8601 Date
  }
);

Example: Updating user properties If a user changes a property (e.g., their app color), you can call identify again with the new property:

userpilot.identify("443", { color: "blue" });

You can call userpilot.identify multiple times on the same page as user properties change.

---

userpilot.reload

The userpilot.reload function refreshes Userpilot content based on the current page state or URL. This is especially important in Single Page Applications (SPAs), where the URL or page content can change without a full page reload.

When to use:

• After calling userpilot.identify (never before).
• On every route or URL change in SPAs (e.g., React, Angular, Vue).
• When you want Userpilot to re-evaluate which content to show based on the new page state.

Example: React route change

import { useLocation } from "react-router-dom";

const location = useLocation();

React.useEffect(() => {
  if (isAuthenticated) {
    userpilot.reload();
  }
}, [location]);

Example: Angular route guard

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  const token = localStorage.getItem('token');
  if (token) {
    userpilot.reload();
    return true;
  } else {
    this.router.navigate(['/login']);
  }
}

Example: Vue router

router.afterEach((route) => {
  userpilot.reload();
});

Note: Calling userpilot.reload before identifying the user will have no effect. Always ensure the user is identified first.

---

Summary Table

Function	When to Use	Example Use Case
userpilot.identify	On first load after login, or when user properties change	User logs in, updates profile info
userpilot.reload	After identify, on SPA route changes, or to refresh Userpilot UI	User navigates to a new page in an SPA

---

For more details, see the JavaScript SDK Reference or contact [e-mail].