Gatsby 사이트에서 Google Analytics(gtag)를 효율적으로 로드

성능을 고려한다면 gatsby.js 사이트와 구글 애널리틱스로 작업하는 것은 조금 까다롭습니다. 최신 라이트하우스 버전(v6 이상)을 사용하면 Google 태그 관리자가 있는 경우(특히 gatsby-plugin-google-analytics를 설치하는 경우) 성능이 많이 저하됩니다. 몇 달 전에는 성능에 집착했기 때문에 내 사이트 중 하나에서 분석을 제거하기도 했습니다.

하지만 새로 구축한 사이트에서 분석을 제거하고 싶지 않았고 성능도 저하시키고 싶지 않았습니다. 그래서 해결책을 찾기 시작했고 분석 스크립트 로드를 지연시키는 방법을 찾았습니다here. 새 gtag 스크립트 설정과 일치하도록 스크립트를 수정했습니다. 특정 기간이 지난 후 또는 사용자가 사이트와 상호 작용하기 시작하면 gtag 스크립트를 삽입합니다.

gtag 설정

gatsby-browser.js 파일에 다음 스크립트를 추가해야 합니다. 여기에서는 환경 변수를 사용하여 Google 애널리틱스 추적 ID를 숨깁니다. .env 파일을 추가하고 거기에 GATSBY_GA_TRACKING_ID 값을 제공해야 합니다. onreadystatechange 메서드에서 스크립트 로딩 지연을 조정할 수 있습니다(3500ms 동안 최상의 결과를 얻었습니다).

function initGTM() {
  if (window.isGTMLoaded) {
    return false;
  }

  window.isGTMLoaded = true;

  const script = document.createElement('script');

  script.type = 'text/javascript';
  script.async = true;
  script.src = `https://www.googletagmanager.com/gtag/js?id=${process.env.GATSBY_GA_TRACKING_ID}`;

  script.onload = () => {
    window.dataLayer = window.dataLayer || [];
    function gtag() {
      dataLayer.push(arguments);
    }
    gtag('js', new Date());

    gtag('config', `${process.env.GATSBY_GA_TRACKING_ID}`);
  };

  document.head.appendChild(script);
}

function loadGTM(event) {
  initGTM();
  event.currentTarget.removeEventListener(event.type, loadGTM);
}

exports.onClientEntry = () => {
  document.onreadystatechange = () => {
    if (document.readyState !== 'loading') {
      setTimeout(initGTM, 3500);
    }
  };

  document.addEventListener('scroll', loadGTM);
  document.addEventListener('mousemove', loadGTM);
  document.addEventListener('touchstart', loadGTM);
};

GitHub 작업 환경에 추적 ID 추가

GitHub Action을 사용하여 내 사이트 배포를 자동화하고 있습니다. 따라서 배포 서버에서 환경 변수를 읽어야 합니다. 프로젝트에 .env 파일을 제공할 수 있지만 이것은 안전하지 않습니다. GitHub의 프로젝트 비밀을 사용하여 자격 증명/비밀을 숨길 수 있습니다. 프로젝트의 설정 페이지로 이동하고 메뉴에서 Secrets 페이지로 이동합니다. 이제 GATSBY_GA_TRACKING_ID라는 저장소 비밀을 추가하고 추적 ID를 값으로 제공하십시오.

워크플로 구성 파일에서 env 라는 섹션을 추가합니다. env 섹션에 아래와 같이 환경 변수를 추가합니다. env 섹션은 워크플로 구성에서 jobs 섹션 앞에 와야 합니다.

name: GitHub Pages

on:
  push:
    branches:
      - main

env:
  GATSBY_GA_TRACKING_ID: ${{secrets.GATSBY_GA_TRACKING_ID}}

jobs:
  deploy:
  ......
  ......

어려운 수업

If you want to access the environment variable in the BROWSER in a Gatsby site, prefix your variable name with GATSBY_.

글 읽어주셔서 감사하고, 도움이 되셨다면 공유 부탁드립니다.