From c66fe8587992f22a19fcf86744e84b59110fbd99 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 23 Jun 2022 19:04:23 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20Analytics?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Analytics.svelte | 37 +++++++++++++++++++++++++++++++++
 src/routes/__layout.svelte      |  9 ++++++++
 src/utils/analytics.ts          | 21 +++++++++++++++++++
 3 files changed, 67 insertions(+)
 create mode 100644 src/components/Analytics.svelte
 create mode 100644 src/utils/analytics.ts

diff --git a/src/components/Analytics.svelte b/src/components/Analytics.svelte
new file mode 100644
index 0000000..a1f4f86
--- /dev/null
+++ b/src/components/Analytics.svelte
@@ -0,0 +1,37 @@
+<script lang="ts">
+    // @ts-nocheck
+    import { page } from '$app/stores'
+    import { sendPage } from '../utils/analytics'
+
+    export let appKey: any
+    export let url: any
+    export let enabled: boolean = process.env.NODE_ENV !== 'development'
+
+    let loaded = false
+
+    const handleLoad = () => {
+        // Init Countly
+        if (Countly) {
+            Countly.init({
+                app_key: appKey,
+                url,
+            })
+            Countly.track_sessions()
+            Countly.track_pageview()
+        }
+        loaded = true
+    }
+
+    // Send page to Analytics when changing path
+    $: enabled && $page.url.pathname && loaded && sendPage()
+</script>
+
+<svelte:head>
+    {#if enabled}
+        <script defer src="https://cdn.jsdelivr.net/npm/countly-sdk-web@latest/lib/countly.min.js" on:load={handleLoad} />
+    {/if}
+</svelte:head>
+
+<noscript>
+    <img src="{url}/pixel.png?app_key={appKey}&begin_session=1" alt="countly" width="0" height="0" />
+</noscript>
\ No newline at end of file
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index f9a0938..80458ac 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import '../style/global.scss'
 
+    import { browser } from '$app/env'
     import { navigating, page } from '$app/stores'
     import { beforeNavigate } from '$app/navigation'
     import { onMount, setContext } from 'svelte'
@@ -9,6 +10,7 @@
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
+    import Analytics from '$components/Analytics.svelte'
     import Switcher from '$components/molecules/Switcher.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
@@ -63,6 +65,13 @@
 
 <SVGSprite />
 
+{#if browser}
+    <Analytics
+        appKey={import.meta.env.VITE_ANALYTICS_KEY}
+        url={import.meta.env.VITE_ANALYTICS_URL}
+    />
+{/if}
+
 
 <script context="module" lang="ts">
     import type { LoadEvent, LoadOutput } from '@sveltejs/kit'
diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
new file mode 100644
index 0000000..bde907d
--- /dev/null
+++ b/src/utils/analytics.ts
@@ -0,0 +1,21 @@
+// @ts-nocheck
+
+// Send page
+export const sendPage = (path: string) => {
+    if (Countly) {
+        Countly.track_pageview()
+    }
+}
+
+// Send event
+export const sendEvent = ({ action, segments = {}, amount = 1 }) => {
+    if (Countly) {
+        Countly.add_event({
+            key: action,
+            count: amount,
+            segmentation: {
+                ...segments
+            }
+        })
+    }
+}
\ No newline at end of file