Add UTM info to all outgoing links to cloud

This commit is contained in:
ernstmul
2025-03-13 11:23:47 +01:00
parent dff4efd1a2
commit d39cb8c69e
17 changed files with 82 additions and 23 deletions

View File

@@ -1,6 +1,8 @@
<script lang="ts"> <script lang="ts">
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let heading: string = 'Start building with Appwrite today'; export let heading: string = 'Start building with Appwrite today';
export let url: string = 'https://cloud.appwrite.io';
export let label: string = 'Get started'; export let label: string = 'Get started';
</script> </script>
@@ -9,7 +11,9 @@
> >
<div class="flex max-w-3xs flex-col items-center justify-center gap-5 text-center"> <div class="flex max-w-3xs flex-col items-center justify-center gap-5 text-center">
<h2 class="text-label text-primary font-aeonik-pro">{heading}</h2> <h2 class="text-label text-primary font-aeonik-pro">{heading}</h2>
<a href={url} class="web-button">{label}</a> <a href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`} class="web-button"
>{label}</a
>
</div> </div>
</div> </div>

View File

@@ -4,6 +4,7 @@
import { trackEvent } from '$lib/actions/analytics'; import { trackEvent } from '$lib/actions/analytics';
import { browser } from '$app/environment'; import { browser } from '$app/environment';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let classes = ''; export let classes = '';
@@ -16,7 +17,7 @@
<a <a
class={classNames('web-button web-u-inline-width-100-percent-mobile', classes)} class={classNames('web-button web-u-inline-width-100-percent-mobile', classes)}
href={PUBLIC_APPWRITE_DASHBOARD} href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
on:click={() => on:click={() =>
trackEvent({ trackEvent({
plausible: { name: `${getTrackingEventName()} in header` }, plausible: { name: `${getTrackingEventName()} in header` },

View File

@@ -3,6 +3,8 @@
import { IsLoggedIn } from '$lib/components'; import { IsLoggedIn } from '$lib/components';
import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants'; import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
import type { NavLink } from './MainNav.svelte'; import type { NavLink } from './MainNav.svelte';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let open = false; export let open = false;
export let links: NavLink[]; export let links: NavLink[];
@@ -17,7 +19,10 @@
<nav class="web-side-nav web-is-not-desktop" class:hidden={!open}> <nav class="web-side-nav web-is-not-desktop" class:hidden={!open}>
<div class="web-side-nav-wrapper ps-4 pe-4"> <div class="web-side-nav-wrapper ps-4 pe-4">
<div class="flex items-center gap-2 px-4"> <div class="flex items-center gap-2 px-4">
<a href="https://cloud.appwrite.io/register" class="web-button is-secondary flex-1"> <a
href={`${PUBLIC_APPWRITE_DASHBOARD}/register?${getUtmSourceForLink()}`}
class="web-button is-secondary flex-1"
>
Sign up Sign up
</a> </a>
<IsLoggedIn classes="flex-1" /> <IsLoggedIn classes="flex-1" />

View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { trackEvent } from '$lib/actions/analytics'; import { trackEvent } from '$lib/actions/analytics';
import { getUtmSourceForLink } from '$lib/utils/utm';
</script> </script>
<img <img
@@ -17,7 +18,7 @@
Start building with Appwrite today Start building with Appwrite today
</h2> </h2>
<a <a
href={PUBLIC_APPWRITE_DASHBOARD} href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
class="web-button is-transparent web-self-center" class="web-button is-transparent web-self-center"
on:click={() => trackEvent({ plausible: { name: 'Get started in pre footer' } })} on:click={() => trackEvent({ plausible: { name: 'Get started in pre footer' } })}
> >
@@ -45,7 +46,7 @@
A great fit for passion projects and small applications. A great fit for passion projects and small applications.
</p> </p>
<a <a
href={`${PUBLIC_APPWRITE_DASHBOARD}/register`} href={`${PUBLIC_APPWRITE_DASHBOARD}/register?${getUtmSourceForLink()}`}
class="web-button is-secondary is-full-width-mobile web-u-cross-child-end" class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
on:click={() => on:click={() =>
trackEvent({ trackEvent({
@@ -78,7 +79,7 @@
to scale. to scale.
</p> </p>
<a <a
href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-1`} href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-1&${getUtmSourceForLink()}`}
class="web-button is-full-width-mobile web-u-cross-child-end" class="web-button is-full-width-mobile web-u-cross-child-end"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -111,7 +112,7 @@
and support. and support.
</p> </p>
<a <a
href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-2`} href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-2&${getUtmSourceForLink()}`}
class="web-button is-secondary is-full-width-mobile web-u-cross-child-end" class="web-button is-secondary is-full-width-mobile web-u-cross-child-end"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

View File

@@ -46,6 +46,7 @@
import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants'; import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let variant: DocsLayoutVariant = 'default'; export let variant: DocsLayoutVariant = 'default';
export let isReferences = false; export let isReferences = false;
@@ -105,7 +106,10 @@
</a> </a>
</div> </div>
<div class="web-mobile-header-end"> <div class="web-mobile-header-end">
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button web-is-only-desktop"> <a
href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
class="web-button web-is-only-desktop"
>
<span class="text-sub-body font-medium">Go to Console</span> <span class="text-sub-body font-medium">Go to Console</span>
</a> </a>
<button <button

View File

@@ -20,6 +20,7 @@
import { trackEvent } from '$lib/actions/analytics'; import { trackEvent } from '$lib/actions/analytics';
import MainNav from '$lib/components/MainNav.svelte'; import MainNav from '$lib/components/MainNav.svelte';
import { page } from '$app/stores'; import { page } from '$app/stores';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let omitMainId = false; export let omitMainId = false;
let theme: 'light' | 'dark' | null = 'dark'; let theme: 'light' | 'dark' | null = 'dark';
@@ -168,7 +169,10 @@
</div> </div>
<div class="web-mobile-header-end"> <div class="web-mobile-header-end">
{#if !$isMobileNavOpen} {#if !$isMobileNavOpen}
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button"> <a
href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
class="web-button"
>
<span class="text">Start building</span> <span class="text">Start building</span>
</a> </a>
{/if} {/if}

View File

@@ -15,3 +15,21 @@ export function getReferrerAndUtmSource() {
} }
return {}; return {};
} }
export function getUtmSourceForLink() {
if (typeof sessionStorage !== 'undefined') {
const values = [];
if (sessionStorage.getItem('utmSource')) {
values.push(`utm_source=${sessionStorage.getItem('utmSource')}`);
}
if (sessionStorage.getItem('utmMedium')) {
values.push(`utm_medium=${sessionStorage.getItem('utmMedium')}`);
}
if (sessionStorage.getItem('utmCampaign')) {
values.push(`utm_campaign=${sessionStorage.getItem('utmCampaign')}`);
}
return values.join('&');
}
return '';
}

View File

@@ -88,6 +88,9 @@
if (utmMedium) { if (utmMedium) {
sessionStorage.setItem('utmMedium', utmMedium); sessionStorage.setItem('utmMedium', utmMedium);
} }
if (utmCampaign) {
sessionStorage.setItem('utmCampaign', utmCampaign);
}
const initialTheme = $page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark'; const initialTheme = $page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
applyTheme(initialTheme); applyTheme(initialTheme);

View File

@@ -23,6 +23,7 @@
import Badge from '$lib/components/ui/Badge.svelte'; import Badge from '$lib/components/ui/Badge.svelte';
import { trackEvent } from '$lib/actions/analytics'; import { trackEvent } from '$lib/actions/analytics';
import AppwriteIn100Seconds from '$lib/components/AppwriteIn100Seconds.svelte'; import AppwriteIn100Seconds from '$lib/components/AppwriteIn100Seconds.svelte';
import { getUtmSourceForLink } from '$lib/utils/utm';
const title = 'Appwrite - Build like a team of hundreds'; const title = 'Appwrite - Build like a team of hundreds';
const description = DEFAULT_DESCRIPTION; const description = DEFAULT_DESCRIPTION;
@@ -157,7 +158,7 @@
</svelte:fragment> </svelte:fragment>
<div class="mt-8 flex flex-col gap-4 sm:flex-row" slot="cta"> <div class="mt-8 flex flex-col gap-4 sm:flex-row" slot="cta">
<a <a
href={PUBLIC_APPWRITE_DASHBOARD} href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
class="web-button w-full lg:w-fit" class="web-button w-full lg:w-fit"
on:click={() => on:click={() =>
trackEvent({ trackEvent({

View File

@@ -1,8 +1,9 @@
<script> <script>
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { classNames } from '$lib/utils/classnames'; import { classNames } from '$lib/utils/classnames';
import { getUtmSourceForLink } from '$lib/utils/utm';
const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`; const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education?${getUtmSourceForLink()}`;
</script> </script>
<div <div

View File

@@ -2,8 +2,9 @@
import Badge from '$lib/components/ui/Badge.svelte'; import Badge from '$lib/components/ui/Badge.svelte';
import { classNames } from '$lib/utils/classnames'; import { classNames } from '$lib/utils/classnames';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`; const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education?${getUtmSourceForLink()}`;
const items = [ const items = [
{ {

View File

@@ -5,6 +5,7 @@
import ChatIcon from '../(assets)/chat-icon.svg'; import ChatIcon from '../(assets)/chat-icon.svg';
import Beaker from '../(assets)/beaker.svg'; import Beaker from '../(assets)/beaker.svg';
import Checkmark from '../(assets)/checkmark.svg'; import Checkmark from '../(assets)/checkmark.svg';
import { getUtmSourceForLink } from '$lib/utils/utm';
const items = [ const items = [
{ {
@@ -26,7 +27,7 @@
} }
]; ];
const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education`; const educationSignUp = `${PUBLIC_APPWRITE_DASHBOARD}/console/education?${getUtmSourceForLink()}`;
</script> </script>
<section <section

