Window Names

Every window in your app reports its data to the Developers Console under a window name. Set that name yourself with the name option. This applies to both desktop windows and overlay windows.

Applies to	ow-electron desktop windows (BrowserWindow) and overlay windows (overlay.createWindow).
Option	name, a top level option on the window options object.
Required	Optional on BrowserWindow, required on overlay windows. Overwolf recommends setting it on every window.
Limit	20 characters.

Why window names matter

The Developers Console reports much of your app's data per window. The window name is what identifies each window in your performance statistics and your revenue statistics, so it's how you tell one screen's numbers from another's.

Naming your windows yourself is best practice for three reasons:

• Your dashboards read clearly. A name like desktop or in-game tells you which screen you're looking at without having to work it out.
• Your metrics stay stable across app versions. The name belongs to the window rather than to your file layout, so it survives a refactor and keeps one screen's history in one place.
• All of your windows follow one convention. Overlay windows already require a name, so naming your desktop windows too means every window in your app reads consistently in the same dashboard.

note

name is optional on BrowserWindow today and may become required in a future ow-electron version. A window without a name reports under a value derived from its URL instead.

Naming a desktop window

Pass name as a top level option to the BrowserWindow constructor, alongside width and height:

const { BrowserWindow } = require('electron');

const desktopWindow = new BrowserWindow({
  name: 'desktop',
  width: 1300,
  height: 840,
});

desktopWindow.loadFile('desktop.html');

The window now reports as desktop, and it keeps reporting as desktop even if you later rename desktop.html.

Naming an overlay window

name is already a required option on OverlayWindowOptions, so overlay windows always have a name. Use the same conventions as desktop windows so all of your windows read consistently in one dashboard:

const overlay = app.overwolf.packages.overlay;

const inGameWindow = await overlay.createWindow({
  name: 'in-game',
  width: 400,
  height: 600,
  transparent: true,
});

Choosing a name

Rule	Why
Keep it to 20 characters or fewer.	Longer names aren't supported.
Describe the screen, not the file. Use desktop, not desktop.html.	The name should survive a change to your file layout.
Use lowercase with hyphens between words: main-window, in-game, post-game.	Consistent casing keeps your dashboards easy to read and easy to filter.
Use one name per logical screen, and reuse it across app versions.	This is what makes a metric comparable over time.
Never build the name from a value that varies per user or per session.	A dynamic name fragments one screen into unlimited separate entries in your dashboards.

important

name is not Electron's title option and not the DOM window.name. name identifies the window in the Developers Console and is never shown to the user. title sets the text in the window's title bar and is shown to the user. Setting one doesn't set the other.

Renaming a window

Changing a window's name doesn't rewrite the data already reported under the old name. After you release the change, your dashboards show the old name and the new name side by side, weighted by how many of your users are on each app version. Once the new version has fully rolled out, only the new name reports data.

Because of that, pick a name you can keep. Renaming costs you a discontinuity in every metric for that window.