@hanzo/ui 0.5.16 → 0.5.19

package/next/analytics/fpixel.ts

@@ -0,0 +1,10 @@
+export const FB_PIXEL_ID = process.env.NEXT_PUBLIC_FACEBOOK_PIXEL_ID
+
+export const pageview = () => {
+  window.fbq('track', 'PageView')
+}
+
+// https://developers.facebook.com/docs/facebook-pixel/advanced/
+export const event = (name: string, options = {}) => {
+  window.fbq('track', name, options)
+}

package/next/analytics/google-analytics.tsx

@@ -0,0 +1,47 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import * as gtag from './gtag'
+import Script from 'next/script'
+import { usePathname } from 'next/navigation'
+
+const GoogleAnalyticsHead = () => {
+  return (
+    <script
+      dangerouslySetInnerHTML={{
+        __html: `
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+
+          gtag('config', '${gtag.GA_TRACKING_ID}', {
+            page_path: window.location.pathname,
+          });
+        `,
+      }}
+    />
+  )
+}
+
+const GoogleAnalytics = () => {
+  const [loaded, setLoaded] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!loaded) return
+
+    gtag.pageview(pathname)
+  }, [pathname, loaded])
+
+  return (
+    <div>
+      <Script
+        strategy='afterInteractive'
+        onLoad={() => setLoaded(true)}
+        src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
+      />
+    </div>
+  )
+}
+
+export {GoogleAnalyticsHead, GoogleAnalytics}

package/next/analytics/gtag.ts

@@ -0,0 +1,30 @@
+// specific to site.  In GA Console, under each Data Stream
+export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: string) => {
+  if (GA_TRACKING_ID) {
+    window.gtag('config', GA_TRACKING_ID, {
+      page_path: url,
+    })
+  }
+}
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/events
+export const event = ({ 
+  action, 
+  category, 
+  label, 
+  value 
+}: {
+  action: string 
+  category: string 
+  label: string 
+  value: string
+}) => {
+  window.gtag('event', action, {
+    event_category: category,
+    event_label: label,
+    value: value,
+  })
+}

package/next/analytics/pixel-analytics.tsx

@@ -0,0 +1,55 @@
+'use client'
+
+import { usePathname } from 'next/navigation'
+import Script from 'next/script'
+import { useEffect, useState } from 'react'
+import * as fbq from './fpixel'
+
+const FacebookPixelHead = () => {
+  return (
+    <noscript>
+      <img
+        height='1'
+        width='1'
+        style={{ display: 'none' }}
+        src={`https://www.facebook.com/tr?id=${fbq.FB_PIXEL_ID}&ev=PageView&noscript=1`}
+      />
+    </noscript>
+  )
+}
+
+const FacebookPixel = () => {
+  const [loaded, setLoaded] = useState(false)
+  const pathname = usePathname()
+
+  useEffect(() => {
+    if (!loaded) return
+
+    fbq.pageview()
+  }, [pathname, loaded])
+
+  return (
+    <div>
+       <Script
+        id='fb-pixel'
+        strategy='afterInteractive'
+        onLoad={() => setLoaded(true)}
+        dangerouslySetInnerHTML={{
+          __html: `
+            !function(f,b,e,v,n,t,s)
+            {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+            n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+            if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+            n.queue=[];t=b.createElement(e);t.async=!0;
+            t.src=v;s=b.getElementsByTagName(e)[0];
+            s.parentNode.insertBefore(t,s)}(window, document,'script',
+            'https://connect.facebook.net/en_US/fbevents.js');
+            fbq('init', ${fbq.FB_PIXEL_ID});
+          `,
+        }}
+      />
+    </div>
+  )
+}
+
+export {FacebookPixelHead, FacebookPixel}

package/next/root-layout.tsx

@@ -3,6 +3,8 @@ import React, { type PropsWithChildren } from 'react'
 import Header from '../common/header'
 import type { SiteDef } from '../types'
 import getAppRouterBodyFontClasses from './get-app-router-font-classes'
+import { FacebookPixelHead, FacebookPixel } from './analytics/pixel-analytics'
+import { GoogleAnalytics, GoogleAnalyticsHead } from './analytics/google-analytics'
 
 // Next 14: https://nextjs.org/docs/app/building-your-application/upgrading/codemods#use-viewport-export
 const viewport = {
@@ -39,8 +41,12 @@ const RootLayout: React.FC<PropsWithChildren & {
     <head >
       {/* https://stackoverflow.com/a/75716588/11645689 */ }
       <base target='_blank' />
+      <FacebookPixelHead/>
+      <GoogleAnalyticsHead/>
     </head>
     <body className={bodyClasses}>
+      <FacebookPixel />
+      <GoogleAnalytics />
       {header && <Header siteDef={siteDef}/>}
       {children}
     </body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hanzo/ui",
-  "version": "0.5.16",
+  "version": "0.5.19",
   "description": "Library that contains shared UI primitives, support for a common design system, and other boilerplate support.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
@@ -91,6 +91,8 @@
     "@mdx-js/esbuild": "^3.0.0",
     "@mdx-js/loader": "^3.0.0",
     "@mdx-js/react": "^3.0.0",
+    "@types/facebook-pixel": "^0.0.30",
+    "@types/gtag.js": "^0.0.19",
     "@types/lodash.merge": "^4.6.9",
     "@types/mdx": "^2.0.9",
     "@types/react": "^18.2.48",