Add Google Ads Conversion tracking

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
  });`}
  </Script>
  {/* End GTag */}
@@ -163,6 +193,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" />
 
  {NEXT_PUBLIC_REDDIT_ID && (
  <>
@@ -180,14 +222,31 @@ 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
+ GoogleAdsEvent("30sView");
+ sendEngagedView();
+ }, [isEngaged]);
 
+ const Pageviews = () => {
+ // Trigger page views here
+ // Google Ads Docs Page Conversion event
+ GoogleAdsEvent("DocsPageView");
+ // 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,47 @@
+export const isGtagEnabled = () => {
+ return typeof window !== "undefined" && !!window.dataLayer;
+};
+type ConversionLabel = "DocsPageView" | "30sView";
+export const GoogleAdsEvent = (
+ conversion_label: ConversionLabel,
+ payload: Record<string, unknown> = {}
+): Promise<void> => {
+ return new Promise<void>((resolve) => {
+ if (isGtagEnabled()) {
+ const getLabel = (label: ConversionLabel) => {
+ switch (label) {
+ case "DocsPageView":
+ return "bhkmCKaO5_AYEN2k6cID";
+ case "30sView":
+ return "Dt85CKqO7vAYEN2k6cID";
+ }
+ };
+ // Define that we're sending a Google Ads conversion event
+ // https://developers.google.com/tag-platform/devguides/events#google_ads_conversions
+ // the gtag() function in the docs effectively just calls window.dataLayer.push()
+ window.gtag("event", "conversion", {
+ // send_to: Defines the type of conversion we're sending
+ send_to: `${process.env["NEXT_PUBLIC_GOOGLE_ADS_ID"]}/${getLabel(
+ conversion_label
+ )}`,
+ // Payload: rest of the values for the conversion
+ ...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("Google Ads Tracking Event", payload);
+ resolve();
+ }
+ });
+};