on
Gatsby 사이트에서 Google Analytics(gtag)를 효율적으로 로드
Gatsby 사이트에서 Google Analytics(gtag)를 효율적으로 로드
gatsby.js 사이트와 구글 분석을 사용하는 것은 성능을 고려한다면 조금 어렵다. 최신 라이트하우스 버전(v6 이상)에서는 Google 태그 관리자가 있으면 성능이 크게 저하됩니다(특히 개츠-플러그인-구글 분석기를 설치한 경우). 몇 달 전에는 성능에 대한 집착으로 인해 분석 기능을 사이트에서 제거하기도 했습니다.
하지만 새로 구축된 사이트에서 분석을 제거하고 싶지도 않았고 성능도 저하시키고 싶지도 않았습니다. 그래서 솔루션 조사를 시작했고 분석 스크립트 로드를 지연시킬 방법을 찾았습니다. 새 GTAG 스크립트 설정과 일치하도록 스크립트를 수정했습니다. 특정 기간 후에 또는 사용자가 사이트와 상호 작용하기 시작하는 경우 gtag 스크립트를 주입합니다.
gtag 설정 중
다음 스크립트를 개츠브라우저.js 파일에 추가해야 합니다. 여기서는 환경 변수를 사용하여 구글 분석 추적 ID를 숨깁니다. .env 파일을 추가하고 GATSBY_GA_TRACKING_ID 값을 제공해야 한다. onreadystate Change 방법에서 스크립트 로드 지연을 조정할 수 있습니다(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 Action env에 추적 ID 추가
GitHub Action을 사용하여 사이트 배포를 자동화하고 있습니다. 따라서 배포 서버에서 환경 변수를 읽어야 합니다. 프로젝트에 .env 파일을 제공할 수 있지만, 안전하지 않습니다. 우리는 GitHub의 프로젝트 비밀을 이용해서 우리의 자격 증명/비밀을 숨길 수 있다. 프로젝트의 설정 페이지로 이동하고 메뉴의 비밀 페이지로 이동합니다. 이제 GATSBY_GA_TRACKING_ID라는 리포지토리 암호를 추가하고 추적 ID를 값으로 제공합니다.
워크플로우 구성 파일에 env라는 섹션을 추가합니다. 환경 섹션에서 아래와 같은 환경 변수를 추가합니다. 워크플로우 구성의 작업 섹션보다 env 섹션이 먼저 와야 합니다.
name: GitHub Pages on: push: branches: - main env: GATSBY_GA_TRACKING_ID: ${secrets.GATSBY_GA_TRACKING_ID} jobs: deploy: ...... ......
하드 레슨
게시물을 읽어주셔서 대단히 감사드리며, 유용하다고 생각되면 공유해 주십시오.
from http://gong-tech.tistory.com/1 by ccl(A) rewrite - 2021-09-22 02:01:41