วิธีแสดงคะแนน Lighthouse ใน Google ชีตด้วยฟังก์ชันที่กำหนดเอง

ระบบอัตโนมัติและการเรียนรู้ของเครื่องมีศักยภาพอย่างมากที่จะช่วยเราทุกคนในด้านการตลาด แต่ในขณะนี้เครื่องมือเหล่านี้จำนวนมากไม่สามารถเข้าถึงได้สำหรับผู้ที่ไม่สามารถเขียนโค้ดหรือผู้ที่สามารถเขียนโค้ดได้เล็กน้อย แต่ไม่ค่อยพอใจกับมัน

สิ่งที่มักเกิดขึ้นคือมีคนหนึ่งหรือสองคนในสำนักงานที่พอใจกับการเขียนและแก้ไขโค้ดจากนั้นคนเหล่านี้ก็ผลิตสคริปต์และสมุดบันทึกที่ทุกคนเรียกใช้ เวิร์กโฟลว์มีลักษณะดังนี้:

ฉันจะแสดงวิธีง่ายๆในการปรับปรุงเวิร์กโฟลว์นี้เพื่อลบขั้นตอนที่ผู้คนต้องเรียกใช้สคริปต์และจัดรูปแบบผลลัพธ์ แต่สามารถเรียกใช้ระบบอัตโนมัติได้โดยตรงจากภายใน Google ชีต

ตัวอย่างที่ฉันจะแสดงให้คุณเห็นคือสำหรับฟังก์ชันที่กำหนดเองของชีตที่ส่งคืนคะแนน Lighthouse สำหรับ URL เช่นใน gif นี้:

วิธีที่ฉันจะแสดงให้คุณเห็นไม่ใช่วิธีเดียวในการทำเช่นนี้ แต่จะแสดงให้เห็นถึงเทคนิคทั่วไปที่สามารถใช้ได้กับหลาย ๆ สิ่งรวมถึงอัลกอริทึมการเรียนรู้ของเครื่อง

มีสองส่วน:

1. แอปพลิเคชัน Google Cloud Run ที่จะทำสิ่งที่ซับซ้อน (ในกรณีนี้คือการทดสอบ Lighthouse) และจะตอบสนองต่อคำขอ HTTP
2. ฟังก์ชันที่กำหนดเองของ Appscript ที่จะส่งคำขอไปยัง API ที่คุณสร้างไว้ในขั้นตอนที่ 1 และส่งคืนผลลัพธ์ไปยัง Google Sheet

แอปพลิเคชันที่รันบนคลาวด์

Cloud Run เป็นบริการของ Google ที่นำอิมเมจนักเทียบท่าที่คุณให้มาและทำให้พร้อมใช้งานผ่าน HTTP คุณจะจ่ายเฉพาะเมื่อมีการร้องขอ HTTP ดังนั้นสำหรับบริการแบบนี้ที่ไม่ได้ใช้งานตลอด 24 ชั่วโมงทุกวันจึงถูกมาก ค่าใช้จ่ายจริงจะขึ้นอยู่กับจำนวนเงินที่คุณใช้ แต่ฉันจะประมาณน้อยกว่า $ 1 ต่อเดือนเพื่อทำการทดสอบหลายพันครั้ง

