Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env.example
Original file line number Diff line number Diff line change
@@ -1 +1,2 @@
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
PUBLIC_ANALYTICS_ENABLED=false
55 changes: 34 additions & 21 deletions src/lib/components/Analytics.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,20 @@
import { onMount } from "svelte";
import { fly } from "svelte/transition";

import { PUBLIC_GOOGLE_ANALYTICS_ID } from "$env/static/public";
import { PUBLIC_GOOGLE_ANALYTICS_ID, PUBLIC_ANALYTICS_ENABLED } from "$env/static/public";

import { m } from '$lib/paraglide/messages.js';

import Button from "./Button.svelte";

let showBanner = $state(false);

// Don't initialize analytics if disabled
const isAnalyticsEnabled = PUBLIC_ANALYTICS_ENABLED === 'true';

onMount(() => {
if (!isAnalyticsEnabled) return;

const consentStatus = localStorage.getItem("consent_status");

if (consentStatus === null) {
Expand All @@ -26,6 +31,8 @@
});

function handleAccept() {
if (!isAnalyticsEnabled) return;

showBanner = false;
localStorage.setItem("consent_status", "granted");

Expand All @@ -38,42 +45,48 @@
}

function handleDeny() {
if (!isAnalyticsEnabled) return;

showBanner = false;
localStorage.setItem("consent_status", "denied");
}

export function reopenBanner() {
if (!isAnalyticsEnabled) return;

showBanner = true;
localStorage.removeItem("consent_status");
}
</script>

<svelte:head>
<script>
window.dataLayer = window.dataLayer || [];
{#if isAnalyticsEnabled && PUBLIC_GOOGLE_ANALYTICS_ID}
<script>
window.dataLayer = window.dataLayer || [];

function gtag() {
dataLayer.push(arguments);
}

window.gtag = gtag;
function gtag() {
dataLayer.push(arguments);
}

gtag("consent", "default", {
analytics_storage: "denied",
ad_storage: "denied",
ad_user_data: "denied",
ad_personalization: "denied",
});
</script>
window.gtag = gtag;

<script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GOOGLE_ANALYTICS_ID}`}></script>
<script>
gtag("js", new Date());
gtag("config", "{PUBLIC_GOOGLE_ANALYTICS_ID}");
</script>
gtag("consent", "default", {
analytics_storage: "denied",
ad_storage: "denied",
ad_user_data: "denied",
ad_personalization: "denied",
});
</script>

<script async src={`https://www.googletagmanager.com/gtag/js?id=${PUBLIC_GOOGLE_ANALYTICS_ID}`}></script>
<script>
gtag("js", new Date());
gtag("config", "{PUBLIC_GOOGLE_ANALYTICS_ID}");
</script>
{/if}
</svelte:head>

{#if showBanner}
{#if isAnalyticsEnabled && showBanner}
<div transition:fly="{{ x: 20, duration: 300 }}" class="banner">
<p>
{@html m["cookieBanner.message"]() }
Expand Down
11 changes: 9 additions & 2 deletions src/lib/components/Footer.svelte
Original file line number Diff line number Diff line change
@@ -1,11 +1,16 @@
<script>
<script lang="ts">
import { PUBLIC_ANALYTICS_ENABLED } from "$env/static/public";

import { m } from '$lib/paraglide/messages.js';

import Button from './Button.svelte';
import Socials from './Socials.svelte';
import Wrapper from './Wrapper.svelte';
import Analytics from './Analytics.svelte';

let analytics;
let analytics: Analytics;

const isAnalyticsEnabled = PUBLIC_ANALYTICS_ENABLED === 'true';

const buttons = [
{
Expand Down Expand Up @@ -36,11 +41,13 @@
</div>
{/each}

{#if isAnalyticsEnabled}
<div>
<Button type="medium" onclick={() => analytics?.reopenBanner()}>
{m["cookieBanner.settings"]()}
</Button>
</div>
{/if}
</div>

<!-- <button onclick={() => setLocale('en')}>en</button> -->
Expand Down