Update to nextjs 13 plus matomo support

components/audioplayer.js

@@ -8,6 +8,7 @@ const AbAudioPlayer = (audiodata) => {
         <AudioPlayer
             src={audiodata.audio_mp3.url}
             //onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: audiodata.audio_mp3})}
+            onPlay={_paq.push(['trackEvent', 'Podcasts', 'Play Podcast', audiodata.audio_mp3])}
             />
     </div>
     )

components/featureimage.js

@@ -8,6 +8,7 @@ return (
     <div className="featuredimage">
         <Image
             src={imgSrc}
+            layout="responsive"
             height={400}
             width={800}
             priority={true}

data/external/cms.js

@@ -87,6 +87,25 @@ export const getAllPodcastSeries = async () => {
     return await res.json()
 }
 
+export const getAllPodcastEpisodes = async () => {
+    const { serverRuntimeConfig } = getConfig()
+    const qs = require('qs')
+    const query = qs.stringify({
+        populate: {}
+    }, {
+        encodeValuesOnly: true
+    })
+
+    const res = await fetch(serverRuntimeConfig.base_path + `podcast-episodes?${query}`, {
+        headers: new Headers({
+            'Authorization': serverRuntimeConfig.strapi_token,
+            'Content-Type': 'application/x-www-form-urlencoded'
+        })
+    })
+
+    return await res.json()
+}
+
 export const getProjectDetails = async (projectId) => {
     const { serverRuntimeConfig } = getConfig()
     const qs = require('qs')

package.json

@@ -11,6 +11,7 @@
   "author": "James Purser",
   "license": "ISC",
   "dependencies": {
+    "@socialgouv/matomo-next": "^1.6.1",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-less": "^1.0.1",
     "bootstrap": "^4.6.0",

pages/_app.js

@@ -8,6 +8,13 @@ import { Router, useRouter } from 'next/router'
 
 //Router.events.on('routeChangeComplete', (url) => gtag.pageview(url))
 
+import { init } from "@socialgouv/matomo-next";
+
+const MATOMO_URL = "https://analytics.angrybeanie.com";
+const MATOMO_SITE_ID = 2;
+
+console.log(MATOMO_URL);
+
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
   useEffect(() => {
@@ -15,6 +22,7 @@ function MyApp({ Component, pageProps }) {
      // gtag.pageview(url);
      // console.log("Pageview is happening")
     };
+    init({ url: MATOMO_URL, siteId: MATOMO_SITE_ID });
     router.events.on("routeChangeComplete", handleRouteChange);
     return () => {
       router.events.off("routeChangeComplete", handleRouteChange);

pages/podcasts/shows/[...episode].js

@@ -8,6 +8,7 @@ import EpisodeSideBar from "../../../components/episodesidebar"
 import { getPodcastEpisode, getPodcastSeriesEpisodes } from '../../../data/external/cms.js';
 import Head from "next/head"
 import config from "../../../data/internal/config"
+import { push } from '@socialgouv/matomo-next';
 
 
 export async function getServerSideProps(context) {
@@ -36,6 +37,19 @@ export async function getServerSideProps(context) {
 }
 
 const Episode = ( props ) => {
+
+    function pushLocalStart() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioStart", props.audiodata.audio_mp3])}
+    }
+
+    function pushLocalPause() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioPause", props.audiodata.audio_mp3])}
+    }
+
+    function pushLocalEnd() {
+        if(typeof window !== "undefined") {push(["trackEvent", "MediaStats", "AudioEnd", props.audiodata.audio_mp3])}
+    }
+
     return (<Layout 
                 pagedata={props.pagedata} 
                 sections={props.sections} 
@@ -54,9 +68,9 @@ const Episode = ( props ) => {
             <h1>{props.episode.data[0].attributes.Title}</h1>
             <AudioPlayer
                 src={props.audiodata.audio_mp3.url}
-                onPlay={e => gtag.event({action: "play", category:"audio", label: "audio started", value: props.audiodata.audio_mp3})}
-                onPause={e => gtag.event({action: "pause", category:"audio", label: "audio paused", value: props.audiodata.audio_mp3})}
-                onEnded={e => gtag.event({action: "end", category:"audio", label: "audio ended", value: props.audiodata.audio_mp3})}
+                onPlay={pushLocalStart}
+                onPause={pushLocalPause}
+                onEnded={pushLocalEnd}
                 />
             <div className="article_body" dangerouslySetInnerHTML={{ __html: props.episode.data[0].attributes.Description}} />
             <h3>Transcript</h3>