Add LinkedIn event tracking

pages/_app.tsx

@@ -1,11 +1,11 @@
-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";
-
+import { TrackingEvent } from "utils/tracking";
 // https://larsmagnus.co/blog/how-to-optimize-custom-fonts-with-next-font
 // Next Font to enable zero layout shift which is hurting SEO.
 import localUbuntu from "next/font/local";
@@ -68,7 +68,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 (
     <>
@@ -163,6 +188,45 @@ const Analytics = () => {
           {/* End Google Tag Manager (noscript) */}
         </>
       )}
+      {/* LinkedIn Tracking script */}
+      <Script id="linkedin_partnerid" type="text/javascript">
+        {`_linkedin_partner_id = "1271444";
+window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
+window._linkedin_data_partner_ids.push(_linkedin_partner_id);
+`}
+      </Script>
+      <Script id="linkedin_tracking" type="text/javascript">
+        {`(function(l) {
+if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
+window.lintrk.q=[]}
+var s = document.getElementsByTagName("script")[0];
+var b = document.createElement("script");
+b.type = "text/javascript";b.async = true;
+b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
+s.parentNode.insertBefore(b, s);})(window.lintrk);`}
+      </Script>
+      <noscript>
+        {/* eslint-disable-next-line @next/next/no-img-element*/}
+        <img
+          height="1"
+          width="1"
+          style={{ display: "none" }}
+          alt=""
+          src="https://px.ads.linkedin.com/collect/?pid=1271444&fmt=gif"
+        />
+      </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" />
 
       {NEXT_PUBLIC_REDDIT_ID && (
         <>
@@ -180,14 +244,32 @@ const Analytics = () => {
 
 const MyApp = ({ Component, pageProps }: AppProps) => {
   const router = useRouter();
+  const isEngaged = useIsEngaged();
 
   useEffect(() => {
-    posthog(); // init posthog
-
-    router.events.on("routeChangeComplete", sendPageview);
+    if (!isEngaged) return;
+    // Trigger engagement view events here
+    // Linked in engagement view
+    window["lintrk"]("track", { conversion_id: 14913124 });
+    sendEngagedView();
+  }, [isEngaged]);
 
+  const Pageviews = () => {
+    // Trigger page views here
+    // Linked In Docs Page Visit
+    window["lintrk"]("track", { conversion_id: 14913132 });
+    // Qualified page view
+    if (!!window["qualified"]) window["qualified"]("page");
+    // Posthog page view
+    sendPageview();
+  };
+  useEffect(() => {
+    posthog(); // init posthog
+    // Trigger initial load page views
+    Pageviews();
+    router.events.on("routeChangeComplete", Pageviews);
     return () => {
-      router.events.off("routeChangeComplete", sendPageview);
+      router.events.off("routeChangeComplete", Pageviews);
     };
   }, [router.events]);
 

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,
+  });
+};

utils/tracking.ts

@@ -0,0 +1,34 @@
+const isDatalayerEnabled = () => {
+  typeof window !== "undefined" && !!window.dataLayer;
+};
+
+// Wrapper around datalayer calls to prevent errors
+
+export const TrackingEvent = (
+  event: string,
+  payload: Record<string, unknown> = {}
+): Promise<void> => {
+  return new Promise<void>((resolve) => {
+    if (isDatalayerEnabled) {
+      window.dataLayer.push({
+        event,
+        ...payload,
+        /* eventCallback and eventTimeout are not found in GTM official docs!
+        eventCallback is a function which will execute when all tags which fire on
+        the event have executed; it is scoped to this promise. Always add eventTimeout
+        when you use eventCallback.
+        */
+        eventCallback: () => resolve(),
+
+        /*eventTimeout takes a number in milliseconds as a value after which it calls eventCallback, so
+        even if the tags don't fire or signal completion, eventCallback will be invoked (and
+        this promise resolved)
+        */
+        eventTimeout: 1000,
+      });
+    } else {
+      console.log("Datalayer Tracking Event", payload);
+      resolve();
+    }
+  });
+};