Skip to content

Commit

Permalink
Merge pull request #1428 from appwrite/homepage-analytics
Browse files Browse the repository at this point in the history
add analytics events
  • Loading branch information
thejessewinton authored Oct 16, 2024
2 parents 323b419 + d2113e8 commit aa31ee6
Show file tree
Hide file tree
Showing 9 changed files with 1,915 additions and 1,948 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"@types/morgan": "^1.9.9",
"@typescript-eslint/eslint-plugin": "^7.13.1",
"@typescript-eslint/parser": "^7.13.1",
"analytics": "^0.8.14",
"clsx": "^2.1.1",
"cva": "npm:class-variance-authority@^0.7.0",
"date-fns": "^3.6.0",
Expand All @@ -65,6 +66,7 @@
"node-html-parser": "^6.1.13",
"openapi-types": "^12.1.3",
"oslllo-svg-fixer": "^3.0.0",
"plausible-tracker": "^0.3.9",
"postcss": "^8.4.39",
"prettier": "^3.3.3",
"prettier-plugin-svelte": "^3.2.5",
Expand Down
3,733 changes: 1,789 additions & 1,944 deletions pnpm-lock.yaml

Large diffs are not rendered by default.

85 changes: 85 additions & 0 deletions src/lib/actions/analytics.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,85 @@
import { Analytics, type AnalyticsPlugin } from 'analytics';
import Plausible from 'plausible-tracker';
import { get } from 'svelte/store';
import { page } from '$app/stores';

import { ENV } from '$lib/system';
import { browser } from '$app/environment';

type Payload = {
payload: {
event: string;
properties: {
path: string;
referrer: string;
width: number;
};
};
};

const plausible = (domain: string): AnalyticsPlugin => {
if (!browser) return { name: 'analytics-plugin-plausible' };

const instance = Plausible({
domain
});

return {
name: 'analytics-plugin-plausible',
page: ({ payload }: Payload) => {
instance.trackPageview({
url: payload.properties.path,
referrer: payload.properties.referrer,
deviceWidth: payload.properties.width
});
},
track: ({ payload }: Payload) => {
instance.trackEvent(
payload.event,
{
props: payload.properties
},
{
url: payload.properties.path,
deviceWidth: payload.properties.width
}
);
},
loaded: () => true
};
};

const analytics = Analytics({
app: 'appwrite',
plugins: [plausible('appwrite.io')]
});

export const trackEvent = async (name: string, data: object = {}) => {
if (!isTrackingAllowed()) {
return;
}

const currentPage = get(page);
const path = currentPage.route.id ?? '';

if (ENV.DEV || ENV.PREVIEW) {
console.log(`[Analytics] Event ${name} ${path}`, data);
} else {
await analytics.track(name, { ...data, path });
}
};

export function isTrackingAllowed() {
if (ENV.TEST) {
return;
}
if (window.navigator?.doNotTrack) {
if (navigator.doNotTrack === '1' || navigator.doNotTrack === 'yes') {
return false;
} else {
return true;
}
} else {
return true;
}
}
2 changes: 2 additions & 0 deletions src/lib/components/IsLoggedIn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@
import Button from './ui/Button.svelte';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { classNames } from '$lib/utils/classnames';
import { trackEvent } from '$lib/actions/analytics';
export let classes = '';
</script>

<a
class={classNames('web-button web-u-inline-width-100-percent-mobile', classes)}
href={PUBLIC_APPWRITE_DASHBOARD}
on:click={() => trackEvent('Get started/go to console in header')}
>
<span class="hidden group-[&[data-logged-in]]/body:block">Go to Console</span>
<span class="block group-[&[data-logged-in]]/body:hidden">Get started</span>
Expand Down
9 changes: 8 additions & 1 deletion src/lib/components/PreFooter.svelte
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<script lang="ts">
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { trackEvent } from '$lib/actions/analytics';
</script>

