บันทึกการทำ Proxy Plausible และ Cloudflare Workers
เนื่องจากตอนนี้เว็บของผมใช้ Plausible ทั้งหมด ตั้งแต่เว็บ Static ทั่วๆไป ที่ใช้ Gatsby, Next.js หรือเว็บล่าสุด ที่ใช้ Ghost ก็เลยลองมาเขียนเป็นบันทึกเอาไว้
ซึ่งถ้าใช้ Next.js กับ Vercel เราสามารถทำ Proxy ได้ง่ายๆ ผ่าน Config ของ Vercel ได้เลย โดยไม่ต้องใช้ 3rd Party แต่พอเป็น Ghost เราไม่สามารถทำผ่าน Server ได้ วิธีการก็คือใช้ 3rd Party อย่าง Cloudare Workers มาช่วยงานตรงนี้
Cloudflare Workers
ตัว Cloudflare Workers คือ เป็นหนึ่งในบริการตัวนึงของ Cloudflare ที่ให้เราสามารถรันโค๊ดแบบ Serverless ได้ ตัว Workers ให้เราใช้งานได้ฟรี 100,000 รีเควส ต่อวัน ยังไงก็พอครับ ถ้าไม่โดนยิง 🤣
เข้าหน้า Dashboard ของ Cloudflare จากนั้นไปที่ Application เรา เลือก Workers -> Manage Workers
1. ทำการสร้าง Service ใหม่ ขึ้นมา "Create a Service"

2. จากนั้นเลือก Starter แบบ HTTP handler และกด Create Service

3. กด Quick Edit เพื่อทำการแก้ไข Script

แก้ Default Script เป็น script ของเรา
const ScriptName = '/js/script.js';
const Endpoint = '/api/event';
const ScriptWithoutExtension = ScriptName.replace('.js', '')
addEventListener('fetch', event => {
event.passThroughOnException();
event.respondWith(handleRequest(event));
})
async function handleRequest(event) {
const pathname = new URL(event.request.url).pathname
const [baseUri, ...extensions] = pathname.split('.')
if (baseUri.endsWith(ScriptWithoutExtension)) {
return getScript(event, extensions)
} else if (pathname.endsWith(Endpoint)) {
return postData(event)
}
return new Response(null, { status: 404 })
}
async function getScript(event, extensions) {
let response = await caches.default.match(event.request);
if (!response) {
response = await fetch("https://plausible.io/js/plausible." + extensions.join("."));
event.waitUntil(caches.default.put(event.request, response.clone()));
}
return response;
}
async function postData(event) {
const request = new Request(event.request);
request.headers.delete('cookie');
return await fetch("https://plausible.io/api/event", request);
}
กด Save and Deploy
Plausible Docs แนะนำว่า ให้เปลี่ยนชื่อตรง ScriptName
และ Endpoint
เป็น Folder ที่เราต้องการ โดยหลีกเลี่ยงชื่อพวก Plausible, Analytics, Tracking เป็นต้น Keywords พวกนั้นมีโอกาสที่จะโดน Blacklist จาก Client หรือ Extensions ต่างๆ ได้ง่าย
4. เช็คให้แน่ใจว่า Script ที่เรา Deploy ไป มันเข้าถึงได้มั้ย
https://your-worker-name.your-cloudflare-username.workers.dev/your-folder-name/script.js
5. ใส่ Script tag ลงไปในเว็บของเรา
ก่อนหน้านี้ถ้าเราไม่ใช้ Proxy เราก็จะแทรก Script ลงไปประมาณนี้
<script defer data-domain="mydomain.com" src="https://plausible.io/js/plausible.js"></script>
พอเป็น Proxy ด้วย Cloudflare Worker ก็จะเปลี่ยนเป็นแบบนี้แทน ตามที่เราตั้งไว้
<script defer data-domain="yourdomain.com" data-api="https://your-worker-name.your-cloudflare-username.workers.dev/your-folder-name/event" src="https://your-worker-name.your-cloudflare-username.workers.dev/your-folder-name/script.js"></script>
เป็นอันเรียบร้อย 🎉
ขอบคุณ Reference จาก Plausible เป็นหนึ่งใน Platform ที่เขียน Docs ไว้ค่อนข้างดี แทบไม่เจอปัญหาอะไรเลย
