GitHub Pages 홈페이지에 GA4 연결하는 원스톱 프롬프트

원작자는 TUKI(툭이, @Ty_Tuki0609)입니다. ChatGPT로 만든 GitHub Pages 홈페이지에 방문자 수 확인 구조를 붙이는 과정을 X 포스트 2건으로 공유했고, 이 글은 그 원문을 충실히 옮기고 정리한 것입니다.

이미지 출처: https://x.com/Ty_Tuki0609/status/2109157871816687880

ChatGPT로 홈페이지를 만들고, SNS 연결과 최근 활동 자동 반영까지 마쳤다면 다음 단계는 방문자 수를 확인할 구조입니다. 원작자는 Google Analytics 4(GA4)를 연결했습니다. GA4를 연결하면 방문자 수·실시간 접속, 유입 경로·페이지별 조회 같은 기본 지표를 확인할 수 있습니다.

원작자가 정리한 전체 흐름은 다음과 같습니다.

1. Google Analytics에서 GA4 측정 ID를 발급합니다(예: G-XXXXXXXXXX).
2. 아래 프롬프트를 ChatGPT에 입력합니다.
3. GitHub에 반영한 뒤 홈페이지에 접속합니다.
4. GA4 실시간 보고서에서 접속을 확인합니다.

원작자는 직접 접속해 보니 이벤트가 정상적으로 잡혔다고 밝혔습니다. 다만 홈페이지 구조에 따라 적용 방식은 조금 달라질 수 있으며, 첫 지표 수집까지 시간이 걸릴 수 있다는 점을 덧붙였습니다. 또한 GA4는 무료로 사용할 수 있지만, 방문자 데이터·쿠키 처리와 관련된 개인정보 안내 및 동의 요건은 사이트 운영 환경에 따라 확인이 필요하다고 안내했습니다.

GA4 연결 원스톱 프롬프트 전문

아래는 원작자가 실제로 사용한 프롬프트 전문입니다. G-XXXXXXXXXX 부분만 발급받은 측정 ID로 바꿔 그대로 사용합니다.

현재 GitHub Pages로 운영 중인 내 홈페이지에
Google Analytics 4(GA4)를 설치해줘.

GA4 측정 ID:
G-XXXXXXXXXX

먼저 연결된 GitHub 저장소와 현재 홈페이지 구조를 확인해줘.

작업 조건:

1. GA4가 이미 설치되어 있는지 먼저 확인
2. 이미 설치되어 있다면 중복으로 추가하지 않기
3. 현재 홈페이지 구조에 맞는 위치에 Google 태그 설치
4. 기존 디자인과 기능은 그대로 유지
5. SNS 연결, 최근 활동 자동 반영 기능도 유지
6. 페이지 방문과 기본 이벤트가 GA4에서 정상적으로 수집되도록 적용
7. 수정한 파일과 변경 내용을 초보자도 이해하기 쉽게 설명
8. 작업 완료 후 내가 GA4 실시간 보고서에서 정상 작동 여부를 확인하는 방법도 안내

기존 홈페이지 구조를 최대한 유지하면서
필요한 부분만 수정해줘.

필요한 경우 개인정보처리방침 및 쿠키/분석 도구 안내가 필요한지도 함께 확인해줘.

이 프롬프트의 핵심은 세 가지입니다. 이미 설치되어 있으면 중복 추가하지 않는 것, 현재 구조에 맞는 위치에 Google 태그를 설치하는 것, 그리고 기존 디자인·SNS 연결·최근 활동 자동 반영 기능을 그대로 유지하는 것입니다. 작업이 끝나면 ChatGPT가 알려 주는 실시간 보고서 확인 절차를 따라 홈페이지에 직접 접속해 이벤트 수집을 확인합니다.

원문 출처

• TUKI(툭이, @Ty_Tuki0609): ChatGPT로 만든 홈페이지, 이번엔 방문자 수 확인하기
• TUKI(툭이, @Ty_Tuki0609): GA4 연결 원스톱 프롬프트