<img src="/images/bgs/pre-footer.png" alt="" class="web-pre-footer-bg" style="z-index:-1" />
Expand All @@ -9,7 +10,11 @@
<h2 class="text-display font-aeonik-pro text-primary max-w-[500px] text-center">
Start building today
</h2>
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button is-transparent web-self-center">
<a
href={PUBLIC_APPWRITE_DASHBOARD}
class="web-button is-transparent web-self-center"
on:click={() => trackEvent('Get started in pre footer')}
>
<span class="text">Get started</span>
</a>
</section>
Expand All @@ -36,6 +41,7 @@
<a
href={`${PUBLIC_APPWRITE_DASHBOARD}/register`}
class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
on:click={() => trackEvent('Get started Free plan')}
>
<span class="text">Get started</span>
</a>
Expand All @@ -56,6 +62,7 @@
class="web-button is-full-width-mobile web-u-cross-child-end"
target="_blank"
rel="noopener noreferrer"
on:click={() => trackEvent('Get started Pro plan')}
>
<!-- <span class="text">Start trial</span> -->
<span class="text">Start building</span>
Expand Down
7 changes: 6 additions & 1 deletion src/lib/components/Technologies.svelte
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
<script lang="ts">
import { trackEvent } from '$lib/actions/analytics';
import Tooltip from '$lib/components/Tooltip.svelte';
import { themeInUse } from '$routes/+layout.svelte';
Expand Down Expand Up @@ -71,7 +72,11 @@
{#each platforms as platform}
<Tooltip>
<li>
<a href={platform.href} class="web-icon-button web-box-icon has-border-gradient">
<a
href={platform.href}
class="web-icon-button web-box-icon has-border-gradient"
on:click={() => trackEvent(`${platform.name} clicked`)}
>
<img
src={platform.image}
alt="{platform.name} quick start"
Expand Down
2 changes: 2 additions & 0 deletions src/lib/layouts/Main.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@
import AnnouncementBanner from '$lib/components/AnnouncementBanner.svelte';
import InitBanner from '$lib/components/InitBanner.svelte';
import Button from '$lib/components/ui/Button.svelte';
import { trackEvent } from '$lib/actions/analytics';
export let omitMainId = false;
let theme: 'light' | 'dark' | null = 'dark';
Expand Down Expand Up @@ -263,6 +264,7 @@
target="_blank"
rel="noopener noreferrer"
class="web-button is-text web-u-inline-width-100-percent-mobile"
on:click={() => trackEvent('Star on GitHub in header')}
>
<span class="web-icon-star" aria-hidden="true" />
<span class="text">Star on GitHub</span>
Expand Down
13 changes: 13 additions & 0 deletions src/lib/system.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { dev } from '$app/environment';
import { PUBLIC_GROWTH_ENDPOINT } from '$env/static/public';

export const VARS = {
GROWTH_ENDPOINT: PUBLIC_GROWTH_ENDPOINT ?? undefined
};

export const ENV = {
DEV: dev,
PROD: !dev,
PREVIEW: import.meta.env?.VERCEL === '1',
TEST: !!import.meta.env?.VITEST
};
10 changes: 8 additions & 2 deletions src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@
import DeveloperCard from './DeveloperCard.svelte';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import CoverImage from './dashboard.png';
import Button from '$lib/components/ui/Button.svelte';
import Hero from '$lib/components/ui/Hero.svelte';
import GradientText from '$lib/components/ui/GradientText.svelte';
import Badge from '$lib/components/ui/Badge.svelte';
import { trackEvent } from '$lib/actions/analytics';
const title = 'Appwrite - Build like a team of hundreds';
const description = DEFAULT_DESCRIPTION;
Expand Down Expand Up @@ -124,6 +124,7 @@
<a
href="/blog/post/introducing-database-backups"
class="web-hero-banner-button mb-4"
on:click={() => trackEvent('Banner button click')}
>
<span class="web-icon-star shrink-0" aria-hidden="true" />
<span class="text-caption shrink-0 font-medium">New</span>
Expand All @@ -149,6 +150,7 @@
href={PUBLIC_APPWRITE_DASHBOARD}
class="web-button mt-8 w-full lg:w-fit"
slot="cta"
on:click={() => trackEvent('Get started in hero')}
>
Get started
</a>
Expand Down Expand Up @@ -451,7 +453,11 @@
you can code with the language you want at any time.
</p>
<Technologies />
<a href="/docs/sdks" class="web-button is-secondary">Explore all SDKs</a>
<a
href="/docs/sdks"
class="web-button is-secondary"
on:click={() => trackEvent('Explore all SDKs')}>Explore all SDKs</a
>
</section>
</div>
</div>
Expand Down

0 comments on commit aa31ee6

Please sign in to comment.