Jak wyświetlać wyniki Lighthouse w Arkuszach Google z niestandardową funkcją

Opublikowany: 2020-11-19

Automatyzacja i uczenie maszynowe mają ogromny potencjał, aby pomóc nam wszystkim w marketingu. Ale w tej chwili wiele z tych narzędzi jest niedostępnych dla osób, które nie potrafią kodować lub które potrafią kodować trochę, ale nie są z tym zbyt wygodne.

Często zdarza się, że w biurze jest jedna lub dwie osoby, które czują się swobodnie w pisaniu i edytowaniu kodu, a następnie ci ludzie tworzą skrypty i notatniki, które wszyscy inni prowadzą. Przepływ pracy wygląda trochę tak:

Pokażę ci prosty sposób na usprawnienie tego przepływu pracy, aby usunąć etapy, w których ludzie muszą uruchomić skrypt i sformatować dane wyjściowe. Zamiast tego mogą uruchomić automatyzację bezpośrednio z poziomu Arkuszy Google.

Przykład, który pokażę, dotyczy niestandardowej funkcji Arkuszy, która zwraca wynik Lighthouse dla adresu URL takiego jak w tym gifie:

Metoda, którą wam pokażę, nie jest jedynym sposobem na zrobienie tego, ale ilustruje znacznie bardziej ogólną technikę, którą można wykorzystać do wielu rzeczy, w tym algorytmów uczenia maszynowego.

Istnieją dwie części:

  1. Aplikacja Google Cloud Run, która wykona skomplikowane czynności (w tym przypadku uruchomi test Lighthouse) i będzie odpowiadać na żądania HTTP.
  2. Niestandardowa funkcja Appscript, która wysyła żądania do interfejsu API utworzonego w kroku 1 i zwraca wyniki do Arkusza Google.

Aplikacje działające w chmurze

Cloud Run to usługa Google, która pobiera dostarczony przez Ciebie obraz Dockera i udostępnia go przez HTTP. Płacisz tylko za żądanie HTTP, więc w przypadku usługi takiej jak ta, która nie jest używana 24 godziny na dobę, 7 dni w tygodniu, jest bardzo tania. Rzeczywisty koszt będzie zależał od tego, ile go używasz, ale szacuję, że to mniej niż 1 USD miesięcznie, aby uruchomić tysiące testów.

Pierwszą rzeczą, którą musimy zrobić, jest stworzenie obrazu Dockera, który przeprowadzi analizę Lighthouse, gdy wyślemy do niego żądanie HTTP. Na szczęście dla nas istnieje dokumentacja pokazująca, jak programowo przeprowadzić audyt Lighthouse na Github. Połączony kod zapisuje analizę w pliku, zamiast zwracać odpowiedź przez HTTP, ale można to łatwo naprawić, opakowując całość w aplikację Express w następujący sposób:

 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}`); });

Zapisz ten kod jako index.js.

Będziesz także potrzebował pliku o nazwie package.json, który opisuje, jak zainstalować powyższą aplikację oraz Dockerfile, abyśmy mogli wszystko zawinąć w Dockerze. Wszystkie pliki z kodem są dostępne na 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" ]

Zbuduj obraz dockera, a następnie możesz przetestować rzeczy lokalnie na swoim komputerze w następujący sposób:

Najpierw uruchom obraz:

 docker run -p 8080:8080 lighthouse-sheets

A następnie sprawdź, czy to działa:

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

Lub odwiedź localhost: 8080? Url = https% 3A% 2F% 2Fwww.example.com w swojej przeglądarce. Powinieneś zobaczyć dużo JSON.

Następnym krokiem jest przesłanie obrazu do rejestru Google Container. Dla mnie to proste polecenie:

 docker push gcr.io/MY_PROJECT_ID/lighthouse-sheets

Ale może być konieczne skonfigurowanie uwierzytelniania platformy Docker, zanim będzie można to zrobić. Alternatywną metodą jest użycie Google Cloud Build do utworzenia obrazu; może to działać lepiej, jeśli nie możesz uruchomić uwierzytelniania.

Następnie musisz utworzyć usługę Cloud Run za pomocą tego obrazu dockera.

Otwórz Cloud Run i kliknij „Utwórz usługę”

Nazwij i dostosuj ustawienia. Musisz nadać swojej usłudze nazwę i skonfigurować kilka innych ustawień:

Najlepiej wybrać region, który jest blisko miejsca, w którym mieszka większość odbiorców Twoich witryn. Sprawdzenie szybkości witryny w przypadku witryny brytyjskiej z Tokio nie da takich samych wyników, jak te, które uzyskują Twoi odbiorcy.

Aby móc dzwonić do tej usługi z Arkuszy Google, musi ona zezwalać na nieuwierzytelnione wywołania. Jeśli martwisz się o zablokowanie i zabezpieczenie usługi, aby uniemożliwić innym osobom korzystanie z niej, będziesz musiał to zrobić (na przykład) sprawdzając sekret API w żądaniu HTTP lub coś w tym rodzaju.

Następnie musisz wybrać kontener, który zrobiłeś wcześniej. Możesz wpisać nazwę, jeśli ją pamiętasz lub kliknąć „Wybierz” i wybrać ją z menu.

Następnie kliknij „Pokaż ustawienia zaawansowane”, ponieważ należy wykonać dalszą konfigurację.

Musisz zwiększyć przydział pamięci, ponieważ testy Lighthouse wymagają do uruchomienia więcej niż 256 MB. Wybrałem tutaj 1GiB, ale możesz potrzebować maksymalnego limitu 2GiB dla niektórych witryn.

Odkryłem, że zmniejszenie współbieżności do 1 poprawia niezawodność usługi. Oznacza to, że Google automatycznie uruchomi nowy kontener dla każdego żądania HTTP. Wadą jest to, że kosztuje to nieco więcej pieniędzy.

Kliknij „Utwórz”, a Twoja usługa Cloud Run będzie wkrótce gotowa.

Możesz go szybko przetestować, używając adresu URL. Na przykład:

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

Lub odwiedź https://lighthouse-sheets-public-v4e5t2rofa-nw.a.run.app?url=https%3A%2F%2Fwww.example.com w swojej przeglądarce.

Następnym krokiem jest napisanie Appscript, abyś mógł używać nowego interfejsu API z poziomu Arkuszy Google.

Otwórz nowy Arkusz Google i otwórz edytor Appscript.

Otworzy się nowa karta, w której możesz zakodować swoją niestandardową funkcję Arkuszy Google.

Kluczową ideą jest tutaj użycie funkcji Appscript UrlFetchApp do wykonania żądania HTTP do interfejsu API. Oto podstawowy kod, który to robi:

 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) }

Ostatnia linia zwraca ogólny wynik wydajności do arkusza. Możesz go edytować, aby zwrócić coś innego. Na przykład, aby uzyskać wynik SEO, użyj wyniku.categories.seo.score.

Możesz też zwrócić wiele kolumn wyników, zwracając listę taką jak ta:

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

Zapisz plik, a w Twoim arkuszu Google będzie dostępna niestandardowa funkcja o nazwie LIGHTHOUSE.

Najłatwiejszym sposobem na rozpoczęcie tego jest skopiowanie mojego przykładowego arkusza Google, a następnie samodzielna aktualizacja kodu, aby wskazywała na własne API i zwrócenie wyników Lighthouse, które najbardziej Cię interesują.

Poszerz swoją wiedzę o arkuszach kalkulacyjnych

Wspaniałą rzeczą w tej metodzie jest to, że może ona działać w przypadku wszystkiego, co można umieścić w kontenerze Dockera i zwrócić wynik w ciągu 30 sekund. Niestety, funkcje niestandardowe Arkuszy Google mają limit czasu, więc nie będziesz mieć wystarczająco dużo czasu, aby wyszkolić potężny algorytm głębokiego uczenia, ale to wciąż pozostawia wiele do zrobienia.

Używam bardzo podobnego procesu dla mojego dodatku do Arkuszy Google Forecast Forge, ale zamiast zwracać wynik Lighthouse zwraca prognozę opartą na uczeniu maszynowym dla dowolnych liczb, które w niej umieścisz.

Możliwości tego rodzaju są naprawdę ekscytujące, ponieważ w marketingu w wyszukiwarkach mamy wielu ludzi, którzy bardzo dobrze radzą sobie z arkuszami kalkulacyjnymi. Chcę zobaczyć, co mogą zrobić, gdy będą mogli wykorzystać całą swoją wiedzę z arkuszy kalkulacyjnych i wzbogacić ją o uczenie maszynowe.

Opinie wyrażone w tym artykule są opiniami autora gościa i niekoniecznie Search Engine Land. Lista autorów personelu jest tutaj.