OnyxMetric
Integration Guides

Electron

Add OnyxMetric analytics to your Electron app

An Electron renderer is a Chromium page, so OnyxMetric runs in it the same way it does in a browser. Put the script tag in the renderer's HTML and allow the OnyxMetric host in your Content Security Policy.

Copy your tracking snippet

In OnyxMetric, open your site's Site Settings and copy the tracking script. It looks like this:

<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

YOUR_SITE_ID is the numeric ID of your site.

Add the snippet to Electron

Paste the snippet into the <head> of the renderer HTML, and allow the host in both script-src (the script itself) and connect-src (its requests):

src/index.html
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; script-src 'self' https://app.onyxmetric.com; connect-src 'self' https://app.onyxmetric.com"
/>
<script src="https://app.onyxmetric.com/api/script.js?siteId=YOUR_SITE_ID" async></script>

If you set the CSP from the main process with session.defaultSession.webRequest.onHeadersReceived, add the same two sources there.

In-app navigation is tracked without extra code. The tracker wraps history.pushState and history.replaceState and listens for popstate and hashchange, so history-mode and hash-mode routers both work.

Check that it works

Load your live site and click through a few pages. Pageviews show up in the OnyxMetric dashboard within seconds.

If nothing arrives:

  • View the page source and search for script.js?siteId= to confirm the tag is present.
  • In the browser's Network tab, check that script.js returns 200 and that requests go to /api/track.
  • Turn off ad blockers, or proxy the script through your own domain.
  • Read script troubleshooting for other causes.

Troubleshooting

  • Requests blocked on the file:// origin: the tracking endpoints answer CORS preflights for http:// and https:// origins only. A renderer opened with win.loadFile() runs on file://, so serve the renderer from a local http:// origin if you need events from it.
  • CSP violation in the console: the message names the blocked directive. Add https://app.onyxmetric.com to it. connect-src covers requests, and the script tag also needs script-src.
  • Hostname is empty in the dashboard: pageviews report the renderer's window.location.hostname, which is empty for file:// pages. Filter by site rather than hostname.

Next steps

On this page