From 4599bec033e9d962feee3fd02d85f5716e4a6f45 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Mon, 29 Apr 2024 15:24:04 +0300
Subject: [PATCH 1/5] feat: add isengaged hook

---
 pages/_app.tsx | 27 ++++++++++++++++++++++++++-
 1 file changed, 26 insertions(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 685a67aa3b..e6764a59ab 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -1,4 +1,4 @@
-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";
@@ -67,7 +67,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 (
     <>

From 0711d31e48b0f07425c12ebbc940eb31f750bb63 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Mon, 29 Apr 2024 15:27:06 +0300
Subject: [PATCH 2/5] chore: add posthog engagedview tracking

---
 pages/_app.tsx   | 18 ++++++++++++++----
 utils/posthog.ts |  8 ++++++++
 2 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index e6764a59ab..b68538bbac 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -3,7 +3,7 @@ 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
@@ -193,14 +193,24 @@ const Analytics = () => {
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
+  const isEngaged = useIsEngaged();
 
+  useEffect(() => {
+    if (!isEngaged) return;
+    // Trigger engagement view events here
+    sendEngagedView();
+  }, [isEngaged]);
+
+  const Pageviews = () => {
+    // Trigger page views here
+    sendPageview();
+  };
   useEffect(() => {
     posthog(); // init posthog
 
-    router.events.on("routeChangeComplete", sendPageview);
-
+    router.events.on("routeChangeComplete", Pageviews);
     return () => {
-      router.events.off("routeChangeComplete", sendPageview);
+      router.events.off("routeChangeComplete", Pageviews);
     };
   }, [router.events]);
 
diff --git a/utils/posthog.ts b/utils/posthog.ts
index f1108289d2..8d6cb7c85e 100644
--- a/utils/posthog.ts
+++ b/utils/posthog.ts
@@ -49,3 +49,11 @@ export const sendDocsFeedback = async (rating: string, comment: string) => {
     "web.docs.comment": comment,
   });
 };
+
+export const sendEngagedView = async () => {
+  const ph = await posthog();
+  ph?.capture("web.engagement.timer", {
+    "web.engagement.sessionTimerThreshold": 30,
+    "web.engagement.sessionPageThreshold": 2,
+  });
+};

From 5353babf556fe8e88f675fdc77ff8cfd5b89f2c0 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Mon, 29 Apr 2024 15:31:23 +0300
Subject: [PATCH 3/5] chore: add qualified script

---
 pages/_app.tsx | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index b68538bbac..830724a71f 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -187,6 +187,18 @@ const Analytics = () => {
           {/* End Google Tag Manager (noscript) */}
         </>
       )}
+      {/* Quailified Script */}
+      <Script id="script_qualified">
+        {`(function (w, q) {
+          w["QualifiedObject"] = q;
+          w[q] =
+            w[q] ||
+            function () {
+              (w[q].q = w[q].q || []).push(arguments);
+            };
+        })(window, "qualified")`}
+      </Script>
+      <Script src="https://js.qualified.com/qualified.js?token=GWPbwWJLtjykim4W" />
     </>
   );
 };

From ccf405b656fd7d78a101ba7f2da793ee7acbe935 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Mon, 29 Apr 2024 15:32:46 +0300
Subject: [PATCH 4/5] chore: add qualified page view

---
 pages/_app.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 830724a71f..4b9b9fc8ba 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -215,6 +215,10 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
 
   const Pageviews = () => {
     // Trigger page views here
+
+    // Qualified page view
+    if (!!window["qualified"]) window["qualified"]("page");
+    // Posthog page view
     sendPageview();
   };
   useEffect(() => {

From 8f273a40830e76fb6607b132933571190f372d48 Mon Sep 17 00:00:00 2001
From: TuukkaIkius <tuukka@ikius.com>
Date: Tue, 30 Apr 2024 13:07:04 +0300
Subject: [PATCH 5/5] chore: trigger initial load page views

---
 pages/_app.tsx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index 4b9b9fc8ba..2672831a36 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -223,7 +223,8 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
   };
   useEffect(() => {
     posthog(); // init posthog
-
+    // Trigger initial load page views
+    Pageviews();
     router.events.on("routeChangeComplete", Pageviews);
     return () => {
       router.events.off("routeChangeComplete", Pageviews);