Send page views

Good to know:

You can fully control the sending of page views by sending them manually, modifying the path, and adding custom properties to compare them in widgets.

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.

<script defer data-autocollect="false"></script>

Autocollection for specific page

The analytics script allows enabling or disabling autocollection for a specific page.

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

Disables autocollection

<script defer data-autocollect="false"></script>

Enables 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:

Enables data collection for all pages

<script defer data-autocollect="true"></script>

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

<meta name="stonks-collect" content="false" />
``` ```html copy
<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.

Analytics script adds window.event and window.view to send events and page view manually.

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

// 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:

HTML

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

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

The script will send https://example.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 widgets.

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

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

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

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