วิธีการติดตั้ง Umami ใน Astro

วิธีการติดตั้ง Umami ลงบนเว็บไซต์ที่เขียนด้วย Astro จริงๆ การติดตั้งก็ง่ายมาก คือแค่เพิ่ม tracking code ลงไปในเว็บไซต์ แต่ในตัว Astro จะมีปัญหานิดหน่อย ถ้าเราใช้ View Transition หรือปัญหาฝั่ง client ก็คือกรณีที่ Browser บล็อคการเข้าถึง script หรือโดน adblock บล็อคนั่นเอง
การติดตั้ง Umami
วิธีการติดตั้งก็เข้าไปหน้า Settings ของ Umami Cloud แล้วนำ Tracking Code มาแปะไว้ที่หน้าเว็บของเรา เช่นใน <head>..</head>
<script defer src="https://cloud.umami.is/script.js" data-website-id="<ID>" ></script>
ปัญหา adblock บล็อค
หากเรามี Adblocker หรือ browser มีการกำหนด privacy บางครั้งตัว browser จะทำการ block umami script ทำให้เราไม่สามารถ tracking ได้
วิธีการแก้ไขก็คือ มีได้หลายแบบ เช่น
host script เอง
ทำการ host ตัว script เอง ที่เว็บไซต์ของเรา คือ ปกติ เราจะ src ไปที่ https://cloud.umami.is/script.js
เราก็แค่สร้างไฟล์ .js
ของเราเอง สมมติ ผมตั้งชื่อว่า my-script.js
<script defer src="/my-script.js" data-website-id="<ID>"></script>
ขอเสียของวิธีนี้คือ ถ้าหากตัว umami มีการอัพเดท code เราก็ต้องทำการอัพเดทตามทุกครั้ง
proxy ด้วย Cloudflare worker
วิธีนี้คือการำ proxying ด้วยการใช้ Cloudlfare worker โดยผมทำการ custom script จากตัว Plausible ซึ่ง doc ก็อ่านเพิ่มเติมได้จาก link ด้านล่างนี้ครับ
ตัวอย่าง Cloudlare worker (เข้าจากหน้า cloudflare dashboard -> Workder & Pages)
const ScriptName = '/script.js';const Endpoint = '/api/send';
const ScriptWithoutExtension = ScriptName.replace('.js', '')
addEventListener('fetch', event => { event.passThroughOnException(); // stop send request to umami and just return 200 ok event.respondWith(handleRequest(event));
return new Response(null, { status: 404 });})
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://cloud.umami.is/script.js"); 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://api-gateway.umami.dev/api/send", request);}
ปัญหา Astro
ปัญหา เนื่องจากเว็บนี้ที่เขียนด้วย Astro ได้ใช้ View Transition ทำให้มันเกิด side-effect นิดหน่อย คือตัว tracking จะมองเห็นว่า user เปิดหน้าแรก (initial page) เท่านั้น แม้ว่าจะกดไปหน้าอื่นๆ ก็ตาม
วิธีแก้ไข คือใช้ data-astro-rerum
มาช่วย ค่านี้ จะ trigger ก็ต่อเมื่อมีการ reload page จริงๆ หลังจาก transition ซึ่งจะทำให้ analytics มัน tracking ตรงละ
<script defer is:inline data-astro-rerun src="https://cloud.umami.is/script.js" data-website-id="<ID>"></script>
🎉 เพียงเท่านี้ ก็สามารถ tracking ได้แล้ว
- Authors
-
Chai Phonbopit
เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust