diff --git a/package-lock.json b/package-lock.json index baa3c974..bc331cb5 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index d52e5fc7..1bce74a2 100644 --- a/package.json +++ b/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", diff --git a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx b/src/components/Article/AudioPlayer/PlayerPlaylist.tsx index 57bdaf2f..b4eec25f 100644 --- a/src/components/Article/AudioPlayer/PlayerPlaylist.tsx +++ b/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 (