\n \n \n\n\n\n","label",[193,194,66],"src","frontend","pulls","branches",1,"forks","envVars",{"_203":26,"_205":26},"connections",{"_203":26,"_204":26},"count","unfilledCount","emptyCount",{"_35":308,"_13":193,"_64":247,"_45":-5,"_37":38,"_185":309,"_186":107,"_39":310,"_41":26,"_67":277,"_189":-5,"_68":24,"_191":-5,"_225":311,"_17":312},{"_35":303,"_13":294,"_64":288,"_45":247,"_37":38,"_185":304,"_186":107,"_39":305,"_41":26,"_67":277,"_189":-5,"_68":24,"_191":-5,"_225":306,"_17":307},{"_35":295,"_13":296,"_64":105,"_45":288,"_37":38,"_185":110,"_186":107,"_39":297,"_41":188,"_67":298,"_189":299,"_68":24,"_191":300,"_225":301,"_17":302},{"_35":285,"_13":286,"_64":287,"_45":288,"_37":38,"_185":289,"_186":107,"_39":290,"_41":26,"_67":250,"_189":291,"_68":24,"_191":-5,"_225":292,"_17":293},{"_35":280,"_13":194,"_64":184,"_45":247,"_37":38,"_185":281,"_186":107,"_39":282,"_41":26,"_67":277,"_189":-5,"_68":24,"_191":-5,"_225":283,"_17":284},{"_35":274,"_13":273,"_64":268,"_45":184,"_37":38,"_185":275,"_186":107,"_39":276,"_41":26,"_67":277,"_189":-5,"_68":24,"_191":-5,"_225":278,"_17":279},{"_35":265,"_13":266,"_64":267,"_45":268,"_37":38,"_185":131,"_186":107,"_39":269,"_41":197,"_67":250,"_189":270,"_68":24,"_191":-5,"_225":271,"_17":272},{"_35":183,"_13":66,"_64":65,"_45":184,"_37":38,"_185":89,"_186":107,"_39":262,"_41":188,"_67":21,"_189":190,"_68":24,"_191":-5,"_225":263,"_17":264},{"_35":254,"_13":255,"_64":256,"_45":184,"_37":38,"_185":257,"_186":107,"_39":258,"_41":26,"_67":250,"_189":259,"_68":24,"_191":-5,"_225":260,"_17":261},{"_35":244,"_13":245,"_64":246,"_45":247,"_37":38,"_185":248,"_186":107,"_39":249,"_41":26,"_67":250,"_189":251,"_68":24,"_191":-5,"_225":252,"_17":253},{"_35":236,"_13":237,"_64":238,"_45":-5,"_37":38,"_185":239,"_186":107,"_39":240,"_41":26,"_67":21,"_189":241,"_68":24,"_191":-5,"_225":242,"_17":243},{"_35":228,"_13":229,"_64":230,"_45":-5,"_37":38,"_185":231,"_186":107,"_39":232,"_41":188,"_67":21,"_189":233,"_68":24,"_191":-5,"_225":234,"_17":235},{"_35":219,"_13":220,"_64":221,"_45":-5,"_37":38,"_185":222,"_186":107,"_39":223,"_41":197,"_67":21,"_189":224,"_68":24,"_191":-5,"_225":226,"_17":227},"24d6cfb2-1715-11f0-a058-569c3dd06744","deno.json","cf942352-16ff-11f0-bf17-569c3dd06744",19,["D",1744404002777],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}\n","children",[],[220],"24cd85ec-1715-11f0-9bcb-569c3dd06744","README.md","8c827a0c-50c9-40ca-9bd9-81ca4d42e47e",17,["D",1744404002757],"# Simple Pixel Tracker\n\nA minimalist pixel tracking application for email open tracking. Create tracking\npixels that can be embedded in emails to monitor when they're opened.\n\n## Features\n\n- **One-Click Pixel Creation**: Generate tracking pixels instantly\n- **Status Page**: Each pixel has its own status page URL to monitor views\n- **PNG Tracking Pixel**: Use a transparent 1x1 PNG image for email tracking\n- **Track Email Opens**: See when your emails are opened and from where\n- **Simple Interface**: Clean, straightforward UI built with Tailwind CSS\n\n## How It Works\n\n1. Visit the homepage and create a new tracking pixel\n2. Copy the provided HTML code for the tracking pixel\n3. Paste it into your email content\n4. When someone opens your email, their visit will be recorded\n5. Check the status page URL to see when your email was opened\n\n## Technical Details\n\nThis application is built using:\n\n- **Frontend**: React with TypeScript and Tailwind CSS\n- **Backend**: Hono.js API server\n- **Storage**: Val Town blob storage\n\n## API Endpoints\n\n- `GET /pixeltracker/create` - Create a new tracking pixel\n- `GET /pixeltracker/status/:id` - View the status page for a specific pixel\n- `GET /pixeltracker/data/:id` - Get JSON data for a specific pixel\n- `GET /pixeltracker/pixel/:id.png` - The actual PNG tracking pixel that records\n views\n- `GET /pixeltracker/list` - List all tracking pixels (admin use)\n\n## Privacy Considerations\n\nThis tool collects visitor data including:\n\n- Timestamp of email opens\n- IP addresses\n- User agents (browser/email client information)\n- Referrer information\n\nMake sure to comply with privacy regulations like GDPR and include appropriate\ndisclosures in your privacy policy when using tracking pixels in emails.\n",[],[229],"cf8ee5cc-16ff-11f0-a30c-569c3dd06744",".vtignore","cf8ee6c6-16ff-11f0-a30c-569c3dd06744",6,["D",1744394840199],".git\n.DS_Store\nnode_modules\nvendor",[],[237],"57922b9a-171f-11f0-9ef4-569c3dd06744","types.d.ts","57922c6c-171f-11f0-9ef4-569c3dd06744","575b9b16-171f-11f0-8d73-569c3dd06744",30,["D",1744408382807],"script","export interface PixelData {\n id: string;\n created: string;\n trackingUrl?: string;\n statusUrl?: string;\n views: Array<{\n timestamp: string;\n ip: string;\n userAgent: string;\n referer: string;\n }>;\n}\n",[],[193,245],"5f29d880-171f-11f0-aaea-569c3dd06744","index.tsx","5f29d934-171f-11f0-aaea-569c3dd06744",35,["D",1744408395586],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n",[],[193,194,255],["D",1744408579644],[],[193,194,66],"10fe0284-1720-11f0-8053-569c3dd06744","App.tsx","5f26967a-171f-11f0-8e32-569c3dd06744","577762a6-171f-11f0-8d73-569c3dd06744",["D",1744408693984],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { FiLoader, FiRefreshCw } from \"https://esm.sh/react-icons@5.5.0/fi?deps=react@18.2.0\";\nimport { PixelData } from \"../../types.d.ts\";\n\nexport function App() {\n const [pixel, setPixel] = useState(null);\n const [loading, setLoading] = useState(false);\n const [refreshing, setRefreshing] = useState(false);\n const [copySuccess, setCopySuccess] = useState(\"\");\n const [copyType, setCopyType] = useState(\"\");\n\n // Check if we're on a status page or create a new pixel\n useEffect(() => {\n const path = globalThis.location.pathname;\n const match = path.match(/\\/pixeltracker\\/status\\/([^\\/]+)/);\n\n if (match && match[1]) {\n fetchPixelDetails(match[1]);\n\n // Set up auto-refresh\n const interval = setInterval(() => {\n refreshPixelData(match[1]);\n }, 5000);\n\n return () => clearInterval(interval);\n } else {\n createNewPixel();\n }\n }, []);\n\n const refreshPixelData = async (id: string) => {\n setRefreshing(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n if (response.ok) {\n const data = await response.json();\n setPixel(data);\n }\n } catch (error) {\n console.error(\"Error refreshing pixel data:\", error);\n } finally {\n setRefreshing(false);\n }\n };\n\n const createNewPixel = async () => {\n setLoading(true);\n try {\n const response = await fetch(\"/pixeltracker/create\");\n const data = await response.json();\n await fetchPixelDetails(data.id);\n } catch (error) {\n console.error(\"Error creating pixel:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const fetchPixelDetails = async (id: string) => {\n setLoading(true);\n try {\n const response = await fetch(`/pixeltracker/data/${id}`);\n const data = await response.json();\n setPixel(data);\n } catch (error) {\n console.error(\"Error fetching pixel details:\", error);\n } finally {\n setLoading(false);\n }\n };\n\n const copyToClipboard = (text: string, type: string) => {\n navigator.clipboard.writeText(text)\n .then(() => {\n setCopySuccess(\"Copied!\");\n setCopyType(type);\n setTimeout(() => {\n setCopySuccess(\"\");\n setCopyType(\"\");\n }, 2000);\n })\n .catch(() => {\n setCopySuccess(\"Failed to copy\");\n setCopyType(type);\n });\n };\n\n const formatDate = (dateString: string) => {\n return new Date(dateString).toLocaleString();\n };\n\n if (loading && !pixel) {\n return (\n

