diff --git a/pages/_app.tsx b/pages/_app.tsx index 2bf0bbb491..8eca8ee51b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,9 +1,9 @@ -import { useEffect } from "react"; +import { useEffect, useState } from "react"; import { useRouter } from "next/router"; import Script from "next/script"; import type { AppProps } from "next/app"; import { DocsContextProvider } from "layouts/DocsPage/context"; -import { posthog, sendPageview } from "utils/posthog"; +import { posthog, sendEngagedView, sendPageview } from "utils/posthog"; import { TabContextProvider } from "components/Tabs"; // https://larsmagnus.co/blog/how-to-optimize-custom-fonts-with-next-font @@ -54,10 +54,12 @@ export const lato = localLato({ import "styles/varaibles.css"; import "styles/global.css"; +import { GoogleAdsEvent } from "utils/tracking"; const NEXT_PUBLIC_REDDIT_ID = process.env.NEXT_PUBLIC_REDDIT_ID; const NEXT_PUBLIC_GTM_ID = process.env.NEXT_PUBLIC_GTM_ID; const NEXT_PUBLIC_GTAG_ID = process.env.NEXT_PUBLIC_GTAG_ID; +const NEXT_PUBLIC_GOOGLE_ADS_ID = process.env.NEXT_PUBLIC_GOOGLE_ADS_ID; const MUNCHKIN_ID = process.env.MUNCHKIN_ID; interface dataLayerItem { @@ -68,7 +70,32 @@ interface dataLayerItem { declare global { var dataLayer: dataLayerItem[]; // eslint-disable-line no-var } +const useIsEngaged = () => { + const router = useRouter(); + const [timerReached, setTimerReached] = useState(false); + const [secondPageReached, setSecondPageReached] = useState(false); + const [isEngaged, setIsEngaged] = useState(false); + + useEffect(() => { + setTimeout(() => { + setTimerReached(true); + }, 30000); + const routeChanged = () => { + setSecondPageReached(true); + }; + + router.events.on("routeChangeComplete", routeChanged); + return () => { + router.events.off("routeChangeComplete", routeChanged); + }; + }, [router.events]); + + useEffect(() => { + setIsEngaged(secondPageReached && timerReached); + }, [secondPageReached, timerReached]); + return isEngaged; +}; const Analytics = () => { return ( <> @@ -152,6 +179,9 @@ const Analytics = () => { gtag('js', new Date()); gtag('config', "${NEXT_PUBLIC_GTAG_ID}", { send_page_view: false + }); + gtag('config', "${NEXT_PUBLIC_GOOGLE_ADS_ID}", { + send_page_view: false });`} {/* End GTag */} @@ -163,6 +193,18 @@ const Analytics = () => { {/* End Google Tag Manager (noscript) */} )} + {/* Quailified Script */} + +