🎨 update gmt to lib and conditionally render only if prod #3851 (#3852)

* 🎨 update gmt to lib and conditionally render only if prod

* 🎨 clean up

* 🎨 update video analytics

Author: BorghildSelle

web/app/[locale]/GTMHead.tsx

@@ -1,5 +1,5 @@
 import '../globals.css'
-import dynamic from 'next/dynamic'
+import { GoogleTagManager } from '@next/third-parties/google'
 import localFont from 'next/font/local'
 import { draftMode } from 'next/headers'
 import NextLink from 'next/link'
@@ -15,7 +15,6 @@ import { footerAndErrorImageQuery } from '@/sanity/queries/footer'
 import Footer from '@/sections/Footer/Footer'
 import GoToTopButton from '@/sections/GoToTopButton'
 import { routing } from '../../i18n/routing'
-import { GoogleTagManagerHead } from './GTMHead'
 import { SiteImprove } from './SiteImprove'
 
 const equinor = localFont({
@@ -26,10 +25,6 @@ const equinor = localFont({
   ],
 })
 
-const DraftModeToolbar = dynamic(
-  () => import('@/sections/DraftMode/DraftModeToolbar'),
-)
-
 type Params = Promise<{ locale: string }>
 
 /* export const metadata: Metadata = {
@@ -97,17 +92,24 @@ export default async function LocaleLayout({
       </body>
       {/** TODO look into scripts */}
       {!(isPreview || dataset === 'global-development') && (
-        <Script
-          src='https://consent.cookiebot.com/uc.js'
-          id='Cookiebot'
-          strategy='beforeInteractive'
-          data-cbid='f1327b03-7951-45da-a2fd-9181babc783f'
-          data-blockingmode='auto'
-          data-culture={locale === 'nb-NO' ? 'nb' : getLocaleFromIso(locale)}
-        />
+        <>
+          <Script
+            src='https://consent.cookiebot.com/uc.js'
+            id='Cookiebot'
+            strategy='beforeInteractive'
+            data-cbid='f1327b03-7951-45da-a2fd-9181babc783f'
+            data-blockingmode='auto'
+            data-culture={locale === 'nb-NO' ? 'nb' : getLocaleFromIso(locale)}
+          />
+          {process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID && (
+            //https://nextjs.org/docs/app/guides/third-party-libraries#google-third-parties
+            <GoogleTagManager
+              gtmId={process.env.NEXT_PUBLIC_GOOGLE_TAG_MANAGER_ID}
+            />
+          )}
+          <SiteImprove />
+        </>
       )}
-      <GoogleTagManagerHead />
-      <SiteImprove />
     </html>
   )
 }

web/app/[locale]/NavigationEvents.tsx

@@ -1,15 +1,19 @@
 'use client'
+import { sendGTMEvent } from '@next/third-parties/google'
+import { useCallback, useEffect, useState } from 'react'
+import type Player from 'video.js/dist/types/player'
 import useConsent from '../../lib/hooks/useConsent'
-import { pushToDataLayer } from '../../lib/gtm'
-import { useEffect, useCallback, useState } from 'react'
-import Player from 'video.js/dist/types/player'
 
 const GTM_PLAY_EVENT = 'video_play'
 const GTM_PAUSE_EVENT = 'video_pause'
 const GTM_COMPLETION_EVENT = 'video_completion'
 const GTM_PROGRESS_MILESTONES = [25, 50, 75, 90] // Percentages
 
-type EventType = typeof GTM_PLAY_EVENT | typeof GTM_PAUSE_EVENT | typeof GTM_COMPLETION_EVENT | string
+type EventType =
+  | typeof GTM_PLAY_EVENT
+  | typeof GTM_PAUSE_EVENT
+  | typeof GTM_COMPLETION_EVENT
+  | string
 
 type EventData = {
   eventType: EventType
@@ -20,7 +24,12 @@ type EventData = {
 }
 
 // Video Analytics Hook
-const useVideojsAnalytics = (player: Player | null, src: string, title?: string, autoPlay?: boolean): void => {
+const useVideojsAnalytics = (
+  player: Player | null,
+  src: string,
+  title?: string,
+  autoPlay?: boolean,
+): void => {
   const allowAnalytics = useConsent(['statistics']) || false
 
   const pushEventToDataLayer = useCallback(
@@ -33,7 +42,7 @@ const useVideojsAnalytics = (player: Player | null, src: string, title?: string,
           currentTime: player.currentTime() || 0,
           src,
         }
-        pushToDataLayer('video_event', eventData)
+        sendGTMEvent({ event: 'video_event', ...eventData })
       }
     },
     [title, src, autoPlay],
@@ -120,10 +129,10 @@ const useVideoProgressEvent = (
       const currentTime = player.currentTime()
       if (currentTime && duration) {
         const progress = (currentTime / duration) * 100
-        GTM_PROGRESS_MILESTONES.forEach((milestone) => {
+        GTM_PROGRESS_MILESTONES.forEach(milestone => {
           if (progress >= milestone && !trackedMilestones.includes(milestone)) {
             pushEvent(`video_progress_${milestone}`, player)
-            setTrackedMilestones((prev) => [...prev, milestone])
+            setTrackedMilestones(prev => [...prev, milestone])
           }
         })
       }

web/app/[locale]/layout.tsx

@@ -32,6 +32,7 @@
     "@friendlycaptcha/sdk": "^0.2.0",
     "@hookform/resolvers": "^5.2.2",
     "@next/bundle-analyzer": "^16.2.2",
+    "@next/third-parties": "16.2.12",
     "@portabletext/react": "^6.0.3",
     "@portabletext/to-html": "^5.0.2",
     "@radix-ui/react-accordion": "^1.2.12",