ایجاد یک سیستم ردیابی ایمیل باز برای جیمیل شما

در چشم انداز ایمیل امروزی، پلتفرم های بازاریابی معمولاً ردیابی «باز» یا «خوانده» را به طور پیش فرض بسته بندی می کنند. اما اگر بخواهید چه می شود شخصی سیستم پیکسل ردیابی – سیستمی که در آن می‌توانید گزارش‌های باز برای ایمیل‌های خاصی را که از آن ارسال می‌کنید مشاهده کنید جیمیل?

پیوند GitHub: ردیاب نامه

خودت رول کن Node.js + Express + EJS + SQLite برنامه:

1. 1×1 پیکسل تولید می کند مرتبط با شناسه های منحصر به فرد،
2. رویدادها را باز می کند (تاریخ/زمان، IP، عامل کاربر)،
3. یک فایل png واقعی را ارائه می دهد بنابراین Gmail/ سایر مشتریان یک تصویر استاندارد را می بینند.

یک داشبورد سبک وزن دریافت خواهید کرد که نشان می دهد کدام پیکسل ها ایجاد شده اند، به علاوه گزارش رویدادهای باز. در حالی که این 100٪ بی خطا نخواهد بود (به دلیل مسدود شدن تصویر یا پروکسی هایی مانند GoogleImageProxy)، این یک روش سرگرم کننده و آموزشی برای مشاهده ردیابی باز اولیه در عمل برای ایمیل های شخصی شما است.

1. پیش نیازها

• Node.js به صورت محلی نصب شده است.
• مقداری آشنایی با اکسپرس (برای مسیریابی).
• تمایل به سرهم بندی کردن EJS (موتور قالب) و SQLite برای ذخیره سازی داده ها

نکته: اگر می خواهید افراد دیگر (گیرندگان خارجی) پیکسل شما، سرور شما را باز کنند باید برای دنیای بیرون قابل دسترسی باشد. میزبانی بر روی پلتفرمی مانند رندر کنید، هروکو، یا استفاده از سرویس تونل (مثلاً ngrok یا تونل محلی) می تواند کمک کند.

2. مفاهیم اصلی

2.1. ردیابی پیکسل

“پیکسل ردیابی” فقط یک تصویر پنهان در ایمیل شما است. اگر مشتری گیرنده تصاویر را بارگیری کند، سرور شما یک درخواست HTTP برای آن PNG 1×1 (یا GIF) می بیند.

2.2. ورود به سیستم باز می شود

وقتی کسی (یا برخی از پروکسی ها) واکشی می کند /tracker/.png، ضبط می کنید:

• مهر زمان (زمانی که واکشی شد)
• آدرس IP،
• عامل کاربر (ممکن است نشان دهد GoogleImageProxy برای Gmail، نشان می دهد که IP کاربر واقعی پوشانده شده است).

2.3. پروکسی های جیمیل و تصویر

تصاویر پراکسی Gmail مدرن (ارائه شده از ggpht.com یا مشابه). این یعنی:

• شما نمی بینید گیرنده آدرس IP واقعی
• جیمیل اغلب پیکسل را واکشی می کند یک بار و آن را کش می کند، بنابراین بازهای بعدی ممکن است به عنوان یک گزارش جدید ظاهر نشوند.

با وجود این محدودیت ها، هنوز هم می توانید ببینید اگر/وقتی تصویر برای اولین بار واکشی شد – اغلب نزدیک به زمانی که کاربر برای اولین بار ایمیل شما را باز کرد.

3. برنامه Node ساده ما

3.1. راه اندازی پروژه

یک پوشه ایجاد کنید (مثلاً mail-tracker) سپس:

cd mail-tracker
npm init -y
npm install express ejs sqlite3 uuid

شما در نهایت با یک package.json که به این وابستگی ها اشاره می کند. بعدی:

1. ایجاد کنید الف public/images پوشه با a 1×1 PNG شفاف نام برد pixel.png.
2. ایجاد کنید دو فایل EJS در یک views پوشه: index.ejs (داشبورد) و logs.ejs (نمایش سیاههها).

3.2. app.js (فایل سرور اصلی)

در زیر گزیده ای ساده شده است. آن:

• داده های پیکسل را در آن ذخیره می کند SQLite (mail-tracker.db).
• خدمت می کند فایل های استاتیک (بنابراین pixel.png اگر بخواهیم قابل بارگذاری است).
• دارای یک /tracker/:id.png مسیری که یک باز ثبت می کند و واقعی را باز می فرستد pixel.png.

const express = require('express');
const path = require('path');
const { v4: uuidv4 } = require('uuid');
const sqlite3 = require('sqlite3').verbose();

const app = express();
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: false }));

// Serve static files from /public
app.use(express.static(path.join(__dirname, 'public')));

// Initialize SQLite
const db = new sqlite3.Database(path.join(__dirname, 'mail-tracker.db'), (err) => {
  // Create tables if not existing
});

// Middleware to get baseUrl for EJS
app.use((req, res, next) => {
  const protocol = req.protocol;
  const host = req.get('host');
  res.locals.baseUrl = `${protocol}://${host}`;
  next();
});

// Dashboard: list all pixels
app.get('/', (req, res) => {
  // SELECT * FROM pixels ...
  res.render('index', { pixels });
});

// Create pixel
app.post('/create', (req, res) => {
  const pixelId = uuidv4();
  // Insert pixel into DB
  // redirect to "https://dev.to/"
});

// The tracker route
app.get('/tracker/:id.png', (req, res) => {
  // Check pixel ID, log open in DB
  // Serve the real 'pixel.png'
  res.sendFile(path.join(__dirname, 'public', 'images', 'pixel.png'));
});

// View logs
app.get('/logs/:id', (req, res) => {
  // SELECT logs from DB for that pixel
  res.render('logs', { pixel, logs });
});

// Start server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => console.log(`Listening on ${PORT}`));

3.3. index.ejs (داشبورد)

فرمی را برای ایجاد یک پیکسل جدید به اضافه جدولی نشان می دهد که پیکسل های موجود را فهرست می کند: