บันทึกการทำ Proxy Plausible และ Cloudflare Workers

เนื่องจากตอนนี้เว็บของผมใช้ Plausible ทั้งหมด ตั้งแต่เว็บ Static ทั่วๆไป ที่ใช้ Gatsby, Next.js หรือเว็บล่าสุด ที่ใช้ Ghost ก็เลยลองมาเขียนเป็นบันทึกเอาไว้

Adblockers and using a proxy for analytics | Plausible docs

A frequently asked question we get is, “why do adblockers block Plausible?”. It’s assumed that by being privacy-first, we would not be placed in the same category as Google Analytics, Facebook Pixel, or other surveillance capitalism tools.

Plausible Analytics

ซึ่งถ้าใช้ Next.js กับ Vercel เราสามารถทำ Proxy ได้ง่ายๆ ผ่าน Config ของ Vercel ได้เลย โดยไม่ต้องใช้ 3rd Party แต่พอเป็น Ghost เราไม่สามารถทำผ่าน Server ได้ วิธีการก็คือใช้ 3rd Party อย่าง Cloudare Workers มาช่วยงานตรงนี้

Cloudflare Workers

Cloudflare Workers®

Build your next application with Cloudflare Workers

Workers logo

ตัว 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 ไว้ค่อนข้างดี แทบไม่เจอปัญหาอะไรเลย

Proxying Plausible through Cloudflare | Plausible docs

You can use Cloudflare Workers to proxy your Plausible Analytics requests. Cloudflare Workers offers free service for up to 100,000 requests per day.

Plausible Analytics