- include posthog script tag in the html (process.env.POSTHOG_API_KEY… (#376)

alexfarrill · web-flow · commit 79c52cd51b6b · 2022-12-01T01:21:16.000Z
* - include posthog script tag in the html (process.env.POSTHOG_API_KEY is applied via sed during release)
- only include script tag in head of NODE_ENV is production
- When you call posthog.init the PostHog JS library begins automatically capturing user events:
  - pageviews, including the URL
  - autocaptured events, such as any click, change of input, or submission associated with a, button, form, input, select, textarea, and label tags

* try importing POSTHOG_API_KEY from bundle (cli/src/util/postHog/client)

* ensure log is not used on the front end

* rename log -&gt; serverLogger

* more serverLogger

* rename log -&gt; serverLogger

* more serverLogger

* ohyeah

* skip this test for now

* fix this test

* fix this test

* d'oh ''
diff --git a/packages/cli/src/components/PosthogScript.tsx b/packages/cli/src/components/PosthogScript.tsx
@@ -0,0 +1,20 @@
+import { POSTHOG_API_KEY } from "../util/postHog/client";
+
+export default function PosthogScript() {
+  if (process.env.NODE_ENV !== "production") {
+    return null;
+  }
+
+  const loadPosthogScript = `!function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.async=!0,p.src=s.api_host+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags".split(" "),n=0;n<o.length;n++)g(u,o[n]);e._i.push([i,s,a])},e.__SV=1)}(document,window.posthog||[]);`;
+
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+              ${loadPosthogScript}
+              posthog.init('${POSTHOG_API_KEY}', {api_host: 'https://app.posthog.com'})
+              `,
+      }}
+    ></script>
+  );
+}
diff --git a/packages/cli/src/pages/_app.tsx b/packages/cli/src/pages/_app.tsx
@@ -4,6 +4,7 @@ import Head from "next/head";
 import { HamburgerProvider } from "../components/HamburgerContext";
 import NavBar from "../components/NavBar/NavBar";
 import "../styles/globals.css";
+import PosthogScript from "../components/PosthogScript";
 
 export default function Mailing({
   Component,
@@ -12,6 +13,7 @@ export default function Mailing({
   return (
     <HamburgerProvider>
       <Head>
+        <PosthogScript />
         <title>Mailing</title>
       </Head>
       {pageProps.user ? (
diff --git a/packages/cli/src/util/postHog/client.ts b/packages/cli/src/util/postHog/client.ts
@@ -1,7 +1,6 @@
 import { PostHog } from "posthog-node";
-import { debug } from "../serverLogger";
 
-const POSTHOG_API_KEY = process.env.POSTHOG_API_KEY;
+export const POSTHOG_API_KEY = process.env.POSTHOG_API_KEY;
 
 let client: PostHog | undefined;
 
@@ -10,7 +9,7 @@ export function postHogClient(): PostHog | undefined {
     return;
 
   if (undefined === POSTHOG_API_KEY) {
-    debug("POSTHOG_API_KEY is undefined");
+    console.error("POSTHOG_API_KEY is undefined");
     return;
   }
 
