Netlify Functions 및 Google 스프레드시트를 사용한 웹사이트 분석

오래 전에 내 사이트에서 분석을 포기했습니다. 저는 Google Analytics와 Matomo(이전 Piwik)를 사용하고 있었지만 두 가지 이유로 저를 미치게 만들었습니다.

페이지 속도 테스트 도구에서 가장 높은 점수를 얻을 수 없었고

나는 수많은 페이지뷰와 세션에 집착했다.

이제 이 문제가 해결되었으므로 요즘 내 사이트를 방문하는 사람이 있는지 확인하는 데 관심이 있었습니다.

Netlify 기능

시작하기 전에 Netlify Functions를 사용할 줄 알았습니다. 운 좋게도 나는 Oliver James의 기사를 빨리 발견했고 그의 코드를 재사용하여 기본 스크립트를 설정했습니다.

exports.handler = async ({ headers }) => {
  ...

  return {
    statusCode: 200,
    body: "R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7",
    headers: { "content-type": "image/gif" },
    isBase64Encoded: true,
  };
};

또한 모든 페이지 하단에 다음 스니펫을 삽입했습니다.

<img src="/.netlify/functions/clue/?url=$currentUrl" alt="">

즉, 이미지 태그에서 Netlify 함수를 호출하고 base64로 인코딩된 이미지를 반환합니다.

사용자가 어느 페이지에 있는지 알려주는 url GET 매개변수를 전달하고 있습니다. $currentUrl는 여기에서 자리 표시자 변수입니다. 실제로 11ty의 page.url 변수를 사용하고 있습니다.

구글 시트

그의 기사에서 Oliver는 내가 익숙하지 않은 MongoDB를 사용하므로 Google 스프레드시트를 사용하여 내 사이트 방문을 기록할 수 있다고 생각했습니다. 그로 인해 Google Sheets API 문서로 이동했는데 문서가 잘 정리되지 않았기 때문에 도움이 되지 않았습니다. 그래서 다시 운을 시험해 보았고 npm 패키지google-spreadsheet를 찾았습니다. JavaScript용으로 가장 많이 사용되는 Google Sheets API 래퍼입니다.

첫 번째 단계는 실제 Google 스프레드시트 문서를 만드는 것이었습니다. 그런 다음 make a Google Cloud project 및 enable Google Sheets APIs . 그런 다음 요청을 할 수 있으려면 set up the service account authentication 해야 했습니다.

☝️ Don't forget to execute the third step while setting the authentication.

“Share the doc with your service account using the email noted above.”

마지막으로 대본을 작성하고 방문자를 볼 수 있습니다. headers.referer가 나에게 적합하지 않다는 것을 알게 되었고 날짜, 경로 및 사용자 에이전트 문자열만 기록하기로 결정했습니다.

const now = new Date();
const url = event.queryStringParameters.url;
const ua = event.headers['user-agent'];

google-spreadsheet 라이브러리 작업을 시작하려면 먼저 초기화하고 인증해야 했습니다.

const doc = new GoogleSpreadsheet(process.env.GGL_SHTS_ID);

await doc.useServiceAccountAuth({
  client_email: process.env.GGL_SHTS_EMAIL,
  private_key: process.env.GGL_SHTS_KEY.replace(/\\n/gm, "\n"),
});

그런 다음 문서와 원하는 시트를 로드해야 했습니다.

await doc.loadInfo();
const sheet = doc.sheetsByIndex[0]

마지막으로 현재 시트에 새 행을 추가했습니다.

await sheet.addRow({
  date: now,
  url: url,
  ua: ua
});

전체 코드는 my website repository(공개적으로 노출됨)에서 찾을 수 있습니다.

잡았다

개발 단계에서 예상치 못한 몇 가지 오류가 있었습니다. 먼저 Google 스프레드시트에서 다음 오류를 보고했습니다. 보안 TLS 연결이 설정되기 전에 클라이언트 네트워크 소켓 연결이 끊어졌습니다. 가능한 한 빨리 상태 코드를 반환하고 비동기 함수가 백그라운드에서 실행되도록 하고 싶었습니다. 내 로컬 환경에서는 작동했지만 프로덕션 환경에서는 작동하지 않았습니다. 그래서 비동기 요청에 await 키워드를 사용해야 했습니다.

둘째, 서비스 계정 키는 Netlify 환경 변수에 저장된 여러 줄 필드였습니다. 불행히도 Netlify는 여러 줄 값을 읽는 데 문제가 있지만 Mehul Kar는 공유했습니다the solution on Netlify Support Forum.

private_key: process.env.GGL_SHTS_KEY.replace(/\\n/gm, "\n"),

셋째, 내 로그에서 일반 사용자 에이전트보다 훨씬 많은 HeadlessChrome 사용자 에이전트를 보았습니다. 나는 이것들이 봇이라고 생각했지만 확실하게 말할 수 없었다. 나와 Bramus는 그것이 사실임을 확인했습니다. 이러한 로그의 대부분은 가동 시간 검사기에서 가져온 것 같습니다.

결론

처음 며칠 동안 나는 내 사이트가 조회수를 받는 것을 보았고, 그것이 바로 내가 보고 싶었던 것이었습니다. 그래서 이 작은 코드가 저에게 그랬던 것처럼 여러분에게도 도움이 되었기를 바랍니다.