✨ Switch to Plausible analytics

Detects automatically route changes

- use provided script
- specify domain
- send event name with optional props

src/components/Analytics.svelte

@@ -1,37 +1,15 @@
 <script lang="ts">
-    // @ts-nocheck
+    export let domain: string
-    import { page } from '$app/stores'
+    export let enabled: boolean = !import.meta.env.DEV
-    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} />
+        <script defer data-domain={domain} src="https://analytics.flayks.com/js/{import.meta.env.DEV ? 'script.local' : 'plausible'}.js"></script>
+        <script>
+            window.plausible = window.plausible || function() {
+                (window.plausible.q = window.plausible.q || []).push(arguments)
+            }
+        </script>
     {/if}
-</svelte:head>
+</svelte:head>
-
-<noscript>
-    <img src="{url}/pixel.png?app_key={appKey}&begin_session=1" alt="countly" width="0" height="0" />
-</noscript>

src/components/molecules/EmailForm.svelte

@@ -31,7 +31,7 @@
 
             // If successful
             if (result.data.success) {
-                sendEvent({ action: 'newsletterSubscribe' })
+                sendEvent('newsletterSubscribe')
                 update()
             } else {
                 // Hide message for errors

src/components/molecules/Switcher.svelte

@@ -23,7 +23,7 @@
         isOpen = !isOpen
 
         // Record opening event
-        !isOpen && sendEvent({ action: 'switcherOpen' })
+        !isOpen && sendEvent('switcherOpen')
     }
 
     /**

src/components/organisms/Locations.svelte

@@ -54,7 +54,7 @@
                     class={'is-disabled'}
                     on:click={() => {
                         filterLocation(slug)
-                        sendEvent({ action: 'filterContinent' })
+                        sendEvent('filterContinent')
                     }}
                 >
                     <svg width="12" height="12">

src/routes/+layout.svelte

@@ -4,7 +4,7 @@
     import { browser } from '$app/environment'
     import { page } from '$app/stores'
     import { beforeNavigate } from '$app/navigation'
-    import { PUBLIC_ANALYTICS_KEY, PUBLIC_ANALYTICS_URL } from '$env/static/public'
+    import { PUBLIC_ANALYTICS_DOMAIN } from '$env/static/public'
     import type { PageData } from './$types'
     import { onMount, setContext } from 'svelte'
     import { pageLoading, previousPage } from '$utils/stores'
@@ -77,8 +77,5 @@
 <SmoothScroll />
 
 {#if browser}
-    <Analytics
+    <Analytics domain={PUBLIC_ANALYTICS_DOMAIN} />
-        appKey={PUBLIC_ANALYTICS_KEY}
-        url={PUBLIC_ANALYTICS_URL}
-    />
 {/if}

src/routes/about/+page.svelte

@@ -319,7 +319,7 @@
                                 <a href="#step-{index + 1}" class="title-big"
                                     on:click|preventDefault={() => {
                                         currentStep = index
-                                        sendEvent({ action: 'aboutStepSwitch' })
+                                        sendEvent('aboutStepSwitch')
                                     }}
                                 >
                                     <span>{title}</span>

src/utils/analytics.ts

@@ -1,21 +1,8 @@
 // @ts-nocheck
 
-// Send page
-export const sendPage = (path: string = '') => {
-    if (typeof Countly !== 'undefined') {
-        Countly.track_pageview(path)
-    }
-}
-
 // Send event
-export const sendEvent = ({ action, segments = {}, amount = 1 }) => {
+export const sendEvent = (action: string, props?: any) => {
-    if (typeof Countly !== 'undefined') {
+    if (typeof plausible !== 'undefined') {
-        Countly.add_event({
+        plausible(action, props)
-            key: action,
-            count: amount,
-            segmentation: {
-                ...segments
-            }
-        })
     }
 }

src/utils/functions/index.ts

@@ -154,7 +154,7 @@ export const mailtoClipboard = (node: HTMLElement) => {
         }))
 
         // Record event in analytics
-        sendEvent({ action: 'emailCopy' })
+        sendEvent('emailCopy')
 
         event.preventDefault()
     }