First attempt to add Google Analytics to SvelteKit. This should be per site.

This commit is contained in:
Scott Idem
2024-10-07 14:19:32 -04:00
parent aef469ad9d
commit 820c151750
3 changed files with 50 additions and 7 deletions

View File

@@ -8,8 +8,6 @@
<meta name="viewport" content="width=device-width" />
<title>OSIT's Aether System (&AElig;) - Built with SvelteKit</title>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
@@ -18,9 +16,6 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script>
</script>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover" data-theme="my-custom-theme">

39
src/lib/analytics.svelte Normal file
View File

@@ -0,0 +1,39 @@
<script lang="ts">
// import { page } from '$app/stores'
export let site_google_tracking_id: string = '';
console.log(`site_google_tracking_id = `, site_google_tracking_id);
if (typeof window !== 'undefined') {
window.dataLayer = window.dataLayer || [];
window.gtag = function gtag(): void {
window.dataLayer.push(arguments);
};
window.gtag('js', new Date());
window.gtag('config', site_google_tracking_id);
}
// $: if (typeof gtag !== 'undefined') {
// gtag('config', site_google_tracking_id, {
// page_title: document.title,
// page_path: $page.url.pathname,
// })
// }
</script>
<svelte:head>
<script
async
src="https://www.googletagmanager.com/gtag/js?id={site_google_tracking_id}">
</script>
<!-- <script>
window.dataLayer = window.dataLayer || []
function gtag() {
dataLayer.push(arguments)
}
gtag('js', new Date())
gtag('config', site_google_tracking_id)
</script> -->
</svelte:head>

View File

@@ -53,6 +53,7 @@ import { storePopup } from '@skeletonlabs/skeleton';
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
import Analytics from '$lib/analytics.svelte'
// import { api } from '$lib/api';
import { ae_loc, ae_sess, ae_api, slct, slct_trigger } from '$lib/ae_stores';
import { events_loc, events_slct } from '$lib/ae_events_stores';
@@ -101,7 +102,9 @@ if ($ae_loc?.site_cfg_json.slct__event_id) {
// console.log(`Event ID already set:`, $events_slct.event_id);
$events_loc.event_id = $events_slct.event_id;
} else {
console.log(`No Event ID set!`);
if (log_lvl) {
console.log(`No Event ID set!`);
}
}
// This is mainly for Precon CHOW
@@ -112,7 +115,9 @@ if ($ae_loc.site_cfg_json.slct__sponsorship_cfg_id) {
$slct.sponsorship_cfg_id = $ae_loc.sponsorship_cfg_id;
$ae_loc.mod.sponsorships.cfg_id = $ae_loc.sponsorship_cfg_id;
} else {
console.log(`No Sponsorship Config ID set.`);
if (log_lvl) {
console.log(`No Sponsorship Config ID set.`);
}
}
@@ -356,6 +361,10 @@ onMount(() => {
});
</script>
<!-- {#if ae_acct.loc.site_google_tracking_id} -->
{#if $ae_loc?.site_google_tracking_id && $ae_loc?.site_google_tracking_id.length > 0}
<Analytics bind:site_google_tracking_id={$ae_loc.site_google_tracking_id} />
{/if}
<svelte:head>
<title>{$ae_loc.title ?? 'Æ loading...'}</title>