Send page views

Good to know:

You can modify the page views being sent by changing the path and adding custom properties, which can then be compared in Insights.

Autocollection

The autocollect flag allows you to enable or disable automatic page view sending. The default value is true.

This feature can be useful if you need to send page view manually.

NPM Package

CDN Script

import { configure } from "onedollarstats";

configure({
autocollect: false,
});

Include/Exclude specific pages

Using the NPM Package

If you need to disable autocollection for all pages, but collect a specific one:

import { configure } from "onedollarstats";

configure({
  autocollect: false,
  include: ["/specific-page"],
});

If you need to enable autocollection for all pages but disable it for a specific one

import { configure } from "onedollarstats";

configure({
  exclude: ["/specific-page"],
});

Using CDN Script

If you need to disable autocollection for all pages, but collect a specific one

Disable autocollection

<script 
defer 
src="https://assets.onedollarstats.com/stonks.js" data-autocollect="false">
</script>

Enable autocollection for the current page via meta tag or body attribute

<meta name="stonks-collect" content="true" />

<body data-s-collect="true">
  ...
</body>

If you need to enable autocollection for all pages but disable it for a specific one:

Enable data collection for all pages

<script defer src="https://assets.onedollarstats.com/stonks.js"
></script>

Ignores autocollection for the current page via meta tag or body attribute

<meta name="stonks-collect" content="false" />

<body data-s-collect="false">...</body>

Send manually

Manual page view tracking is useful if you dynamically load content. If the content updates without changing the URL, but it’s important to track it as separate views, you can manually send page views.

IMPORTANT

If you manually send page views not only for additional interactions but also for main page views, disable autocollection of data to avoid duplicate requests and incorrect data display later on.

You can manually send page views with a custom path and custom props.

NPM Package

CDN Script

import { view } from "onedollarstats";

// Send page view
view();

// with custom path
view("/dashboard/[userId]");

// with props
view({
  theme: "dark",
  lang: "en",
  logged_in: "false",
});

// with props and custom path
view(
  "/dashboard/[userId]",
  {
    theme: "dark",
    lang: "en",
    logged_in: "false",
  },
);

// Send page view
window.stonks.view();

// with custom path
window.stonks.view("/dashboard/[userId]");

// with props
window.stonks.view({
  theme: "dark",
  lang: "en",
  logged_in: "false",
});

// with props and custom path
window.stonks.view(
  "/dashboard/[userId]",
  {
    theme: "dark",
    lang: "en",
    logged_in: "false",
  },
);

Custom path

By default, the analytics script sends the current page URL, trimming query parameters and the trailing slash. For example, https://example.com/home/ and https://example.com/home?param=value will be sent as https://example.com/home.

It is possible to modify the path that the analytics script sends.

IMPORTANT

The custom path specified for the page will also be sent with the events.

If you need to merge routes, for example, send /dashboard/29ab9322-0ba1-449a-ab9f-539dc3a62683/setting as /dashboard/[userId]/settings, you can do it by overriding the path:

IMPORTANT

The custom path specified in the HTML elements will also be sent with page views and events. If you specify a path again when sending a view or event, the path provided in the event will take precedence.

HTML

NPM Package

CDN Script

<!-- Via meta tag  -->
<meta name="stonks-path" content="/dashboard/[userId]/settings" />

<!-- Via body attribute  -->
<body data-s-path="/dashboard/[userId]/settings">
  ...
</body>

The analytics will send event with path mydomain.com/dashboard/[userId]/settings

Properties

Sending custom props with a page view allows you to pass additional data for analyzing user behavior. This helps with:

User segmentation: Track user-specific information (e.g., subscription type, region) to analyze different user groups.
Contextual data: Pass data related to a specific page or user action (e.g., product category, page ID).

The properties that will be sent with page views or events can be compared in the insights.

The analytics script collects all props found in the DOM and sent via JS, merging them into a single object and overwriting duplicates.

Syntax & Rules

To separate props, use the ; symbol.
To create key-value pairs, use the = symbol.
Extra whitespace around the symbols will be trimmed: " theme = dark ;lang = en ; logged_in = true " → "theme=dark;lang=en;logged_in=true".
Do not use the ; and = symbols in prop keys and values.
Incorrect key-value pairs will be removed from the prop list.
The values of the parameters will always be of type string.
Each key should correspond to only one value.

HTML

NPM Package

CDN Script

<script data-props="theme=dark;lang=en;logged_in=true" defer></script>

<body data-s-view-props="theme=dark;lang=en">
  <button data-s-view-props="logged_in=true">Sign In</button>
</body>

import { view } from "onedollarstats";

view({
  theme: "dark",
  lang: "en",
  logged_in: "false",
});

// Props and path
window.stonks.view("/dashboard", {
  theme: "dark",
  lang: "en",
  logged_in: "false",
});

The analytics script will send the props from the example as follows:

{
  "theme": "dark",
  "lang": "en",
  "logged_in": "false"
}