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">
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 url: string = 'https://cloud.appwrite.io';
export let label: string = 'Get started';
</script>
@@ -9,7 +11,9 @@
>
<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>
<a href={url} class="web-button">{label}</a>
<a href={`${PUBLIC_APPWRITE_DASHBOARD}?${getUtmSourceForLink()}`} class="web-button"
>{label}</a
>
</div>
</div>

View File

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

View File

@@ -3,6 +3,8 @@
import { IsLoggedIn } from '$lib/components';
import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
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 links: NavLink[];
@@ -17,7 +19,10 @@
<nav class="web-side-nav web-is-not-desktop" class:hidden={!open}>
<div class="web-side-nav-wrapper ps-4 pe-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
</a>
<IsLoggedIn classes="flex-1" />

View File

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

View File

@@ -46,6 +46,7 @@
import { GITHUB_REPO_LINK, GITHUB_STARS } from '$lib/constants';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { page } from '$app/stores';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let variant: DocsLayoutVariant = 'default';
export let isReferences = false;
@@ -105,7 +106,10 @@
</a>
</div>
<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>
</a>
<button

View File

@@ -20,6 +20,7 @@
import { trackEvent } from '$lib/actions/analytics';
import MainNav from '$lib/components/MainNav.svelte';
import { page } from '$app/stores';
import { getUtmSourceForLink } from '$lib/utils/utm';
export let omitMainId = false;
let theme: 'light' | 'dark' | null = 'dark';
@@ -168,7 +169,10 @@
</div>
<div class="web-mobile-header-end">
{#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>
</a>
{/if}

View File

@@ -15,3 +15,21 @@ export function getReferrerAndUtmSource() {
}
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) {
sessionStorage.setItem('utmMedium', utmMedium);
}
if (utmCampaign) {
sessionStorage.setItem('utmCampaign', utmCampaign);
}
const initialTheme = $page.route.id?.startsWith('/docs') ? getPreferredTheme() : 'dark';
applyTheme(initialTheme);

View File

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

View File

@@ -1,8 +1,9 @@
<script>
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
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>
<div

View File

@@ -2,8 +2,9 @@
import Badge from '$lib/components/ui/Badge.svelte';
import { classNames } from '$lib/utils/classnames';
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 = [
{

View File

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

View File

@@ -34,6 +34,7 @@
import Ticket12 from './(assets)/mock/ticket-12.png';
import { addDays, toReleaseDate } from '$lib/utils/date';
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 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
preferred coding languages and tools.
</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>
<img class="console" src={ConsoleImage} alt="" />

View File

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

View File

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

View File

@@ -2,6 +2,7 @@
import Phone from '../(assets)/phone.png';
import PhoneMobile from '../(assets)/phone-mobile.png';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
</script>
<div
@@ -24,7 +25,10 @@
</p>
<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
</a>
<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 { Platform } from '$lib/utils/references';
import { PUBLIC_APPWRITE_DASHBOARD } from '$env/static/public';
import { getUtmSourceForLink } from '$lib/utils/utm';
const title = 'Messaging' + TITLE_SUFFIX;
const description =
@@ -269,7 +270,11 @@ messaging.create_email(
directly to your users.
</p>
<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"
>Documentation</a
>