Merge pull request #383 from Discours/feature/ga-tracker

include ga tracker

package-lock.json

@@ -14,6 +14,7 @@
         "@solid-primitives/pagination": "0.2.10",
         "cropperjs": "1.6.1",
         "form-data": "4.0.0",
+        "ga-gtag": "1.2.0",
         "i18next": "22.4.15",
         "i18next-icu": "2.3.0",
         "idb": "7.1.1",
@@ -9531,6 +9532,11 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/ga-gtag": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/ga-gtag/-/ga-gtag-1.2.0.tgz",
+      "integrity": "sha512-j9gxutMdpGMdwaX1SzOG31Ddm+IGFjeNf+N3Z5g+BBpS8FSXOALlrM+ORIGc/QKszGJEDlw+6PfIsJZICsqsGQ=="
+    },
     "node_modules/gensync": {
       "version": "1.0.0-beta.2",
       "resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

package.json

@@ -34,6 +34,7 @@
     "@solid-primitives/pagination": "0.2.10",
     "cropperjs": "1.6.1",
     "form-data": "4.0.0",
+    "ga-gtag": "1.2.0",
     "i18next": "22.4.15",
     "i18next-icu": "2.3.0",
     "idb": "7.1.1",
@@ -149,7 +150,7 @@
     "typograf": "7.1.0",
     "uniqolor": "1.1.0",
     "vike": "0.4.148",
-    "vite": "4.5.1",
+    "vite": "4.5.2",
     "vite-plugin-mkcert": "1.16.0",
     "vite-plugin-sass-dts": "1.3.11",
     "vite-plugin-solid": "2.7.2",

src/components/Article/AudioPlayer/PlayerPlaylist.tsx

@@ -1,3 +1,4 @@
+import { gtag } from 'ga-gtag'
 import { createSignal, For, lazy, Show } from 'solid-js'
 
 import { useLocalize } from '../../../context/localize'
@@ -24,6 +25,8 @@ type Props = {
   onChangeMediaIndex?: (direction: 'up' | 'down', index) => void
 }
 
+const getMediaTitle = (itm: MediaItem, idx: number) => `${idx}. ${itm.artist} - ${itm.title}`
+
 export const PlayerPlaylist = (props: Props) => {
   const { t } = useLocalize()
   const [activeEditIndex, setActiveEditIndex] = createSignal(-1)
@@ -34,6 +37,15 @@ export const PlayerPlaylist = (props: Props) => {
   const handleMediaItemFieldChange = (field: keyof MediaItem, value: string) => {
     props.onMediaItemFieldChange(activeEditIndex(), field, value)
   }
+
+  const play = (index: number) => {
+    const mi = props.media[index]
+    gtag('event', 'select_item', {
+      item_list_id: props.articleSlug,
+      item_list_name: getMediaTitle(mi, index),
+      items: props.media.map((it, ix) => getMediaTitle(it, ix)),
+    })
+  }
   return (
     <ul class={styles.playlist}>
       <For each={props.media}>
@@ -42,7 +54,7 @@ export const PlayerPlaylist = (props: Props) => {
             <div class={styles.playlistItem}>
               <button
                 class={styles.playlistItemPlayButton}
-                onClick={() => props.onPlayMedia(index())}
+                onClick={() => play(index())}
                 type="button"
                 aria-label="Play"
               >

src/components/Article/FullArticle.tsx

@@ -4,6 +4,7 @@ import { getPagePath } from '@nanostores/router'
 import { createPopper } from '@popperjs/core'
 import { Link, Meta } from '@solidjs/meta'
 import { clsx } from 'clsx'
+import { install } from 'ga-gtag'
 import { createEffect, For, createMemo, onMount, Show, createSignal, onCleanup, on } from 'solid-js'
 import { isServer } from 'solid-js/web'
 
@@ -321,9 +322,8 @@ export const FullArticle = (props: Props) => {
   )
 
   onMount(async () => {
-    await loadReactionsBy({
-      by: { shout: props.article.slug },
-    })
+    install('G-LQ4B87H8C2')
+    await loadReactionsBy({ by: { shout: props.article.slug } })
     setIsReactionsLoaded(true)
     document.title = props.article.title
     window?.addEventListener('resize', updateIframeSizes)