Add Google Tag Manager component for enhanced analytics tracking; integrate it into the layout for improved data collection and user insights.

Author: mawburn

app/components/ConsentPanel.tsx

@@ -0,0 +1,126 @@
+import { useState, useEffect } from 'react'
+
+const EU_COUNTRIES = [
+  'AT',
+  'BE',
+  'BG',
+  'HR',
+  'CY',
+  'CZ',
+  'DK',
+  'EE',
+  'FI',
+  'FR',
+  'DE',
+  'GR',
+  'HU',
+  'IE',
+  'IT',
+  'LV',
+  'LT',
+  'LU',
+  'MT',
+  'NL',
+  'PL',
+  'PT',
+  'RO',
+  'SK',
+  'SI',
+  'ES',
+  'SE',
+]
+
+interface LocationResponse {
+  country: string
+}
+
+// Cookie helper functions
+function setCookie(name: string, value: string, days: number) {
+  const date = new Date()
+  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000)
+  const expires = `expires=${date.toUTCString()}`
+  document.cookie = `${name}=${value};${expires};path=/;SameSite=Lax`
+}
+
+function getCookie(name: string): string | null {
+  const nameEQ = `${name}=`
+  const ca = document.cookie.split(';')
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) === ' ') c = c.substring(1, c.length)
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
+  }
+  return null
+}
+
+export function ConsentPanel() {
+  const [showConsent, setShowConsent] = useState(false)
+
+  useEffect(() => {
+    // Check if user is from EU
+    const checkLocation = async () => {
+      try {
+        // In development, always show the consent panel
+        if (import.meta.env.DEV) {
+          const consent = getCookie('tracking-consent')
+          if (!consent) {
+            setShowConsent(true)
+          }
+          return
+        }
+
+        const response = await fetch('/api/location')
+        const data = (await response.json()) as LocationResponse
+        const isEU = EU_COUNTRIES.includes(data.country)
+        const consent = getCookie('tracking-consent')
+
+        if (isEU && !consent) {
+          setShowConsent(true)
+        }
+      } catch (error) {
+        console.error('Error checking location:', error)
+      }
+    }
+
+    checkLocation()
+  }, [])
+
+  const handleAccept = () => {
+    // Store consent for 1 year
+    setCookie('tracking-consent', 'accepted', 365)
+    setShowConsent(false)
+  }
+
+  const handleDecline = () => {
+    // Store consent for 1 year
+    setCookie('tracking-consent', 'declined', 365)
+    setShowConsent(false)
+  }
+
+  if (!showConsent) return null
+
+  return (
+    <div className="fixed bottom-0 left-0 right-0 bg-white dark:bg-gray-800 p-4 shadow-lg z-50">
+      <div className="container mx-auto max-w-4xl">
+        <p className="text-sm mb-4">
+          We use cookies and similar technologies to help personalize content and analyze traffic.
+          By clicking "Accept", you consent to our use of cookies and tracking technologies.
+        </p>
+        <div className="flex gap-4">
+          <button
+            onClick={handleAccept}
+            className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700"
+          >
+            Accept
+          </button>
+          <button
+            onClick={handleDecline}
+            className="px-4 py-2 bg-gray-200 dark:bg-gray-700 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
+          >
+            Decline
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

app/components/GoogleTagManager.tsx

@@ -0,0 +1,61 @@
+import { useEffect, useState } from 'react'
+
+declare global {
+  interface Window {
+    dataLayer: any[]
+    gtag: (...args: any[]) => void
+  }
+}
+
+const GTM_ID = 'G-FFMFRC59FL' as const
+
+// Cookie helper function
+function getCookie(name: string): string | null {
+  const nameEQ = `${name}=`
+  const ca = document.cookie.split(';')
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i]
+    while (c.charAt(0) === ' ') c = c.substring(1, c.length)
+    if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length)
+  }
+  return null
+}
+
+export function GoogleTagManager() {
+  const [hasConsent, setHasConsent] = useState(false)
+
+  useEffect(() => {
+    const consent = getCookie('tracking-consent')
+    if (consent === 'accepted') {
+      setHasConsent(true)
+    }
+  }, [])
+
+  useEffect(() => {
+    if (!hasConsent) return
+
+    // Initialize dataLayer
+    window.dataLayer = window.dataLayer || []
+    function gtag(...args: any[]) {
+      window.dataLayer.push(args)
+    }
+    window.gtag = gtag
+
+    // Load the GTM script
+    const script = document.createElement('script')
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${GTM_ID}`
+    script.async = true
+    document.head.appendChild(script)
+
+    // Initialize GTM
+    gtag('js', new Date())
+    gtag('config', GTM_ID)
+
+    // Cleanup function
+    return () => {
+      document.head.removeChild(script)
+    }
+  }, [hasConsent])
+
+  return null
+}

app/root.tsx

@@ -10,6 +10,8 @@ import {
 
 import type { Route } from './+types/root'
 import { Navigation } from './components/Navigation'
+import { GoogleTagManager } from './components/GoogleTagManager'
+import { ConsentPanel } from './components/ConsentPanel'
 import './app.css'
 
 export const links: Route.LinksFunction = () => []
@@ -92,6 +94,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
         <div className="pt-16">{children}</div>
         <ScrollRestoration />
         <Scripts />
+        <GoogleTagManager />
+        <ConsentPanel />
       </body>
     </html>
   )

app/routes.ts

@@ -10,4 +10,5 @@ export default [
     '.well-known/appspecific/com.chrome.devtools.json',
     'routes/[.well-known].appspecific[.]com.chrome.devtools.json.tsx'
   ),
+  route('api/location', 'routes/api.location.ts'),
 ] satisfies RouteConfig

app/routes/api.location.ts

@@ -0,0 +1,21 @@
+interface IpApiResponse {
+  country_code: string
+  [key: string]: any
+}
+
+export async function loader() {
+  try {
+    const response = await fetch('https://ipapi.co/json/')
+    const data = (await response.json()) as IpApiResponse
+
+    return new Response(JSON.stringify({ country: data.country_code }), {
+      headers: { 'Content-Type': 'application/json' },
+    })
+  } catch (error) {
+    console.error('Error fetching location:', error)
+    return new Response(JSON.stringify({ country: 'US' }), {
+      status: 500,
+      headers: { 'Content-Type': 'application/json' },
+    })
+  }
+}

app/routes/home.tsx

@@ -27,7 +27,9 @@ export function meta(_args: Route.MetaArgs) {
 }
 
 export function loader({ context }: Route.LoaderArgs) {
-  return { message: context.cloudflare.env.VALUE_FROM_CLOUDFLARE }
+  // Safely access the environment variable with a fallback
+  const message = context.cloudflare?.env?.VALUE_FROM_CLOUDFLARE ?? 'Welcome'
+  return { message }
 }
 
 export default function Home() {

content/blog/2025-06-06-mothership-shopify-summit.md

@@ -19,7 +19,7 @@ _**NOTE:** Spoilers for the [Mothership 1e](https://www.tuesdayknightgames.com/c
 
 The following game took place during our annual Shopify meetup in Toronto on May 29, 2025. Eight crew members in nine brains were involved, and I hereby certify the accounts of this mission are unclassified and accurate to the best of my knowledge.
 
-![SS Shopify Crew](/images/2025-06-06-mothership-shopify-summit.webp)
+![SS Shopify Crew](/images/2025-06-06-mothership-shopify-summit-small.webp)
 
 ## The Mission
 

package.json

@@ -19,6 +19,7 @@
     "test:ci": "vitest run"
   },
   "dependencies": {
+    "@remix-run/cloudflare": "^2.16.8",
     "@types/three": "^0.175.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",