Как показать результаты Lighthouse в Google Таблицах с помощью настраиваемой функции

Опубликовано: 2020-11-19

Автоматизация и машинное обучение обладают огромным потенциалом, чтобы помочь всем нам в маркетинге. Но на данный момент многие из этих инструментов недоступны для людей, которые не умеют кодировать или могут немного кодировать, но на самом деле не очень довольны этим.

Часто случается, что в офисе оказывается один или два человека, которым удобно писать и редактировать код, а затем эти люди создают сценарии и записные книжки, которые запускают все остальные. Рабочий процесс выглядит примерно так:

Я покажу вам простой способ упростить этот рабочий процесс, чтобы убрать шаги, на которых людям нужно запустить скрипт и отформатировать вывод. Вместо этого они могут запускать автоматизацию прямо из Google Таблиц.

Пример, который я вам покажу, относится к настраиваемой функции Sheets, которая возвращает оценку Lighthouse для URL-адреса, как на этом гифке:

Метод, который я вам покажу, - не единственный способ сделать это, но он иллюстрирует гораздо более общую технику, которую можно использовать для многих вещей, включая алгоритмы машинного обучения.

Есть две части:

Приложение Google Cloud Run, которое будет делать сложные вещи (в данном случае запускать тест Lighthouse) и отвечать на HTTP-запросы.
Пользовательская функция Appscript, которая будет делать запросы к API, созданному на шаге 1, и возвращать результаты в таблицу Google.

Облачные приложения

Cloud Run - это служба Google, которая берет предоставленный вами образ докера и делает его доступным по HTTP. Вы платите только тогда, когда выполняется HTTP-запрос, поэтому для такой услуги, которая не используется круглосуточно, это очень дешево. Фактическая стоимость будет зависеть от того, сколько вы его используете, но я бы оценил менее 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, в котором описывается, как установить указанное выше приложение, и файл Docker, чтобы мы могли завершить все в 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. Для меня это простая команда:

 docker push gcr.io/MY_PROJECT_ID/lighthouse-sheets

Но вам, возможно, придется сначала настроить аутентификацию докеров, прежде чем вы сможете это сделать. Альтернативный метод - использование Google Cloud Build для создания изображения; это может сработать для вас лучше, если вы не можете заставить работать аутентификацию.

Затем вам нужно создать службу Cloud Run с этим образом докера.

Откройте Cloud Run и нажмите «Создать службу».

Назовите и измените настройки. Вы должны дать своей службе имя и настроить несколько других параметров:

Лучше всего выбрать регион, близкий к тому, где проживает большая часть аудитории ваших сайтов. Проверка скорости сайта для британского сайта из Токио не даст таких же результатов, как у вашей аудитории.

Чтобы вы могли вызывать эту службу из Google Таблиц, она должна разрешать неаутентифицированные вызовы. Если вы беспокоитесь о блокировке и защите службы, чтобы предотвратить ее использование другими людьми, вам придется сделать это (например) путем проверки секрета API в HTTP-запросе или чего-то в этом роде.

Затем вы должны выбрать контейнер, который вы сделали ранее. Вы можете ввести имя, если вы его помните, или нажать «Выбрать» и выбрать его в меню.

Затем нажмите «Показать дополнительные настройки», потому что необходимо выполнить дальнейшую настройку.

Вам необходимо увеличить объем памяти, поскольку для запуска Lighthouse-тестов требуется более 256 МБ. Я выбрал здесь 1 ГБ, но для некоторых сайтов вам может потребоваться максимальный размер 2 ГБ.

Я обнаружил, что уменьшение параллелизма до 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 в своем браузере.

Следующим шагом будет написание сценария приложения, чтобы вы могли использовать свой новый API из Google Sheets.

Откройте новый 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 будет доступна настраиваемая функция под названием LIGHTHOUSE.

Самый простой способ начать с этого - скопировать мой пример Google Sheet, а затем самостоятельно обновить код, чтобы он указывал на свой собственный API и возвращал результаты Lighthouse, которые вас больше всего интересуют.

Расширьте свои знания в области электронных таблиц

Самое замечательное в этом методе то, что он может работать со всем, что можно обернуть в контейнер Docker, и возвращать результат в течение 30 секунд. К сожалению, у пользовательских функций Google Sheets есть тайм-аут, поэтому у вас не будет достаточно времени, чтобы обучить какой-то массивный алгоритм глубокого обучения, но это все равно оставляет многое, что вы можете сделать.

Я использую очень похожий процесс для своего аддона Google Sheets Forecast Forge, но вместо того, чтобы возвращать оценку Lighthouse, он возвращает прогноз на основе машинного обучения для любых цифр, которые вы в него вводите.

Возможности для такого рода вещей действительно впечатляют, потому что в поисковом маркетинге у нас есть много людей, которые очень хорошо разбираются в таблицах. Я хочу увидеть, что они смогут сделать, если смогут использовать все свои знания в области электронных таблиц и улучшить их с помощью машинного обучения.

Мнения, выраженные в этой статье, принадлежат приглашенному автору и не обязательно Search Engine Land. Здесь перечислены штатные авторы.