สิ่งแรกที่เราต้องทำคือสร้างอิมเมจ Docker ที่จะทำการวิเคราะห์ Lighthouse เมื่อเราส่งคำขอ HTTP ไป โชคดีสำหรับเรามีเอกสารบางอย่างที่แสดงวิธีเรียกใช้การตรวจสอบ Lighthouse แบบเป็นโปรแกรมบน Github รหัสที่เชื่อมโยงจะบันทึกการวิเคราะห์ลงในไฟล์แทนที่จะส่งคืนการตอบสนองผ่าน HTTP แต่แก้ไขได้ง่ายโดยการรวมสิ่งทั้งหมดไว้ในแอป Express ดังนี้:

 const express = require('express'); const app = express(); const lighthouse = require('lighthouse'); const chromeLauncher = require('chrome-launcher'); app.get('/', async (req, res) => { // Check that the url query parameter exists if(req.query && req.query.url) { // decode the url const url = decodeURIComponent(req.query.url) const chrome = await chromeLauncher.launch({chromeFlags: ['--headless', '--no-sandbox','--disable-gpu']}); const options = {logLevel: 'info', output: 'html', port: chrome.port}; const runnerResult = await lighthouse(url, options); await chrome.kill(); res.json(runnerResult.lhr) } }); const port = process.env.PORT || 8080; app.listen(port, () => { console.log(`Listening on port ${port}`); });

บันทึกรหัสนี้เป็น index.js

จากนั้นคุณจะต้องมีไฟล์ชื่อ package.json ซึ่งอธิบายถึงวิธีการติดตั้งแอปพลิเคชันข้างต้นและ Dockerfile เพื่อให้เราสามารถรวมทุกอย่างไว้ใน Docker ไฟล์โค้ดทั้งหมดมีอยู่ใน Github

 package.json { "name": "lighthouse-sheets", "description": "Backend API for putting Lighthouse scores in Google sheets", "version": "1.0.0", "author": "Richard Fergie", "license": "MIT", "main": "index.js", "scripts": { "start": "node index.js" }, "dependencies": { "express": "^4.17.1", "lighthouse": "^6.3" }, "devDependencies": {} } Dockerfile # Use the official lightweight Node.js 10 image. # https://hub.docker.com/_/node FROM node:12-slim # Our container needs to have chrome installed to # run the lighthouse tests RUN apt-get update && apt-get install -y \ apt-transport-https \ ca-certificates \ curl \ gnupg \ --no-install-recommends \ && curl -sSL https://dl.google.com/linux/linux_signing_key.pub | apt-key add - \ && echo "deb https://dl.google.com/linux/chrome/deb/ stable main" > /etc/apt/sources.list.d/google-chrome.list \ && apt-get update && apt-get install -y \ google-chrome-stable \ fontconfig \ fonts-ipafont-gothic \ fonts-wqy-zenhei \ fonts-thai-tlwg \ fonts-kacst \ fonts-symbola \ fonts-noto \ fonts-freefont-ttf \ --no-install-recommends \ && apt-get purge --auto-remove -y curl gnupg \ && rm -rf /var/lib/apt/lists/* # Create and change to the app directory. WORKDIR /usr/src/app # Copy application dependency manifests to the container image. # A wildcard is used to ensure copying both package.json AND package-lock.json (when available). # Copying this first prevents re-running npm install on every code change. COPY package*.json ./ # Install production dependencies. # If you add a package-lock.json, speed your build by switching to 'npm ci'. # RUN npm ci --only=production RUN npm install --only=production # Copy local code to the container image. COPY . ./ # Run the web service on container startup. CMD [ "node", "--unhandled-rejections=strict","index.js" ]

สร้างอิมเมจนักเทียบท่าจากนั้นคุณสามารถทดสอบสิ่งต่าง ๆ ในเครื่องคอมพิวเตอร์ของคุณเองได้ดังนี้:

เริ่มต้นภาพก่อน:

 docker run -p 8080:8080 lighthouse-sheets

จากนั้นทดสอบดูว่าใช้งานได้หรือไม่:

 curl -v "localhost:8080?url=https%3A%2F%2Fwww.example.com"

หรือไปที่ localhost: 8080? url = https% 3A% 2F% 2Fwww.example.com ในเบราว์เซอร์ของคุณ คุณควรเห็น JSON จำนวนมาก

ขั้นตอนต่อไปคือการพุชรูปภาพของคุณไปยังรีจิสทรีของ Google Container สำหรับฉันนี่เป็นคำสั่งง่ายๆ:

 docker push gcr.io/MY_PROJECT_ID/lighthouse-sheets

แต่คุณอาจต้องตั้งค่าการพิสูจน์ตัวตนนักเทียบท่าก่อนจึงจะทำได้ อีกวิธีหนึ่งคือการใช้ Google Cloud Build เพื่อสร้างภาพ สิ่งนี้อาจทำงานได้ดีขึ้นสำหรับคุณหากคุณไม่สามารถทำให้การตรวจสอบสิทธิ์ทำงานได้

ถัดไปคุณต้องสร้างบริการ Cloud Run ด้วยอิมเมจนักเทียบท่านี้

เปิด Cloud Run แล้วคลิก“ สร้างบริการ”

ตั้งชื่อและปรับการตั้งค่า คุณต้องตั้งชื่อบริการของคุณและกำหนดการตั้งค่าอื่น ๆ :

ที่ดีที่สุดคือเลือกภูมิภาคที่อยู่ใกล้กับจุดที่ผู้ชมส่วนใหญ่สำหรับไซต์ของคุณอาศัยอยู่ การตรวจสอบความเร็วไซต์สำหรับไซต์ในสหราชอาณาจักรจากโตเกียวจะไม่ให้ผลลัพธ์เหมือนกับสิ่งที่ผู้ชมของคุณได้รับ

ในการเรียกใช้บริการนี้จาก Google ชีตต้องอนุญาตการเรียกใช้ที่ไม่ผ่านการตรวจสอบสิทธิ์ หากคุณกังวลเกี่ยวกับการล็อกและการรักษาความปลอดภัยบริการเพื่อป้องกันไม่ให้ผู้อื่นใช้งานคุณจะต้องดำเนินการนี้โดย (เช่น) ตรวจสอบจากความลับของ API ในคำขอ HTTP หรืออะไรทำนองนั้น

ถัดไปคุณต้องเลือกคอนเทนเนอร์ที่คุณทำไว้ก่อนหน้านี้ คุณสามารถพิมพ์ชื่อถ้าคุณจำได้หรือคลิก“ เลือก” แล้วเลือกจากเมนู

จากนั้นคลิก“ แสดงการตั้งค่าขั้นสูง” เนื่องจากมีการกำหนดค่าเพิ่มเติมที่ต้องทำ

คุณต้องเพิ่มการจัดสรรหน่วยความจำเนื่องจากการทดสอบ Lighthouse ต้องการมากกว่า 256Mb ในการรัน ฉันเลือก 1GiB ที่นี่ แต่คุณอาจต้องการค่าเผื่อสูงสุด 2GiB สำหรับบางไซต์

ฉันพบว่าการลดการทำงานพร้อมกันเป็น 1 ช่วยเพิ่มความน่าเชื่อถือของบริการ ซึ่งหมายความว่า Google จะเริ่มคอนเทนเนอร์ใหม่โดยอัตโนมัติสำหรับคำขอ HTTP แต่ละรายการ ข้อเสียคือค่าใช้จ่ายเพิ่มขึ้นเล็กน้อย

คลิก "สร้าง" และบริการ Cloud Run ของคุณจะพร้อมใช้งานในไม่ช้า

คุณสามารถทดสอบอย่างรวดเร็วโดยใช้ URL ตัวอย่างเช่น:

 curl -v "https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app?url=https%3A%2F%2Fwww.example.com"

หรือไปที่ https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app?url=https%3A%2F%2Fwww.example.com ในเบราว์เซอร์ของคุณ

ขั้นตอนต่อไปคือการเขียน Appscript เพื่อให้คุณสามารถใช้ API ใหม่จากใน Google ชีต

เปิด Google Sheet ใหม่และเปิดตัวแก้ไข Appscript

นี่จะเป็นการเปิดแท็บใหม่ที่คุณสามารถเขียนโค้ดฟังก์ชันที่กำหนดเองของ Google ชีตได้

แนวคิดหลักที่นี่คือการใช้ฟังก์ชัน Appscript UrlFetchApp เพื่อดำเนินการร้องขอ HTTP ไปยัง API ของคุณ โค้ดพื้นฐานบางอย่างที่ต้องทำมีลักษณะดังนี้:

 function LIGHTHOUSE(url) { const BASE_URL = "https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app" var request_url = BASE_URL+"?url="+encodeURIComponent(url) var response = UrlFetchApp.fetch(request_url) var result = JSON.parse(response.getContentText()) return(result.categories.performance.score * 100) }

บรรทัดสุดท้ายจะส่งคืนคะแนนประสิทธิภาพโดยรวมลงในแผ่นงาน คุณสามารถแก้ไขเพื่อส่งคืนอย่างอื่นได้ ตัวอย่างเช่นในการรับคะแนน SEO ให้ใช้ result.categories.seo.score แทน

หรือคุณสามารถส่งคืนผลลัพธ์หลายคอลัมน์โดยส่งคืนรายการดังนี้:

[result.categories.performance.score, result.categories.seo.score]

บันทึกไฟล์จากนั้นคุณจะมีฟังก์ชั่นที่กำหนดเองพร้อมใช้งานใน Google Sheet ของคุณที่ชื่อว่า LIGHTHOUSE

วิธีที่ง่ายที่สุดในการเริ่มต้นคือคัดลอก Google Sheet ตัวอย่างของฉันจากนั้นอัปเดตโค้ดด้วยตัวคุณเองเพื่อชี้ไปที่ API ของคุณเองและส่งคืนผลลัพธ์ Lighthouse ที่คุณสนใจมากที่สุด

ปรับปรุงความรู้เกี่ยวกับสเปรดชีตของคุณ

สิ่งที่ยอดเยี่ยมเกี่ยวกับวิธีนี้คือสามารถใช้ได้กับทุกสิ่งที่สามารถห่อในคอนเทนเนอร์ Docker และส่งคืนผลลัพธ์ภายใน 30 วินาที น่าเสียดายที่ฟังก์ชันที่กำหนดเองของ Google ชีตหมดเวลาดังนั้นคุณจึงมีเวลาไม่นานพอที่จะฝึกอัลกอริทึมการเรียนรู้เชิงลึกขนาดใหญ่ แต่ก็ยังเหลืออีกมากที่คุณสามารถทำได้

ฉันใช้กระบวนการที่คล้ายกันมากสำหรับส่วนเสริม Google ชีตใน Forecast Forge แต่แทนที่จะส่งคืนคะแนน Lighthouse กลับเป็นการคาดการณ์ที่ขับเคลื่อนด้วยการเรียนรู้ของเครื่องสำหรับตัวเลขที่คุณใส่ไว้

ความเป็นไปได้ของสิ่งนี้เป็น เรื่องที่ น่าตื่นเต้นมากเพราะใน Search Marketing เรามีคนจำนวนมากที่ใช้สเปรดชีตได้ดี ฉันต้องการดูว่าพวกเขาทำอะไรได้บ้างเมื่อพวกเขาสามารถใช้ความรู้เกี่ยวกับสเปรดชีตทั้งหมดและปรับปรุงด้วยการเรียนรู้ของเครื่อง

ความคิดเห็นที่แสดงในบทความนี้เป็นความคิดเห็นของผู้เขียนรับเชิญและไม่จำเป็นต้องเป็น Search Engine Land ผู้เขียนทีมงานมีรายชื่ออยู่ที่นี่