mirror of https://github.com/VERT-sh/VERT.git
feat: more plausible analytics data (#27)
* feat: testing nightly webhook * feat: add nightly label * feat: implement types for plausible * feat: add analytics for conversions
This commit is contained in:
nullptr
GitHub
parent
adc1c615da
commit
8913db38f4
|
|
@ -1,2 +1,3 @@
|
|||
PUB_HOSTNAME=vert.sh # only gets used for plausible (for now)
|
||||
PUB_PLAUSIBLE_URL=https://plausible.example.com # can be empty
|
||||
PUB_PLAUSIBLE_URL=https://plausible.example.com # can be empty
|
||||
PUB_ENV=production # "production" or "nightly"
|
||||
|
|
@ -1,5 +1,242 @@
|
|||
// See https://svelte.dev/docs/kit/types#app.d.ts
|
||||
// for information about these interfaces
|
||||
type EventPayload = {
|
||||
readonly n: string;
|
||||
readonly u: Location["href"];
|
||||
readonly d: Location["hostname"];
|
||||
readonly r: Document["referrer"] | null;
|
||||
readonly w: Window["innerWidth"];
|
||||
readonly h: 1 | 0;
|
||||
readonly p?: string;
|
||||
};
|
||||
|
||||
type CallbackArgs = {
|
||||
readonly status: number;
|
||||
};
|
||||
|
||||
type EventOptions = {
|
||||
/**
|
||||
* Callback called when the event is successfully sent.
|
||||
*/
|
||||
readonly callback?: (args: CallbackArgs) => void;
|
||||
/**
|
||||
* Properties to be bound to the event.
|
||||
*/
|
||||
readonly props?: { readonly [propName: string]: string | number | boolean };
|
||||
};
|
||||
|
||||
declare global {
|
||||
interface Window {
|
||||
plausible: TrackEvent;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Options used when initializing the tracker.
|
||||
*/
|
||||
export type PlausibleInitOptions = {
|
||||
/**
|
||||
* If true, pageviews will be tracked when the URL hash changes.
|
||||
* Enable this if you are using a frontend that uses hash-based routing.
|
||||
*/
|
||||
readonly hashMode?: boolean;
|
||||
/**
|
||||
* Set to true if you want events to be tracked when running the site locally.
|
||||
*/
|
||||
readonly trackLocalhost?: boolean;
|
||||
/**
|
||||
* The domain to bind the event to.
|
||||
* Defaults to `location.hostname`
|
||||
*/
|
||||
readonly domain?: Location["hostname"];
|
||||
/**
|
||||
* The API host where the events will be sent.
|
||||
* Defaults to `'https://plausible.io'`
|
||||
*/
|
||||
readonly apiHost?: string;
|
||||
};
|
||||
|
||||
/**
|
||||
* Data passed to Plausible as events.
|
||||
*/
|
||||
export type PlausibleEventData = {
|
||||
/**
|
||||
* The URL to bind the event to.
|
||||
* Defaults to `location.href`.
|
||||
*/
|
||||
readonly url?: Location["href"];
|
||||
/**
|
||||
* The referrer to bind the event to.
|
||||
* Defaults to `document.referrer`
|
||||
*/
|
||||
readonly referrer?: Document["referrer"] | null;
|
||||
/**
|
||||
* The current device's width.
|
||||
* Defaults to `window.innerWidth`
|
||||
*/
|
||||
readonly deviceWidth?: Window["innerWidth"];
|
||||
};
|
||||
|
||||
/**
|
||||
* Options used when tracking Plausible events.
|
||||
*/
|
||||
export type PlausibleOptions = PlausibleInitOptions & PlausibleEventData;
|
||||
|
||||
/**
|
||||
* Tracks a custom event.
|
||||
*
|
||||
* Use it to track your defined goals by providing the goal's name as `eventName`.
|
||||
*
|
||||
* ### Example
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { trackEvent } = Plausible()
|
||||
*
|
||||
* // Tracks the 'signup' goal
|
||||
* trackEvent('signup')
|
||||
*
|
||||
* // Tracks the 'Download' goal passing a 'method' property.
|
||||
* trackEvent('Download', { props: { method: 'HTTP' } })
|
||||
* ```
|
||||
*
|
||||
* @param eventName - Name of the event to track
|
||||
* @param options - Event options.
|
||||
* @param eventData - Optional event data to send. Defaults to the current page's data merged with the default options provided earlier.
|
||||
*/
|
||||
type TrackEvent = (
|
||||
eventName: string,
|
||||
options?: EventOptions,
|
||||
eventData?: PlausibleOptions,
|
||||
) => void;
|
||||
|
||||
/**
|
||||
* Manually tracks a page view.
|
||||
*
|
||||
* ### Example
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { trackPageview } = Plausible()
|
||||
*
|
||||
* // Track a page view
|
||||
* trackPageview()
|
||||
* ```
|
||||
*
|
||||
* @param eventData - Optional event data to send. Defaults to the current page's data merged with the default options provided earlier.
|
||||
* @param options - Event options.
|
||||
*/
|
||||
type TrackPageview = (
|
||||
eventData?: PlausibleOptions,
|
||||
options?: EventOptions,
|
||||
) => void;
|
||||
|
||||
/**
|
||||
* Cleans up all event listeners attached.
|
||||
*/
|
||||
type Cleanup = () => void;
|
||||
|
||||
/**
|
||||
* Tracks the current page and all further pages automatically.
|
||||
*
|
||||
* Call this if you don't want to manually manage pageview tracking.
|
||||
*
|
||||
* ### Example
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { enableAutoPageviews } = Plausible()
|
||||
*
|
||||
* // This tracks the current page view and all future ones as well
|
||||
* enableAutoPageviews()
|
||||
* ```
|
||||
*
|
||||
* The returned value is a callback that removes the added event listeners and restores `history.pushState`
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { enableAutoPageviews } = Plausible()
|
||||
*
|
||||
* const cleanup = enableAutoPageviews()
|
||||
*
|
||||
* // Remove event listeners and restore `history.pushState`
|
||||
* cleanup()
|
||||
* ```
|
||||
*/
|
||||
type EnableAutoPageviews = () => Cleanup;
|
||||
|
||||
/**
|
||||
* Tracks all outbound link clicks automatically
|
||||
*
|
||||
* Call this if you don't want to manually manage these links.
|
||||
*
|
||||
* It works using a **[MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver)** to automagically detect link nodes throughout your application and bind `click` events to them.
|
||||
*
|
||||
* Optionally takes the same parameters as [`MutationObserver.observe`](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver/observe).
|
||||
*
|
||||
* ### Example
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { enableAutoOutboundTracking } = Plausible()
|
||||
*
|
||||
* // This tracks all the existing and future outbound links on your page.
|
||||
* enableAutoOutboundTracking()
|
||||
* ```
|
||||
*
|
||||
* The returned value is a callback that removes the added event listeners and disconnects the observer
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { enableAutoOutboundTracking } = Plausible()
|
||||
*
|
||||
* const cleanup = enableAutoOutboundTracking()
|
||||
*
|
||||
* // Remove event listeners and disconnect the observer
|
||||
* cleanup()
|
||||
* ```
|
||||
*/
|
||||
type EnableAutoOutboundTracking = (
|
||||
targetNode?: Node & ParentNode,
|
||||
observerInit?: MutationObserverInit,
|
||||
) => Cleanup;
|
||||
|
||||
/**
|
||||
* Initializes the tracker with your default values.
|
||||
*
|
||||
* ### Example (es module)
|
||||
* ```js
|
||||
* import Plausible from 'plausible-tracker'
|
||||
*
|
||||
* const { enableAutoPageviews, trackEvent } = Plausible({
|
||||
* domain: 'my-app-domain.com',
|
||||
* hashMode: true
|
||||
* })
|
||||
*
|
||||
* enableAutoPageviews()
|
||||
*
|
||||
* function onUserRegister() {
|
||||
* trackEvent('register')
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* ### Example (commonjs)
|
||||
* ```js
|
||||
* var Plausible = require('plausible-tracker');
|
||||
*
|
||||
* var { enableAutoPageviews, trackEvent } = Plausible({
|
||||
* domain: 'my-app-domain.com',
|
||||
* hashMode: true
|
||||
* })
|
||||
*
|
||||
* enableAutoPageviews()
|
||||
*
|
||||
* function onUserRegister() {
|
||||
* trackEvent('register')
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
* @param defaults - Default event parameters that will be applied to all requests.
|
||||
*/
|
||||
|
||||
declare global {
|
||||
namespace App {
|
||||
// interface Error {}
|
||||
|
|
@ -10,4 +247,11 @@ declare global {
|
|||
}
|
||||
}
|
||||
|
||||
declare module "svelte/elements" {
|
||||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||||
interface HTMLAttributes<T> {
|
||||
[key: `event-${string}`]: string | undefined | null;
|
||||
}
|
||||
}
|
||||
|
||||
export {};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,11 @@
|
|||
import { files, theme } from "$lib/store/index.svelte";
|
||||
import Logo from "$lib/components/visual/svg/Logo.svelte";
|
||||
import featuredImage from "$lib/assets/VERT_Feature.webp";
|
||||
import { PUB_HOSTNAME, PUB_PLAUSIBLE_URL } from "$env/static/public";
|
||||
import {
|
||||
PUB_ENV,
|
||||
PUB_HOSTNAME,
|
||||
PUB_PLAUSIBLE_URL,
|
||||
} from "$env/static/public";
|
||||
import FancyMenu from "$lib/components/functional/FancyMenu.svelte";
|
||||
import { writable } from "svelte/store";
|
||||
import { MoonIcon, SunIcon } from "lucide-svelte";
|
||||
|
|
@ -86,6 +90,16 @@
|
|||
navbar?.addEventListener("mouseenter", mouseEnter);
|
||||
navbar?.addEventListener("mouseleave", mouseLeave);
|
||||
});
|
||||
|
||||
onMount(() => {
|
||||
window.plausible =
|
||||
window.plausible ||
|
||||
((_, opts) => {
|
||||
opts?.callback?.({
|
||||
status: 200,
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -96,7 +110,8 @@
|
|||
{#if PUB_PLAUSIBLE_URL}<script
|
||||
defer
|
||||
data-domain={PUB_HOSTNAME || "vert.sh"}
|
||||
src="{PUB_PLAUSIBLE_URL}/js/script.js"
|
||||
event-Theme={theme.dark ? "dark" : "light"}
|
||||
src="{PUB_PLAUSIBLE_URL}/js/script.pageview-props.tagged-events.js"
|
||||
></script>{/if}
|
||||
</svelte:head>
|
||||
|
||||
|
|
@ -110,8 +125,16 @@
|
|||
href="/"
|
||||
class="px-4 relative h-14 mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:hidden flex"
|
||||
>
|
||||
<div class="h-6 w-24 items-center flex justify-center">
|
||||
<div class="h-6 relative w-24 items-center flex justify-center">
|
||||
<Logo />
|
||||
{#if PUB_ENV === "nightly"}
|
||||
<div
|
||||
class="absolute -top-6 -left-10 px-2 py-1 w-fit bg-foreground-highlight text-accent-background rotate-[-10deg] rounded-xl"
|
||||
style="font-family: Comic Sans MS, sans-serif;"
|
||||
>
|
||||
NIGHTLY
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
@ -125,8 +148,16 @@
|
|||
href="/"
|
||||
class="px-3 relative w-full h-full mr-3 justify-center items-center bg-accent-background fill-accent-foreground rounded-xl md:flex hidden"
|
||||
>
|
||||
<div class="h-6 w-24 items-center flex justify-center">
|
||||
<div class="h-6 w-24 items-center flex justify-center relative">
|
||||
<Logo />
|
||||
{#if PUB_ENV === "nightly"}
|
||||
<div
|
||||
class="absolute -top-6 -left-10 px-2 py-1 w-fit bg-foreground-highlight text-accent-background rotate-[-10deg] rounded-xl"
|
||||
style="font-family: Comic Sans MS, sans-serif;"
|
||||
>
|
||||
NIGHTLY
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,12 @@
|
|||
promises.push(
|
||||
(async (i) => {
|
||||
await convert(files.files[i], i);
|
||||
window.plausible("Convert", {
|
||||
props: {
|
||||
"Format from": files.files[i].from,
|
||||
"Format to": files.files[i].to,
|
||||
},
|
||||
});
|
||||
})(i),
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue