Fix events not being pushed after page route #2316

web/lib/hooks/useConsent.ts

@@ -0,0 +1,32 @@
+import { useRouter } from 'next/router'
+import { useEffect, useState } from 'react'
+import { ConsentType } from './useConsentState'
+
+const getConsentState = (consentType: ConsentType): boolean => {
+  // Prevents SSR issues
+  if (typeof window !== 'undefined') {
+    switch (consentType) {
+      case 'statistics':
+        return window.Cookiebot.consent.statistics
+      case 'marketing':
+        return window.Cookiebot.consent.marketing
+      default:
+        return false
+    }
+  }
+  return false
+}
+
+/**
+ * Returns true if the consent is given for the given consentType.
+ * @param consentType Can be either marketing or statistics
+ * @returns
+ */
+export default function useConsent(consentType: ConsentType): boolean | undefined {
+  const [consent, setConsent] = useState<boolean>(getConsentState(consentType))
+  const router = useRouter()
+  useEffect(() => {
+    setConsent(getConsentState(consentType))
+  }, [consentType, router.asPath])
+  return consent
+}

web/lib/hooks/useVideojsAnalytics.ts

@@ -1,4 +1,4 @@
-import useConsentState from './useConsentState'
+import useConsent from './useConsent'
 import { pushToDataLayer } from '../../lib/gtm'
 import { useEffect, useCallback, useState } from 'react'
 import Player from 'video.js/dist/types/player'
@@ -20,13 +20,7 @@ type EventData = {
 
 // Video Analytics Hook
 const useVideojsAnalytics = (player: Player | null, src: string, title?: string, autoPlay?: boolean): void => {
-  const [allowAnalytics, setAllowAnalytics] = useState(false)
-
-  useConsentState(
-    'statistics',
-    () => setAllowAnalytics(true),
-    () => setAllowAnalytics(false),
-  )
+  const allowAnalytics = useConsent('statistics') || false
 
   const pushEventToDataLayer = useCallback(
     (eventType: EventType, player: Player) => {
@@ -121,7 +115,7 @@ const useVideoProgressEvent = (
     if (!player) return
     const intervalId = setInterval(() => {
       const duration = player.duration()
-      if ((!allowAnalytics || !duration) && !player) return
+      if (!(allowAnalytics || duration || player)) return
       const currentTime = player.currentTime()
       if (currentTime && duration) {
         const progress = (currentTime / duration) * 100