Cloudflare와 통합된 Google Tag Gateway를 이용해 Google 태그 로드, 이벤트 전송을 사용자 소유 도메인에서 제공하는 방법을 공유합니다.

요약

애플 Safari 브라우저는 서드파티 쿠키와 크로스 사이트 트래킹을 강하게 제한함.
방문자 분석에 사용되는 스크립트 로딩, 분석 데이터 전송에 사용하는 도메인을 자체 소유 도메인으로 바꿔버리면 Safari 유저들의 데이터도 정상적으로 분석 가능함
이를 위해 Google Cloud Platfrom의 Cloud Run에서 사용할 수 있는 서버사이드 GTM(Google Tag Manager)이라는 방법이 있지만 비싸고 설정이 복잡함
Google Tag Gateway와 직접 통합을 제공하는 Cloudflare를 이용하면 공짜로 복잡한 과정들(운영, 모니터링, 로깅)을 신경 쓸 필요 없이 방문자 분석이 가능함

주의사항

Google Tag Gateway에서 사용할 도메인은 Cloudflare에서 프록시 적용 중이어야 하고(요청 가로챈 후 구글 쪽으로 라우팅 처리해야 하니까), 측정 데이터 전송 경로(/metrics)는 사용할 도메인에서 서비스 중인 기능에 영향을 미치지 않도록 사용하지 않는 경로를 선택하셔야 합니다.

요청 흐름

Google Tag Gateway 적용 전

[Browser]
  ↓ (loads JS)
[googletagmanager.com]
  ↓ (sends data)
[google-analytics.com]

Google Tag Gateway 적용 후

[Browser]
  ↓ (loads JS, sends data)
[tag-gateway.example.com] ← my server(1st-party domain)
  ↓ (forwards data)
[google-analytics.com]

설정 방법

Google 태그 관리자 홈페이지 - 관리자 탭에서 Google 태그 게이트웨이 옵션 활성화, Cloudflare 자동 설정을 위해 로그인 후 Google 태그 ID와 측정 데이터가 전송될 경로를 설정해 주시면 자체 도메인에서 스크립트 로드 후 방문자 분석 정보를 Google 태그 → 태그 게이트웨이 → GA4 순서로 전송할 수 있습니다.

스크리트 로드 후 Google 태그 초기화 시 server_container_url을 프록시 적용된 Cloudflare에서 도메인 + 측정 데이터가 전송될 경로로 등록해 줍니다.

<script async src="https://tag-gateway.example.com/metrics/gtag/js?id=G-XXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());
  gtag("config", "G-XXXX", {
    server_container_url: "https://tag-gateway.example.com/metrics", // 측정 경로 주의
    ...
  });
</script>

이제 사파리 개인정보보호 브라우징에서도 1st-party 도메인으로 처리되면서 측정 데이터가 Gateway를 통해서 Google Analytics 서버로 포워딩 되는 것을 보실 수 있습니다.

GA4를 사용해보신 분들이라면 이정도면 무리없이 적용하실 수 있으실텐데요, 마케터가 아닌 개발자 입장에서의 gtag.js & GTM 개념과 차이점, 조금 더 상세한 Google 태그 & Tag Gateway 작동 흐름과 TEST-NET을 이용한 게이트웨이 분리 방법이 필요하신 분들은 Google Tag Gateway: 방문자 분석에서 애플의 벽을 넘는 법, 정답은 Cloudflare에 있었어를 참고해주시기 바랍니다.

Google 태그 게이트웨이: 사용자 소유 도메인에서 구글 태그를 제공하는 방법