Adds tag to scroll-depth event.

This tag is a stringified form of the existing content. This is to help render the content more effectively in Plausible, since its filtering mechanism is pretty bare bones at the moment and isn't able to view the depth events filtered by a particular path.

doc/analytics.md

@@ -20,6 +20,8 @@ This contains two values:
 * `path` - The path of the page the user is currently navigated to.
 * `depth` - The maximum percentage (as a string of the format "dd%") the user
  has scrolled on the page.
+* `tag` - A stringified format of the `path` and `depth` values together. This
+ is to make it easier to view in Plausible.
 
 This event is debounced for frequent, repeated scroll events and users can
 easily make quick, large scrolls. As a result, this percentage should be

src/client/analytics.ts

@@ -36,10 +36,12 @@ export function trackScrollDepth(host: EventTarget = window): () => void {
  const scrollPercentage = `${maxObservedScrollBucket * 100}%`;
 
  // See /doc/analytics.md#scroll-depth more details.
+ const path = getLocation().pathname;
  trackEvent('scroll-depth', {
  props: {
- path: getLocation().pathname,
+ path,
  depth: scrollPercentage,
+ tag: `${path} - ${scrollPercentage}`,
  },
  });
  },

src/client/analytics_test.ts

@@ -47,10 +47,11 @@ describe('analytics', () => {
  .toHaveBeenCalledOnceWith('scroll-depth', {
  props: {
  path: '/page',
- // Viewport bottom is at 200 (viewport top) + 500 (viewport
- // height). This is 35% of 2000 (document height) which
- // rounds down to 30%.
+ // Viewport bottom is at 200 (viewport top) + 500
+ // (viewport height). This is 35% of 2000 (document
+ // height) which rounds down to 30%.
  depth: '30%',
+ tag: '/page - 30%',
  },
  },
  );
@@ -105,10 +106,11 @@ describe('analytics', () => {
  .toHaveBeenCalledOnceWith('scroll-depth', {
  props: {
  path: '/page',
- // Viewport bottom is at 200 (viewport top) + 500 (viewport
- // height). This is 35% of 2000 (document height) which
- // rounds down to 30%.
+ // Viewport bottom is at 200 (viewport top) + 500
+ // (viewport height). This is 35% of 2000 (document
+ // height) which rounds down to 30%.
  depth: '30%',
+ tag: '/page - 30%',
  },
  },
  );
@@ -191,7 +193,11 @@ describe('analytics', () => {
  .toHaveBeenCalledOnceWith('scroll-depth', {
  props: {
  path: '/page',
+ // Viewport bottom is at 200 (viewport top) + 500
+ // (viewport height). This is 35% of 2000 (document
+ // height) which rounds down to 30%.
  depth: '30%',
+ tag: '/page - 30%',
  },
  },
  );