맞춤 함수를 사용하여 Google 스프레드 시트에서 Lighthouse 점수를 표시하는 방법

자동화와 기계 학습은 마케팅에서 우리 모두를 도울 수있는 엄청난 잠재력을 가지고 있습니다. 그러나 현재 이러한 도구 중 상당수는 코딩을 할 수 없거나 약간 코딩 할 수 있지만 실제로 익숙하지 않은 사람들은 액세스 할 수 없습니다.

흔히 일어나는 일은 사무실에 코드 작성 및 편집에 익숙한 사람이 한두 명 있고,이 사람들은 다른 사람들이 실행하는 스크립트와 노트북을 생성하는 것입니다. 워크 플로는 다음과 같습니다.

사람들이 스크립트를 실행하고 출력 형식을 지정해야하는 단계를 제거하기 위해이 워크 플로를 간소화하는 간단한 방법을 보여 드리겠습니다. 대신 Google 스프레드 시트 내에서 직접 자동화를 실행할 수 있습니다.

내가 보여줄 예는 다음 gif와 같은 URL에 대해 Lighthouse 점수를 반환하는 Sheets 사용자 정의 함수에 대한 것입니다.

제가 보여 드릴 방법은이를 수행하는 유일한 방법은 아니지만 기계 학습 알고리즘을 포함하여 많은 일에 사용될 수있는 훨씬 더 일반적인 기술을 보여줍니다.

두 부분이 있습니다.

1. 복잡한 작업 (이 경우 Lighthouse 테스트 실행)을 수행하고 HTTP 요청에 응답하는 Google Cloud Run 애플리케이션입니다.
2. 1 단계에서 생성 한 API를 요청하고 결과를 Google Sheet에 반환하는 Appscript 사용자 지정 함수입니다.

클라우드 실행 애플리케이션

Cloud Run은 사용자가 제공 한 Docker 이미지를 가져와 HTTP를 통해 제공하는 Google 서비스입니다. HTTP 요청이있을 때만 비용을 지불하므로 연중 무휴로 사용되지 않는 이와 같은 서비스는 매우 저렴합니다. 실제 비용은 사용량에 따라 다르지만 수천 개의 테스트를 실행하는 데 월 1 달러 미만으로 추정됩니다.

가장 먼저해야 할 일은 HTTP 요청을 할 때 Lighthouse 분석을 수행 할 Docker 이미지를 만드는 것입니다. 다행히도 Github에서 프로그래밍 방식으로 Lighthouse 감사를 실행하는 방법을 보여주는 문서가 있습니다. 링크 된 코드는 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로 저장합니다.

그런 다음 위의 응용 프로그램과 Dockerfile을 설치하는 방법을 설명하는 package.json이라는 파일도 필요하므로 모든 것을 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를 사용하여 이미지를 만드는 것입니다. 인증이 작동하지 않으면 더 잘 작동 할 수 있습니다.

다음으로이 Docker 이미지로 Cloud Run 서비스를 만들어야합니다.

Cloud Run을 열고 "서비스 만들기"를 클릭합니다.

이름을 지정하고 설정을 조정합니다. 서비스에 이름을 지정하고 몇 가지 다른 설정을 구성해야합니다.

귀하의 사이트에 대한 대부분의 청중이 사는 지역과 가까운 지역을 선택하는 것이 가장 좋습니다. 도쿄의 영국 사이트에 대한 사이트 속도를 확인하면 청중이 얻는 것과 동일한 결과를 얻을 수 없습니다.

Google 스프레드 시트에서이 서비스를 호출하려면 인증되지 않은 호출을 허용해야합니다. 다른 사람이 서비스를 사용하지 못하도록 서비스를 잠그고 보안하는 것이 걱정된다면 (예를 들어) HTTP 요청의 API 시크릿 또는 이와 유사한 것을 확인하여이를 수행해야합니다.

다음으로 이전에 만든 컨테이너를 선택해야합니다. 기억 나는 경우 이름을 입력하거나 "선택"을 클릭하고 메뉴에서 선택할 수 있습니다.

그런 다음 수행 할 추가 구성이 있으므로 "고급 설정 표시"를 클릭합니다.

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을 방문하십시오.

다음 단계는 Google 스프레드 시트 내에서 새 API를 사용할 수 있도록 Appscript를 작성하는 것입니다.

새 Google 시트를 열고 Appscript 편집기를 엽니 다.

그러면 Google 스프레드 시트 맞춤 함수를 코딩 할 수있는 새 탭이 열립니다.

여기서 핵심 아이디어는 Appscript UrlFetchApp 함수를 사용하여 API에 대한 HTTP 요청을 수행하는 것입니다. 이를 수행하는 몇 가지 기본 코드는 다음과 같습니다.

 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 시트에서 LIGHTHOUSE라는 사용자 지정 기능을 사용할 수 있습니다.

이를 시작하는 가장 쉬운 방법은 예제 Google Sheet를 복사 한 다음 자신의 API를 가리키고 가장 관심있는 Lighthouse 결과를 반환하도록 코드를 직접 업데이트하는 것입니다.

스프레드 시트 노하우 향상

이 메서드의 가장 큰 장점은 Docker 컨테이너에 래핑 할 수있는 모든 항목에 대해 작동하고 30 초 이내에 결과를 반환 할 수 있다는 것입니다. 안타깝게도 Google 스프레드 시트 맞춤 함수에는 시간 초과가 있으므로 대규모 딥 러닝 알고리즘을 학습 할 시간이 충분하지 않지만 여전히 할 수있는 일이 많이 남아 있습니다.

내 Google Sheets 애드온 Forecast Forge에 대해 매우 유사한 프로세스를 사용하지만 Lighthouse 점수를 반환하는 대신에 입력 한 숫자에 대해 기계 학습 기반 예측을 반환합니다.

이런 종류의 가능성은 정말 흥미 롭습니다. 검색 마케팅에는 스프레드 시트에 능숙한 사람들이 많이 있기 때문입니다. 모든 스프레드 시트 지식을 사용하고 머신 러닝으로 향상시킬 수있을 때 무엇을 할 수 있는지보고 싶습니다.

이 기사에 표현 된 의견은 게스트 작성자의 의견이며 반드시 Search Engine Land는 아닙니다. 여기에 직원 작성자가 나열되어 있습니다.