\n Simple Pixel Tracker\n

\n \n

Creating your tracking pixel...

\n );\n }\n\n return (\n

\n Simple Pixel Tracker\n

\n\n {pixel && (\n

Your Tracking Pixel

\n {refreshing\n ? \n : (\n refreshPixelData(pixel.id)}\n className=\"text-blue-500 hover:text-blue-700\"\n title=\"Refresh data\"\n >\n \n \n )}\n

\n ID: {pixel.id}\n

\n Created:{\" \"}\n {formatDate(pixel.created)}\n

\n Total Views:{\" \"}\n {pixel.views.length}\n

\n\n

Status Page URL

\n Share this URL to check the status of your tracking pixel:\n

\n \n copyToClipboard(pixel.statusUrl, \"status\")}\n className=\"bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-r-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition duration-200\"\n >\n Copy\n \n

\n {copySuccess && copyType === \"status\" && (\n

{copySuccess}

\n )}\n

\n\n

Tracking Pixel

\n Copy this HTML tag to include in your email:\n

\n {copySuccess && copyType === \"html\" && (\n

{copySuccess}

\n )}\n

\n\n

View History

\n {pixel.views.length === 0\n ? (\n

\n No views yet. When someone opens your email, their visit will\n appear here.\n

\n )\n : (\n

\n \n \n \n \n \n \n \n \n {pixel.views.map((view, index) => (\n \n \n \n \n ))}\n \n

\n Time\n	\n Referrer\n
\n {formatDate(view.timestamp)}\n	\n {view.referer}\n

\n )}\n

\n\n

\n \n {loading ? \"Creating...\" : \"Create Another Pixel\"}\n \n

\n )}\n

\n );\n}\n",[],[193,194,273,266],"components","577761a2-171f-11f0-8d73-569c3dd06744",26,["D",1744408382728],"directory",[212],[193,194,273],"5764cd76-171f-11f0-8e32-569c3dd06744",24,["D",1744408382607],[211,213,214],[193,194],"578dea80-171f-11f0-8cf9-569c3dd06744","pngs.ts","578deb48-171f-11f0-8cf9-569c3dd06744","576e099a-171f-11f0-8d73-569c3dd06744",29,["D",1744408382806],"// 1x1 transparent PNG\nexport const transparentPng = new Uint8Array([\n 0x89,\n 0x50,\n 0x4E,\n 0x47,\n 0x0D,\n 0x0A,\n 0x1A,\n 0x0A,\n 0x00,\n 0x00,\n 0x00,\n 0x0D,\n 0x49,\n 0x48,\n 0x44,\n 0x52,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x00,\n 0x00,\n 0x00,\n 0x01,\n 0x08,\n 0x06,\n 0x00,\n 0x00,\n 0x00,\n 0x1F,\n 0x15,\n 0xC4,\n 0x89,\n 0x00,\n 0x00,\n 0x00,\n 0x0B,\n 0x49,\n 0x44,\n 0x41,\n 0x54,\n 0x08,\n 0xD7,\n 0x63,\n 0x60,\n 0x00,\n 0x02,\n 0x00,\n 0x00,\n 0x05,\n 0x00,\n 0x01,\n 0xE2,\n 0x26,\n 0x05,\n 0x9B,\n 0x00,\n 0x00,\n 0x00,\n 0x00,\n 0x49,\n 0x45,\n 0x4E,\n 0x44,\n 0xAE,\n 0x42,\n 0x60,\n 0x82,\n]);\n",[],[193,294,286],"backend","e546cb6c-171f-11f0-a6fa-569c3dd06744","index.ts",["D",1744408620634],"http","import { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { blob } from \"https://esm.town/v/std/blob?v=13\";\nimport { nanoid } from \"npm:nanoid\";\nimport { transparentPng } from \"./pngs.ts\";\nimport type { PixelData } from \"../types.d.ts\";\n\nconst app = new Hono();\n\n// Helper function to get pixel data\nconst getPixelData = async (id: string): Promise => {\n try {\n const data = await blob.getJSON(`pixeltracker/pixel_${id}`);\n return data as PixelData;\n } catch (_error) {\n const newData: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n await blob.setJSON(`pixeltracker/pixel_${id}`, newData);\n return newData;\n }\n};\n\n// Serve index.html at the root /\napp.get(\"/\", async (c) => {\n return serveFile(\"/src/frontend/index.html\", import.meta.url);\n});\n\n// Serve all /frontend files\napp.get(\"/src/frontend/**/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Create new tracking pixel\napp.get(\"/pixeltracker/create\", async (c) => {\n const id = nanoid(10);\n const newPixel: PixelData = {\n id,\n created: new Date().toISOString(),\n views: [],\n };\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, newPixel);\n\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n id,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n});\n\n// Status page for a pixel\napp.get(\"/pixeltracker/status/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n await getPixelData(id);\n return serveFile(\"/src/frontend/index.html\", import.meta.url);\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Get JSON data for a pixel\napp.get(\"/pixeltracker/data/:id\", async (c) => {\n const id = c.req.param(\"id\");\n try {\n const data = await getPixelData(id);\n const baseUrl = new URL(c.req.url).origin;\n return c.json({\n ...data,\n statusUrl: `${baseUrl}/pixeltracker/status/${id}`,\n trackingUrl: `${baseUrl}/pixeltracker/pixel/${id}.png`,\n });\n } catch (_e) {\n return c.json({ error: \"Pixel not found\" }, 404);\n }\n});\n\n// Tracking pixel endpoint\napp.get(\"/pixeltracker/pixel/:id.png\", async (c) => {\n const id = c.req.param(\"id\");\n\n try {\n const data = await getPixelData(id);\n\n data.views.push({\n timestamp: new Date().toISOString(),\n ip: c.req.header(\"x-forwarded-for\") || \"unknown\",\n userAgent: c.req.header(\"user-agent\") || \"unknown\",\n referer: c.req.header(\"referer\") || \"unknown\",\n });\n\n await blob.setJSON(`pixeltracker/pixel_${id}`, data);\n } catch (e) {\n console.error(`Error tracking pixel ${id}:`, e);\n }\n\n return new Response(transparentPng, {\n headers: {\n \"Content-Type\": \"image/png\",\n \"Access-Control-Allow-Origin\": \"*\",\n \"Cache-Control\": \"no-store, no-cache, must-revalidate, proxy-revalidate\",\n \"Pragma\": \"no-cache\",\n \"Expires\": \"0\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err, _c) => {\n throw err;\n});\n\nexport default app.fetch;\n","tracker",[],[193,294,296],"576e0896-171f-11f0-8d73-569c3dd06744",25,["D",1744408382667],[208,209],[193,294],"575b9a1c-171f-11f0-8d73-569c3dd06744",23,["D",1744408382545],[207,210,215],[193],["D",1744394617429],{"_11":12,"_147":71},{"_11":12,"_143":-5,"_70":71,"_30":69,"_144":145,"_146":24},{"_41":131,"_13":16,"_35":38,"_132":95,"_133":134,"_135":82,"_136":100,"_137":138,"_139":140,"_141":14,"_142":12},"ctx",{"_54":-5,"_168":350,"_351":352,"_353":354,"_355":24,"_356":24,"_357":24,"_358":107,"_359":-5,"_360":-7,"_361":-7,"_362":26,"_363":24,"_364":24,"_365":-5,"_366":24,"_367":24,"_368":24,"_369":-5},"ENV",{"_321":322,"_323":324,"_325":16,"_326":327,"_328":329,"_330":331,"_332":333,"_334":335,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · index.html