Home
On My Website

On My Website: Umbraco package for active page views

On My Website is an Umbraco analytics package that tracks active page views and displays them with a page view counter in your Backoffice.

A JavaScript file is installed on your website which tracks page views. From there, you can log into your Backoffice and see how many visitors have been on your website in the last 30 minutes and what pages they've visited.

View active page views on your website when logging into Umbraco Backoffice

How to install the package

The OnMyWebsite package is available from NuGet and is available for Umbraco 13. To install it, simply run this command from the .NET CLI for your Umbraco project.

dotnet add package OnMyWebsite

If you're using the NuGet Package Manager, you can run this command:

Install-Package OnMyWebsite

Once installed, your website should automatically start tracking page views, and you should be able to see how many visitors are on your website and what pages they are visiting when logging into the Backoffice.

Assets not loading

The HTML, CSS and JavaScript asset files needed for this package should be added when installing the package. However if you find they are not rendering when you run your Umbraco project, it might be that you've got StaticWebAssetsEnabled disabled in your .csproj file.

As On My Website is a Razor project, it requires StaticWebAssetsEnabled to be enabled for it to work. However, if you are not able to do that, you can down the asset files from the zip file below and extract it into your wwwroot folder, or whichever folder you use to host your static web assets.

Assets for 13.0.1

Change configuration values

The great thing about On My Website is that it will work on your Umbraco project without any configuration changes. However, if you want to change how it functions, you can do it inside the Umbraco:CMS:OnMyWebsite section in your AppSettings. Any values that don't appear in your AppSettings will use the default value. Here is what can be changed:

Name	Configuration path	Description	Default value
Enabled	`Enabled`	The package is enabled when set to `true`. When set to `false`, the package is disabled meaning it no longer tracks page views and the Backoffice dashboard is hidden. A restart of your Umbraco application is required to change the Backoffice dashboard visibility.	`true`
Load JavaScript	`OnPageLoad` `:` `LoadJavaScript`	The JavaScript needed for page view tracking loads automatically on your website when set to `true`. When set to `false`, you'll need to configure your Umbraco project to load the JavaScript.	`true`
Track page view	`OnPageLoad` `:` `TrackPageView`	Automatically tracks page views when set to `true`. If set to `false`, you'll need to explicitly invoke the JavaScript command to track page views.	`true`
Capture user agent	`PageView` `:` `Data` `:` `CaptureUserAgent`	Captures the user agent of the page view in the database when set to `true`. This will be used for reporting in future releases. If set to `false`, it will no longer capture the user agent when tracking the page view.	`true`
Blocked user agents	`PageView` `:` `Data` `:` `BlockedUserAgents`	Provides a case-insensitive string array of all the user agents that you don't want to track. Any user agent that contains any of the values added in this string array will block the page view from being tracked. Example to block Googlebot and Ahrefsbot: `["Googlebot", "Ahrefsbot"]`	`[]`
Capture referrer	`PageView` `:` `Data` `:` `CaptureReferrer`	Captures the referrer of the page view in the database when set to `true`. This will be used for reporting in future releases. If set to `false`, it will no longer capture the referrer when tracking the page view.	`true`
Capture user	`PageView` `:` `Data` `:` `CaptureUser`	Captures the user of the page view in the database as a random GUID when set to `true`. This also saves an `OnMyWebsite_UserId` cookie to the user's browser and will be used for reporting in future releases. If set to `false`, it will not capture the user and will delete the `OnMyWebsite_UserId` cookie if it was previously saved on the user's browser.	`false`
Backoffice dashboard weight	`BackOffice` `:` `Dashboard` `:` `Weight`	Sets the position of where the Backoffice dashboard appears. When logging into your Backoffice, the Getting Started dashboard appears with a weight of `10`, and the Redirect URL Management dashboard appears with a weight of `20`. The lower the number, the more it will appear to the left. A restart of your Umbraco application is required for this change.	`19`

`appsettings.json` example

These settings enable the package, loads the JavaScript and tracks the page view when the page loads except if the user agent contains either Googlebot or Ahrefsbot in it. It captures the user agent, referrer and user data when tracking the page view. The dashboard has a weight of 2, meaning it will appear to the left of the Getting Started dashboard when logging into your Umbraco Backoffice.

{
	"Umbraco": {
		"CMS": {
			"OnMyWebsite": {
				"Enabled": true,
				"OnPageLoad": {
					"LoadJavaScript": true,
					"TrackPageView": true
				},
				"PageView": {
					"Data": {
						"CaptureUserAgent": true,
						"BlockedUserAgents": [
							"Googlebot",
							"Ahrefsbot"
						],
						"CaptureReferrer": true,
						"CaptureUser": true
					}
				},
				"BackOffice": {
					"Dashboard": {
						"Weight": 2
					}
				}
			}
		}
	}			
}

Override configuration values on each page view

You may wish to exclude page view tracking if the request comes from a certain IP address, or if a certain cookie is set on the user's browser. This is particularly useful if you don't want to capture admin traffic.

To do this, you can add the app.UseOnMyWebsite extension method to your Program.cs file. This extension method gives you a number of async method options with access to the HttpContext and a CancellationToken. Each method returns a boolean depending on whether the configuration is enabled for that page view. Here are the different options you can set:

Override option	Description
`OverrideEnabled`	Invoked when `Umbraco` `:` `CMS` `:` `OnMyWebsite` `:` `Enabled` is set to `true` and when either the JavaScript loads or the page view is tracked. It will not be invoked when viewing the Backoffice dashboard. Return `true` to enable the package or return `false` to disable the package for that page view.
`OverrideOnPageLoadTrackPageView`	Invoked when `Umbraco` `:` `CMS` `:` `OnMyWebsite` `:` `OnPageLoad` `:` `TrackPageView` is set to `true`. Return `true` to enable automatic JavaScript loading or return `false` to disable automatic JavaScript loading for that page view.
`OverrideCaptureUserAgent`	Invoked when `Umbraco` `:` `CMS` `:` `OnMyWebsite` `:` `Data` `:` `CaptureUserAgent` is set to `true`. Return `true` to capture the user agent or return `false` to disable the capture of the user agent for that page view.
`OverrideCaptureReferrer`	Invoked when `Umbraco` `:` `CMS` `:` `OnMyWebsite` `:` `Data` `:` `CaptureReferrer` is set to `true`. Return `true` to capture the referrer or return `false` to disable the capture of the referrer for that page view.
`OverrideCaptureUser`	Invoked when `Umbraco` `:` `CMS` `:` `OnMyWebsite` `:` `Data` `:` `CaptureUser` is set to `true`. Return `true` to capture the user or return `false` to disable the capture of the user for that page view.

Here is an example of how you can use it in your Program.cs file:

// Program.cs
app.UseOnMyWebsite(options =>
{
	options.OverrideEnabled = (httpContext, cancellationToken) =>
	{
		if (httpContext.Request.Cookies.ContainsKey("ABC"))
		{
			// Will not enable the package if the request contains an "ABC" cookie
			return Task.FromResult(false);
		}

		// Will enable all other requests
		return Task.FromResult(true);
	};
	options.OverrideOnPageLoadTrackPageView = (httpContext, cancellationToken) =>
	{
		return Task.FromResult(true);
	};
	options.OverrideCaptureUserAgent = (httpContext, cancellationToken) =>
	{
		return Task.FromResult(true);
	};
	options.OverrideCaptureReferrer = (httpContext, cancellationToken) =>
	{
		return Task.FromResult(true);
	};
	options.OverrideCaptureUser = (httpContext, cancellationToken) =>
	{
		return Task.FromResult(true);
	};
});

Manually load the JavaScript

By default, the package will add JavaScript configuration properties just before the </head> tag and it will load the track-page-view.min.js JavaScript file just before the </body> tag. If you wish to manually load these into your Umbraco project, you'll need to follow these steps:

Disable the JavaScript load

Set the Umbraco:CMS:OnMyWebsite:OnPageLoad:LoadJavaScript AppSetting value to false.

Add the tag helper

In _ViewImports.cshtml, you'll need to add the @addTagHelper directive for the OnMyWebsite tag helpers.

@addTagHelper *, OnMyWebsite

Add the JavaScript

Add the onmywebsite-properties tag to the Razor view to set the properties needed to track the page view.

<onmywebsite-properties></onmywebsite-properties>

Add the onmywebsite-javascript tag to the Razor view to load the JavaScript file that will track the page view. This must appear after the onmywebsite-properties tag, otherwise your Umbraco project will not be able to track page views.

<onmywebsite-javascript></onmywebsite-javascript>

If you want to dynamically load the JavaScript file onto your website, don't add the onmywebsite-javascript tag from your Razor view. Instead, dynamically load the /App_Plugins/OnMyWebsite/frontend/scripts/track-page-view.min.js JavaScript file so you can track page views.

Data protection laws

The page view traffic is added to the dbo.onMyWebsitePageViews table in your Umbraco database. Therefore, you have complete control on how long you keep the data and what you do with it. Deleting records from the dbo.onMyWebsitePageViews table is safe to do and won't have a knock on effect on how the package works. You may wish to delete older records from this table at regular intervals to prevent it from getting too large.

You may wish to consider only tracking page views if the user has consented you to do this. This is particularly important if you are capturing the user as it stores a cookie onto their browser.

As an example on how you could do it, we are only going to track page views only if the cookie CookieConsent has been added to the user's browser. Here are steps on how you can do it:

Override the `OnPageLoadTrackPageView` behaviour

In Program.cs, call the app.UseOnMyWebsite extension method and set the OverrideOnPageLoadTrackPageView option method so we only track the page view if the request contains a CookieConsent cookie.

// Program.cs
app.UseOnMyWebsite(options =>
	{    
		options.OverrideOnPageLoadTrackPageView = (httpContext, cancellationToken) =>
		{
			if (!httpContext.Request.Cookies.ContainsKey("CookieConsent"))
			{
				// Will not track the page view if the request
				// does not contain a "CookieConsent" cookie
				return Task.FromResult(false);
			}

		// Will track the page view for all other requests
		return Task.FromResult(true);
	};
});

Manually invoke the page view when the user consents

The likehood is that when the user consents to having their data tracked, the CookieConsent cookie will be invoked through JavaScript without the page reloading. Therefore, you will have to manually invoke the window.onMyWebsite.trackPageView(); method through JavaScript once the CookieConsent cookie has been added to the user's browser so the page view can be tracked for that request. All other page views will track normally as the CookieConsent cookie will be present in the request.

Get in contact with us

If you have any questions, comments, or new feature recommendations about On My Website, please contact us. We look forward to hearing your feedback.