View File

@@ -34,6 +34,7 @@
import Ticket12 from './(assets)/mock/ticket-12.png'; import Ticket12 from './(assets)/mock/ticket-12.png';
import { addDays, toReleaseDate } from '$lib/utils/date'; import { addDays, toReleaseDate } from '$lib/utils/date';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
const base = new Date('2024-02-26T14:00:00.000Z'); const base = new Date('2024-02-26T14:00:00.000Z');
const kickoff = new Date('2024-02-21T15:00:00.000Z'); const kickoff = new Date('2024-02-21T15:00:00.000Z');
@@ -278,7 +279,9 @@
your product and build any application at any scale, own your data, and use your your product and build any application at any scale, own your data, and use your
preferred coding languages and tools. preferred coding languages and tools.
</p> </p>
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button">Get started</a> <a href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`} class="web-button"
>Get started</a
>
</div> </div>
<img class="console" src={ConsoleImage} alt="" /> <img class="console" src={ConsoleImage} alt="" />

View File

@@ -8,6 +8,7 @@
import Faq from './faq.svelte'; import Faq from './faq.svelte';
import BG from './bg.png?enhanced'; import BG from './bg.png?enhanced';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
const title = 'Pricing' + TITLE_SUFFIX; const title = 'Pricing' + TITLE_SUFFIX;
const description = 'Explore our straightforward pricing plans that scale with your project.'; const description = 'Explore our straightforward pricing plans that scale with your project.';
@@ -95,7 +96,7 @@
applications. applications.
</p> </p>
<a <a
href="{PUBLIC_APPWRITE_DASHBOARD}/register" href={`${PUBLIC_APPWRITE_DASHBOARD}/register?${getUtmSourceForLink()}`}
class="web-button is-secondary is-full-width mt-8" class="web-button is-secondary is-full-width mt-8"
> >
<span class="text-sub-body font-medium" <span class="text-sub-body font-medium"
@@ -161,7 +162,7 @@
functionality and resources to scale. functionality and resources to scale.
</p> </p>
<a <a
href="https://cloud.appwrite.io/console?type=create&plan=tier-1" href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-1&${getUtmSourceForLink()}`}
class="web-button is-full-width mt-11" class="web-button is-full-width mt-11"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
@@ -225,7 +226,7 @@
projects and need more control and support. projects and need more control and support.
</p> </p>
<a <a
href="https://cloud.appwrite.io/console?type=create&plan=tier-2" href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-2&${getUtmSourceForLink()}`}
class="web-button is-secondary is-full-width mt-10" class="web-button is-secondary is-full-width mt-10"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"

View File

@@ -8,6 +8,8 @@
import { createAccordion, melt } from '@melt-ui/svelte'; import { createAccordion, melt } from '@melt-ui/svelte';
import { writable } from 'svelte/store'; import { writable } from 'svelte/store';
import { fly } from 'svelte/transition'; import { fly } from 'svelte/transition';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
type Table = { type Table = {
title: string; title: string;
@@ -513,7 +515,7 @@
<div class="flex flex-col items-center justify-between gap-2"> <div class="flex flex-col items-center justify-between gap-2">
<h4 class="text-sub-body text-primary font-medium">Free</h4> <h4 class="text-sub-body text-primary font-medium">Free</h4>
<a <a
href="https://cloud.appwrite.io/register" href={`${PUBLIC_APPWRITE_DASHBOARD}/register?${getUtmSourceForLink()}`}
class="web-button is-secondary !w-full" class="web-button is-secondary !w-full"
> >
<span class="text-sub-body font-medium">Start building</span> <span class="text-sub-body font-medium">Start building</span>
@@ -525,7 +527,7 @@
<h4 class="text-sub-body text-primary font-medium">Pro</h4> <h4 class="text-sub-body text-primary font-medium">Pro</h4>
<a <a
class="web-button !w-full" class="web-button !w-full"
href="https://cloud.appwrite.io/console?type=create&plan=tier-1" href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-1&${getUtmSourceForLink()}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >
@@ -538,7 +540,7 @@
<h4 class="text-sub-body text-primary font-medium">Scale</h4> <h4 class="text-sub-body text-primary font-medium">Scale</h4>
<a <a
class="web-button is-secondary !w-full" class="web-button is-secondary !w-full"
href="https://cloud.appwrite.io/console?type=create&plan=tier-2" href={`${PUBLIC_APPWRITE_DASHBOARD}/console?type=create&plan=tier-2&${getUtmSourceForLink()}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
> >

View File

@@ -2,6 +2,7 @@
import Phone from '../(assets)/phone.png'; import Phone from '../(assets)/phone.png';
import PhoneMobile from '../(assets)/phone-mobile.png'; import PhoneMobile from '../(assets)/phone-mobile.png';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
</script> </script>
<div <div
@@ -24,7 +25,10 @@
</p> </p>
<div class="flex flex-col items-center gap-2 md:flex-row"> <div class="flex flex-col items-center gap-2 md:flex-row">
<a href={PUBLIC_APPWRITE_DASHBOARD} class="web-button !w-full md:!w-fit"> <a
href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
class="web-button !w-full md:!w-fit"
>
Get started Get started
</a> </a>
<a href="/docs/products/auth" class="web-button is-secondary !w-full md:!w-fit"> <a href="/docs/products/auth" class="web-button is-secondary !w-full md:!w-fit">

View File

@@ -10,6 +10,7 @@
import MultiCodeContextless from '$lib/components/MultiCodeContextless.svelte'; import MultiCodeContextless from '$lib/components/MultiCodeContextless.svelte';
import { Platform } from '$lib/utils/references'; import { Platform } from '$lib/utils/references';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public'; import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
const title = 'Messaging' + TITLE_SUFFIX; const title = 'Messaging' + TITLE_SUFFIX;
const description = const description =
@@ -269,7 +270,11 @@ messaging.create_email(
directly to your users. directly to your users.
</p> </p>
<div class="hero-buttons mt-8 flex items-center gap-2"> <div class="hero-buttons mt-8 flex items-center gap-2">
<a class="web-button" href={PUBLIC_APPWRITE_DASHBOARD}>Get started</a> <a
class="web-button"
href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`}
>Get started</a
>
<a class="web-button is-secondary" href="/docs/products/messaging" <a class="web-button is-secondary" href="/docs/products/messaging"
>Documentation</a >Documentation</a
> >